Defold公式にあるwar-battles でDefoldの基本的な使い方を学習してみます。

• 
• Assets ビュー スクリプトやリソースなど、全てのファイルはAssetsビュー以下に配置します。
• Changed Files ビュー ファイルの更新差分が確認できます。
• Scene ビュー Outline シーンに配置されたゲームオブジェクトが確認できます。
• OutLine ビュー Sceneに配置するゲームオブジェクトはこちらに配置します。
• Properties ビュー Outlineビューで選択しているゲームオブジェクトの詳細を確認できます。
  

• main.collection. ファイルを開く
• outline ビューに配置されているlogo game object を選択して削除します。
• main/images/logo.png ファイルを削除します。
• main/images/logo.atlas ファイルを削除します。
• Project → Build で何も表示されない空のウインドウが起動します。

• war-battles のサンプルリソースダウンロード/展開します。
• war-battles-assets以下のファイルを全てAssets ビューにドラッグ＆ドロップで配置します。
• 

• Assets ビューのmainフォルダを右クリック → New → 「Tile source」を選択。名前は「map.tilesource」にします。
• map.tilesource のProperties ビューにあるImageにmap.png を指定します。
• 
  
• map.tilesourceにmap.pngのテクスチャが設定されました。ile Source のプロパティにはタイルのサイズや余白、コリジョンデータが設定できます。
• 
  

• Assets ビューのmainフォルダを右クリック → New → 「Tile Map」を選択。名前は「map.tilemap」にします。
• 「map.tilemap」プロパティのTile Source に先ほど作成したmap.tilesource を設定します。
• Outlineのlayer1を選択した状態で、メニューの「Scene」→ Tile Map → Show Pallete を選択すると、タイルパレットが表示されます。
• 

タイルパレットから配置したい地面を選択し、タイルマップに塗りマップを作成します。 タイルマップ上で、Shift + マウスドラッグすることでタイルマップの範囲コピーが可能なので、よく似たマップは便利な機能を使ってサクサク作りましょう。

完成したマップ。配置は自由。

• 「main.collection」を開いて、Outline ビューで右クリック → Add Game Object から空のGameObjectを追加します。
• 空のGameObjectを右クリック → Add Component File から map.tilemap を追加します。
• この状態でメニューバーのProject ｰ> Build からアプリをビルドするとウインドウが立ち上がり、編集結果を確認することが出来ます。

• また、ウインドウサイズはAssets → game.project を開いたdisplay のwidth とheight から切り替えることが出来ます。
  
  
  

• Assets ビューのmainフォルダを右クリック→ New Folder からAtlasフォルダを作成します。
• Atlasフォルダを右クリック ｰ> New → Atlas からアトラスを作成。名前はplayerとします。

からっぽのAtlasが作成されたので、中身を埋めていきます。

• player.atlas を開いて、OutLine ｰ> Atlas を右クリック → AddAnimation Group を作成する。名前は「player-down」。
• そこにAdd Images を選択。AtlasにまとめるImageを選択します。
• 複数選択はShiftを押しながら選択すると出来ます。
• 今回はInfantry/down/1〜4を選択しました。
• アニメーションのプレビューは、Animation Groupを選択した状態でSpaceキーを押下するか、メニューバーの Scene → Play から実行出来ます。

1. main.collection.を開く
2. 右クリック → Add GameObject でGameObjectを追加。名前をplayerに変更。
3. player Gameobject を右クリック → Add Component → Sprite コンポーネントを追加。
4. Sprite コンポーネントのImageに player.atlas を設定
5. Default Animation に player-down を選択。
6. アニメーション切り替え速度はFPSを調整することで可能。8を設定しました。

これで、シーンにプレイヤーが配置されました。

• player GameObjectのz座標を1.0に設定すると、マップより手前に表示されます。Z座標で表示優先度が決定する。

• Assets ビューの /input/game.input_binding ファイルを開く。
• Input Buildings のKey Triggerに矢印キーの上下左右のキー入力を追加し、Action名「up」「down」「left」「right」を割り当てます。

• Assts → main → scripts → New… → Script を追加。名前は「player.script」に設定。
• Scriptには雛形となるコードが記述されているので、これを改造して実装する。

<sxh cpp; title: player.script> function init(self)

msg.post(".",  "acquire_input_focus")

  self.moving = false     
  self.input  = vmath.vector3() 
  self.dir    = vmath.vector3(0, 1, 0) 
  self.speed  = 50    

end

function final(self)

msg.post(".",  "release_input_focus")

end

function update(self, dt)

  if self.moving then
      local pos = go.get_position() 
      pos = pos + self.dir * self.speed * dt 
      go.set_position(pos) 
  end
  
  self.input.x = 0 
  self.input.y = 0
  self.moving = false	

end

function onmessage(self, messageid, message, sender) end

function oninput(self, actionid, action)

  if action_id == hash("up") then
      self.input.y = 1
  elseif action_id == hash("down") then
      self.input.y = -1
  elseif action_id == hash("left") then
      self.input.x = -1
  elseif action_id == hash("right") then
      self.input.x = 1
  end
      
  if vmath.length(self.input) > 0 then
      self.moving = true 
      self.dir = vmath.normalize(self.input) 
  end	

end

function onreload(self) end </sxh> * init で変数の初期化。oninput で入力処理を、update で移動処理を実装している。

