파라파라 애니메이션 기본(Cocos Code IDE, Lua 언어)

Cocos Code IDE를 사용하여 Lua 언어로 파라파라 애니메이션을 하기 위한 기본을 정리했습니다.
Code IDE의 프로젝트의 신규 작성으로 만들어지는 샘플 프로그램을 참고로 하고, 조금 손을 더하고 있습니다.


실행 환경, IDE
Cocos2d-x 버전
언어


Cocos Code IDE Mac OS X 1.0.0-RC2
Cocos2d-x V3.2
Lua 언어

샘플 코드

새로운 프로젝트 생성으로 생성된 GameScene.lua의 GameScene.create()를 다시 씁니다.

GameScene.lua/GameScene.create

function GameScene.create()
    local scene = GameScene.new()

    visibleSize = cc.Director:getInstance():getVisibleSize()

    -- テクスチャの作成
    local texture = cc.Director:getInstance():getTextureCache():addImage("texture.png")

    -- スプライトフレームの作成
    local frame0 = cc.SpriteFrame:createWithTexture(texture, cc.rect(0, 0, 256, 256))
    local frame1 = cc.SpriteFrame:createWithTexture(texture, cc.rect(256, 0, 256, 256))

    -- スプライトの作成
    local sprite = cc.Sprite:createWithSpriteFrame(frame0)

    -- アニメーションの作成
    local animation = cc.Animation:createWithSpriteFrames({frame0,frame1}, 0.8) -- 0.8はアニメーションを切り替える秒数
    local animate = cc.Animate:create(animation)
    sprite:runAction(cc.RepeatForever:create(animate))

    -- スプライトの位置を設定
    sprite:setPosition(visibleSize.width / 2, visibleSize.height / 2)

    -- シーンに加える
    scene:addChild(sprite)

    return scene
end

텍스처 이미지로 texture.png 파일을 res 디렉토리에 복사합니다.
이미지는 캐릭터 어떻게든 기계 Web 버전에서 만들었습니다.
(제작용으로는 스스로 써야 합니다만, 테스트용의 화상에 바로 준비하고 싶을 때는 매우 편리합니다.)

texture.png

텍스처는 256x256의 크기의 이미지를 옆에 2개 늘어놓고 있습니다.

실행하고 캐릭터가 깜박이는 애니메이션을 하면 OK입니다.

애니메이션 절차

애니메이션 절차는

텍스처에서 애니메이션의 프레임 수만큼 스프라이트 프레임 만들기

스프라이트를 만들고 애니메이션을 설정합니다

스프라이트의 표시 위치를 지정하여 레이어에 추가

됩니다. 절차가 많지만 게임 제작에는 피할 수 없는 부분입니다.

1 텍스처에서 애니메이션의 프레임이되는 프레임 만들기

-- テクスチャの作成
local texture = cc.Director:getInstance():getTextureCache():addImage("texture.png")

-- スプライトフレームの作成
local frame0 = cc.SpriteFrame:createWithTexture(texture, cc.rect(0, 0, 256, 256))
local frame1 = cc.SpriteFrame:createWithTexture(texture, cc.rect(256, 0, 256, 256))

텍스처를 애니메이션 컷으로 하나씩 잘라내고 있습니다.

2 스프라이트를 만들고 애니메이션 설정

-- スプライトの作成
local sprite = cc.Sprite:createWithSpriteFrame(frame0)

-- アニメーションの作成
local animation = cc.Animation:createWithSpriteFrames({frame0,frame1}, 0.8) -- 0.8はアニメーションを切り替える秒数
local animate = cc.Animate:create(animation)
sprite:runAction(cc.RepeatForever:create(animate))

스프라이트를 만들고 작업을 설정합니다.
스프라이트 프레임의 배열과 애니메이션을 전환하는 시간을 지정하여 애니메이션을 만들고 이를 무한대로 반복합니다.

3 스프라이트의 표시 위치를 지정하여 장면에 추가

-- スプライトの位置を設定
sprite:setPosition(visibleSize.width / 2, visibleSize.height / 2)

-- シーンに加える
scene:addChild(sprite)

표시할 위치를 지정하여 장면에 배치하고 화면에 표시합니다.