X Cocos2d-xで表示した自機をタッチで横に動かす

目次

1 はじめに
2 タッチされている場所に絵を動かす
3 動く範囲を画面内に制限する
4 まとめ

はじめに

この記事は、画面下に自機を表示し、それを横方向にのみ動かしたい人向けの、覚書です。

タッチされている場所に絵を動かす

下記コードは、絵を(画面横幅/2,高さ100)に表示したあと、タッチされている間、横方向にのみ動かす例です。

GameScene.lua

local GameScene = class("GameScene",function()
    return cc.Scene:create()
end)

function GameScene.create()
    local scene = GameScene.new()
    scene:addChild(scene:createLayer())
    return scene
end


function GameScene:ctor()
    self.visibleSize = cc.Director:getInstance():getVisibleSize()
    self.origin = cc.Director:getInstance():getVisibleOrigin()
    self.schedulerID = nil
end

function GameScene:playBgMusic()
--[[local bgMusicPath = cc.FileUtils:getInstance():fullPathForFilename("background.mp3") 
    cc.SimpleAudioEngine:getInstance():playMusic(bgMusicPath, true)
    local effectPath = cc.FileUtils:getInstance():fullPathForFilename("effect1.wav")
    cc.SimpleAudioEngine:getInstance():preloadEffect(effectPath)]]
end

-- create farm
function GameScene:createLayer()
    local layer = cc.Layer:create()

    -- スプライトを追加
    local sprite = cc.Sprite:create("land.png")
    sprite:setPosition(self.visibleSize.width/2,100)
    layer:addChild(sprite)

    -- タッチ開始時に呼ばれる関数
    local function onTouchBegan(touch, event)

        return true -- 開始イベントの関数はtrueを返す
    end
    
    -- タッチしながら指を動かしている時に呼ばれる関数
    local function onTouchMoved(touch, event)
        -- a)タッチ点の座標を取得
        local location = touch:getLocation()
        
        -- b)タッチ点のx座標へ絵を移動
        sprite:setPositionX(location.x)
    end
    
    -- タッチを離した時に呼ばれる関数
    local function onTouchEnded(touch, event)

    end

    -- タッチイベントで呼ばれる関数を登録
    local listener = cc.EventListenerTouchOneByOne:create()
    listener:registerScriptHandler(onTouchBegan, cc.Handler.EVENT_TOUCH_BEGAN )
    listener:registerScriptHandler(onTouchMoved, cc.Handler.EVENT_TOUCH_MOVED )
    listener:registerScriptHandler(onTouchEnded, cc.Handler.EVENT_TOUCH_ENDED )

    -- このレイヤーでのタッチイベント取得を有効化
    local eventDispatcher = layer:getEventDispatcher()
    eventDispatcher:addEventListenerWithSceneGraphPriority(listener, layer)
    
    return layer
end

return GameScene

a)でタッチ中の座標を取得し、b)で絵の位置をタッチ中のx座標に変更しています。実行するとタッチ中絵を動かすことができますが、画面の端から絵が飛び出すところまで動かせてしまいます。

動く範囲を画面内に制限する

表示画面内で絵を動かすにはb)を下記のように変更します。

GameScene.lua

...
        -- b)タッチ点のx座標へ絵を移動
        local dx = location.x
        local offsetX = sprite:getContentSize().width/2
        -- タッチ位置Xが絵の横幅半分よりも左の場合は、表示位置dxを絵の横幅半分の位置にする
        if location.x < offsetX then
            dx = offsetX
        -- タッチ位置Xが(画面横幅-絵の横幅半分)よりも右の場合は、表示位置dxを(画面横幅-絵の横幅半分)の位置にする
        elseif self.visibleSize.width-offsetX < location.x then
            dx = self.visibleSize.width-offsetX
        end
        -- 絵の表示位置を更新
        sprite:setPositionX(dx)
...

上記コードで、まず現在タッチされているX座標を一旦dxに保存、絵の横幅/2をoffsetXとして変数に格納し、その下で、dxをoffsetX〜(画面幅-offsetX)の範囲に収めます。実行すると、絵は画面からはみ出さない範囲で横に動かせます。

まとめ

今回の例は、例えば、インベーダーゲームのような、画面下に表示した自機を動かすのに使えます。