• このスクリプトをplayerのGameObjectにAdd Component File から追加します。
• ビルドして実行確認すると上下左右のキー入力でプレイヤーキャラの移動が確認できます。

1. player.atlas　にAnimation Group を追加。名前は「rocket」
2. rocket を右クリック Add Images から turret rocket/1〜3を追加します。FPSは適度に調節。20にしました。
3. Flip Horizontal にチェックを入れます。ロケットの向きを調整します。これにチェックが入っていないとロケットの上下が逆さまに表示されてしまいます。
   1. このロケットは最初からマップに表示される訳ではないので配置はしません。
4. player を右クリック → Add Component → Factory から生成用コンポーネントを追加。名前はrocketfactoryとします。
5. Assets/main/ にGameObjectを作成。 名前はrocket.goとします。
6. rocketfactory のprototypeにrocket.goファイルを設定します。

• /input/game.input_binding. を開いて、space キーを押下した時に”fire” actionが実行される様に設定します。
• player.scriptにスクリプトを記述します。

<sxh cpp; title: player.script> function init(self)

msg.post(".",  "acquire_input_focus")

  self.moving = false
  self.firing = false	-- add
  self.input  = vmath.vector3() 
  self.dir    = vmath.vector3(0, 1, 0) 
  self.speed  = 50    

end

function update(self, dt)

  if self.moving then
      local pos = go.get_position() 
      pos = pos + self.dir * self.speed * dt 
      go.set_position(pos) 
  end

1. - add
   

   if self.firing then
       local angle = math.atan2(self.dir.y, self.dir.x) 
       local rot = vmath.quat_rotation_z(angle) 
       local props = { dir = self.dir } 
       factory.create("#rocketfactory", nil, rot, props)
   end    
   
   self.input.x = 0 
   self.input.y = 0
   self.moving = false	
   self.firing = false -- add

   end

function oninput(self, actionid, action)

  if action_id == hash("up") then
      self.input.y = 1
  elseif action_id == hash("down") then
      self.input.y = -1
  elseif action_id == hash("left") then
      self.input.x = -1
  elseif action_id == hash("right") then
      self.input.x = 1
  -- add
  elseif action_id == hash("fire") and action.pressed then
      self.firing = true
  end
      
  if vmath.length(self.input) > 0 then
      self.moving = true 
      self.dir = vmath.normalize(self.input) 
  end	

end </sxh> add と書かれた部分のコードを追加します。 fire キーが押された時に、rocketfactory を生成するスクリプトになっています。

• scripts 右クリック → New → Script からスクリプトを追加。名前は rocket.script としました。

<sxh cpp; title: rocket.script> go.property(“dir”, vmath.vector3())

function init(self)

self.speed = 200

end

function final(self) end

function update(self, dt)

  local pos = go.get_position() 
  pos = pos + self.dir * self.speed * dt 
  go.set_position(pos)	

end

function onmessage(self, messageid, message, sender) end

function oninput(self, actionid, action) end

function on_reload(self) end

</sxh> dir プロパティを追加。initでロケットの速度を初期化し、updateで移動処理を実装しています。

• Add　Component File から rocket.scriot を追加。
• Add Component ｰ> Sprite を追加し、player.atlas を設定。Default Animationはrocket にします。

• player.atlas を開いて Animation Groupを追加。名前は“explosion”とします。
• FPSは16を設定しました。explosionを選択した状態でスペースキーで動きを確認。
• playback は爆発は一度だけ再生して終わりたいので「Once Forward」に変更します。

ここまで出来ていればSpriteアニメーションの作り方は覚えて来たかなと思います。

• rocket.script を編集します。

<sxh cpp; title: rocket.script> function init(self)

self.speed = 200
self.life = 1 -- 追加。

end

function update(self, dt)

  local pos = go.get_position()
  pos = pos + self.dir * self.speed * dt
  go.set_position(pos)

  self.life = self.life - dt
  
  -- 追加
  if self.life < 0 then
      self.life = 1000
      go.set_rotation(vmath.quat())
      self.speed = 0
      msg.post("#sprite", "play_animation", { id = hash("explosion") })
  end

end

</sxh> 実行するとロケットが飛んで１秒後に爆発エフェクトが再生されます。 しかしこのままでは爆発エフェクトのゴミが残ってしまいます。エフェクトのゲームオブジェクトが削除される様に修正します。

<sxh cpp; title: rocket.script> function onmessage(self, messageid, message, sender)

  if message_id == hash("animation_done") then
      go.delete()
  end

end </sxh> onmessage にスクリプトを追加します。hash値でチェックしている“animationdone” は“playanimation”が呼ばれたたあと送られてくるゲームエンジンのに内包されているメッセージです。この場合、“playanimation”でのSpriteアニメーションの再生が完了時に“animation_done”が呼ばれる形になっています。その時go.delete()関数でゲームオブジェクトを削除します。こうすることで、爆発アニメーションが終了したあと、rocketゲームオブジェクトが削除されます。

1. Assts にtank.go ゲームオブジェクトを作成します。
2. player.atlasを開いて新たにAnimationGroupを作成します。名前はtank-downとします。
3. Add Imageからimageを選択します。「tank/down/1.png」「tank/down/2.png」です。
4. FPSは8を設定しました。

執筆中…