肆 Cocos2d-xで表示した絵を消してキラッとする
目次
1 はじめに
2 表示した絵を消す
3 絵を消した所をキラッとする
4 今後の予定
開始時にBGMを鳴らす、絵を消す時に効果音を鳴らす、得点を表示する
はじめに
本記事は、cocos2d-xおよびCocos Code IDEを導入し、絵(スプライト)を表示し、タッチに反応して絵を動かした人で、今度はタッチした絵を消したい、またそこにキラッとした視覚効果を表示したい人向けの、覚書です。表示した絵を削除するにはアクションを使います。また、キラッとした視覚効果はパーティクルと呼ばれる粒子視覚効果を使って実現します。そこで、まずタッチした絵をゆっくり消し、その後、そこに粒子視覚効果を表示するコードを追加するという順番で説明していきます。
表示した絵を消す
今回は、タッチされた絵を移動する下記コードを使って説明します。
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 layer
function GameScene:createLayer()
local layer = cc.Layer:create()
-- スプライトを追加
local sprite = cc.Sprite:create("land.png")
sprite:setPosition(100,100)
layer:addChild(sprite)
-- b)タッチイベントで呼ばれる関数
local function onTouchBegan(touch, event)
local location = touch:getLocation()
-- e)タッチ点に絵があるか確認
if cc.rectContainsPoint(sprite:getBoundingBox(), location) then
-- a)スプライトを移動
local x = math.random(100,400) -- 100から400の乱数
local y = math.random(100,600) -- 100から600の乱数
local move = cc.MoveTo:create(0.3, cc.p(x,y))
sprite:runAction(move)
end
return true
end
-- c)タッチイベントで呼ばれる関数を登録
local listener = cc.EventListenerTouchOneByOne:create()
listener:registerScriptHandler(onTouchBegan, cc.Handler.EVENT_TOUCH_BEGAN )
-- d)このレイヤーでのタッチイベント取得を有効化
local eventDispatcher = layer:getEventDispatcher()
eventDispatcher:addEventListenerWithSceneGraphPriority(listener, layer)
return layer
end
return GameScene
a)の部分を下記のように書き換えます。これにより、タッチされた絵は、ゆっくりと見えなくなり最終的に消えます。
...
-- a)スプライトをフェードアウトしてから削除
local fade = cc.FadeOut:create(1)
local remove = cc.RemoveSelf:create()
local sequence = cc.Sequence:create(fade,remove)
sprite:runAction(sequence)
...
cc.FadeOut:create(1)
は、1秒で見た目をフェードアウトするアクション命令です。
cc.RemoveSelf:create()
は、スプライト等を削除するアクション命令です。
cc.Sequence:create(fade,remove)
は、引数のアクションを順番に実行するアクション命令です。
最後のsprite:runAction(sequence)
で、絵(sprite)に対し、1秒かけて見た目をフェードアウトさせた後、描画対象のレイヤーから削除、というアクション命令を実行することになります。
変更を保存した後実行し、絵をタップすると、ゆっくりと見えなくなって消えます。
スプライト等のレイヤーに追加された描画対象物は、フェードアウトしただけではまだそこに存在しており、RemoveSelfアクションを実行することで、ようやく描画対象から削除されます。
アクションを必要としない場合は、sprite:removeFromParent()でも対象の絵を削除できます。これは、例えばゲームオーバー後のリセット処理等でよく使います。
見えないけど削除されていないものが残っていると、意図しないクラッシュが発生することがあります。自分が意図的に見えないようにした絵については、その削除まで意識して開発を行う必要があります。これは、今後説明予定のゲーム開始→ゲームオーバー→リトライの流れを作るときに再度説明します。
絵を消した所をキラッとする
では、今絵を消したところをキラッとさせます。これにはパーティクルという粒子視覚効果を使います。パーティクル自体は、ゲームエンジンでよく提供される機能ですが、粒子の発生頻度や大きさ方向勢い継続時間等、設定しなければいけない項目が多いため、使い始め苦労します。cocos2d-xの場合、パーティクルの出力結果を確認しながら設定内容をGUIで編集し、その設定ファイルの出力までできるウェブアプリparticle2dx.comが利用できます。
ブラウザでparticle2dx.comを開き、画面右のTemplateをクリックした後、
真ん中下のほうにあるdamage3をクリックすると、画面左の表示が星のキラキラになります。その後、画面右上のExportをクリックします、
さらに、画面真ん中あたりにあるCOCOS2DX PNG Containedのあたりをクリックします。
すると、particle_texture.plistという名前のファイルがダウンロードできます。
このファイルparticle_texture.plistを、Cocos Code IDEのプロジェクトExplorerのresフォルダにドラッグアンドドロップし、下のようにresフォルダ下に追加されていればOKです。
Luaコードa)の部分を次のように変更します。
...
-- a)スプライトをフェードアウトしてから削除
local fade = cc.FadeOut:create(1)
-- f)キラッとする
local x,y = sprite:getPosition()
local function func(node)
local particle = cc.ParticleSystemQuad:create("particle_texture.plist")
particle:setPosition(x,y)
layer:addChild(particle)
end
local callFunc = cc.CallFunc:create(func)
local remove = cc.RemoveSelf:create()
local sequence = cc.Sequence:create(fade,callFunc,remove)
sprite:runAction(sequence)
...
f)キラッとする〜callFuncまでを追加し、さらにsequenceの引数にcallFuncを追加しました。
local x,y = sprite:getPosition()
は、削除前の絵の位置を取得しています。
次に絵を削除した後に呼ばれる関数funcを定義し、その中で、
cc.ParticleSystemQuad:create("particle_texture.plist")
により、先ほどダウンロードした設定値ファイルを使ってパーティクルを生成し、
particle:setPosition(x,y)
およびlayer:addChild(particle)
により、削除前の絵の位置を指定して、このパーティクルを描画対象のレイヤーに追加しています。
ここで、cc.CallFunc:create(func)
は関数を呼び出すアクション命令です。このアクションをsequenceの引数の最後に追加することで、絵をフェードアウト、削除、func関数の呼び出しという流れが作れます。
ところで、particleも使わなくなった時点で削除したほうが良いです。今回のパーティクルは0.3秒で放出が終了する設定だったので、下記コードをlayer:addChild(particle)
の下に追加すれば、描画レイヤーにパーティクル追加後、0.3秒待ち、パーティクルを描画レイヤーから削除することができます。
local delay = cc.DelayTime:create(0.3)
local remove = cc.RemoveSelf:create()
local sequence = cc.Sequence:create(delay,remove)
particle:runAction(sequence)
今回は星の粒子でしたが、particle2dxにはほかにも雛形となる設定例があります。また、particle2dxのメニューにあるColor&ShapeやMotionをクリックすると、さまざまな設定値を出力結果を見ながら編集できます。
以上が、タッチした絵を消して、一瞬キラッとさせるためのアクションとパーティクルの簡単な説明になります。
今後の予定
ゲーム開発では、ゲーム開始時にはBGMを再生し、絵を消すときに効果音を鳴らし、絵を消すと同時に得点表示を更新する、という振る舞いがよく用いられます。
次回は、cocos2d-xでのBGMおよび効果音の鳴らし方と、得点表示の仕方について説明する予定です。
Author And Source
この問題について(肆 Cocos2d-xで表示した絵を消してキラッとする), 我々は、より多くの情報をここで見つけました https://qiita.com/CasualGameDev/items/c12973d63fb5e0126245著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .