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にしました。
   1. このロケットは最初からマップに表示される訳ではないので配置はしません。
3. player を右クリック → Add Component → Factory から生成用コンポーネントを追加。名前はrocketfactoryとします。
4. Assets/main/ にGameObjectを作成。 名前はrocket.goとします。
5. 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で移動処理を実装しています。

• main/ に rocket.go GameObjectを作成します。
• rocket.go を開いて、Add Component → Sprite を追加。Imageにrocket を選択。
• rocket.go → Add Component File → rocket.scriptを選択します。

執筆中…