003 公式チュートリアル War battles で学習する [stepism@Defold GameEngineメモ]

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== 003 公式チュートリアル War battles で学習する ======

===== 概要 =====

Defold公式にある[[https://www.defold.com/tutorials/war-battles/|war-battles]] でDefoldの基本的な使い方を学習してみます。
\\

===== Editor の見方 =====

  * {{:wiki:defold2:tips:defold-overview.png?600|}}

  - **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 の[[https://storage.googleapis.com/defold-doc/assets/war-battles-assets.zip|サンプルリソース]]ダウンロード/展開します。
  * war-battles-assets以下のファイルを全てAssets ビューにドラッグ＆ドロップで配置します。
  * {{:wiki:defold2:tips:war-assets-drop.png|}}
\\

  * Assets ビューのmainフォルダを右クリック -> New -> 「Tile source」を選択。名前は「map.tilesource」にします。
  * map.tilesource のProperties ビューにあるImageにmap.png を指定します。
  * {{:wiki:defold2:tips:war-map-tile-source.png|}}
\\

  * map.tilesourceにmap.pngのテクスチャが設定されました。ile Source のプロパティにはタイルのサイズや余白、コリジョンデータが設定できます。
  * {{:wiki:defold2:tips:war-map-tile-source_prop.png|}}
\\


===== タイルマップにタイルを配置する =====
  * Assets ビューのmainフォルダを右クリック -> New -> 「Tile Map」を選択。名前は「map.tilemap」にします。
  * 「map.tilemap」プロパティのTile Source に先ほど作成したmap.tilesource を設定します。
  * Outlineのlayer1を選択した状態で、メニューの「Scene」-> Tile Map -> Show Pallete を選択すると、タイルパレットが表示されます。
  * {{:wiki:defold2:tips:show-plate.png|}}
//
タイルパレットから配置したい地面を選択し、タイルマップに塗りマップを作成します。
タイルマップ上で、Shift + マウスドラッグすることでタイルマップの範囲コピーが可能なので、よく似たマップは便利な機能を使ってサクサク作りましょう。
{{:wiki:defold2:tips:cut.png|}}
//


完成したマップ。配置は自由。
{{:wiki:defold2:tips:replace-map.png|}}
\\
\\
\\

===== GameObject の追加 =====
  * 「main.collection」を開いて、Outline ビューで右クリック -> Add Game Object から空のGameObjectを追加します。
  * 空のGameObjectを右クリック -> Add Component File から map.tilemap を追加します。
  * この状態でメニューバーのProject ｰ> Build からアプリをビルドするとウインドウが立ち上がり、編集結果を確認することが出来ます。
{{:wiki:defold2:tips:2017-10-03_7.47.38.png|}}
\\
\\
\\

  * また、ウインドウサイズはAssets -> game.project を開いたdisplay のwidth とheight から切り替えることが出来ます。
{{:wiki:defold2:tips:2017-10-04_7.46.38.png|}}
\\
\\
\\


===== キャラクターのアニメーションAtlasの作成 =====
  * Assets ビューのmainフォルダを右クリック-> New Folder からAtlasフォルダを作成します。
  * Atlasフォルダを右クリック ｰ> New -> Atlas からアトラスを作成。名前は**player**とします。
{{:wiki:defold2:tips:2017-10-05_7.38.24.png|}}

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

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

{{:wiki:defold2:tips:2017-10-08_18.05.35.png|}}
\\
\\

===== プレイヤーキャラの配置 =====
  - main.collection.を開く
  - 右クリック -> Add GameObject でGameObjectを追加。名前をplayerに変更。
  - player Gameobject を右クリック -> Add Component -> Sprite コンポーネントを追加。
  - Sprite コンポーネントのImageに player.atlas を設定
  - Default Animation に player-down を選択。
  - アニメーション切り替え速度はFPSを調整することで可能。8を設定しました。
{{:wiki:defold2:tips:2017-10-08_20.05.07.png|}}

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

<WRAP info>プレイヤーキャラがマップより後ろの表示されてしまう場合</WRAP>
  * player GameObjectのz座標を1.0に設定すると、マップより手前に表示されます。Z座標で表示優先度が決定する。
\\
\\
\\

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

{{:wiki:defold2:tips:2017-10-08_20.41.28.png|}}
\\
\\
\\


===== プレイヤーキャラの移動スクリプトの実装 =====
  * Assts -> main -> scripts -> New... -> Script を追加。名前は「player.script」に設定。
  * Scriptには雛形となるコードが記述されているので、これを改造して実装する。

<code>
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 on_message(self, message_id, message, sender)
end

function on_input(self, action_id, 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 on_reload(self)
end
</code>
  * init で変数の初期化。on_input で入力処理を、update で移動処理を実装している。
  * このスクリプトをplayerのGameObjectにAdd Component File から追加します。
  * ビルドして実行確認すると上下左右のキー入力でプレイヤーキャラの移動が確認できます。
\\
\\
\\


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


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


<code>
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

    -- 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 on_input(self, action_id, 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	
</code>
add と書かれた部分のコードを追加します。
fire キーが押された時に、rocketfactory を生成するスクリプトになっています。
\\
\\
\\


===== ロケット用スクリプトの作成 =====
  * scripts 右クリック -> New -> Script からスクリプトを追加。名前は rocket.script としました。

<code>
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 on_message(self, message_id, message, sender)
end

function on_input(self, action_id, action)
end

function on_reload(self)
end

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


===== ロケット用ゲームオブジェクトの中身 =====
{{:wiki:defold2:tips:2017-10-12_7.40.55.png|}}
  * Add　Component File から rocket.scriot を追加。
  * Add Component ｰ> Sprite を追加し、player.atlas を設定。Default Animationはrocket にします。
\\
\\
\\


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

{{:wiki:defold2:tips:2017-10-18_0.21.19.png|}}
ここまで出来ていればSpriteアニメーションの作り方は覚えて来たかなと思います。
\\
\\
\\
===== 爆発エフェクトのスクリプトを記述 =====
  * rocket.script を編集します。

<code>
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

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

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

===== 敵となる戦車の作成 =====
  - Assts にtank.go ゲームオブジェクトを作成します。
  - player.atlasを開いて新たにAnimationGroupを作成します。名前はtank-downとします。
  - Add Imageからimageを選択します。「tank/down/1.png」「tank/down/2.png」です。
  - FPSは8を設定しました。
  - tank.goを開いてAdd Component ｰ> Sprite を追加。Atlasを選択してDefault Animationを「tank-down」としました。
  - main.collectionを開いて戦車を配置します。
  - Outlineを右クリック Add GameObject File.よりtank.goを選択します。フィールドの適当な位置に配置します。
  - Z座標は1.0に設定して、フィールドとなる地面より手前に表示される様にします。
  - 3体くらい配置してみましょう。[Cmd(Ctrl) + C]-> [Cmd(Ctrl) + V]複製できます。

{{:wiki:defold2:tips:2017-10-23_22.18.24.png|}}
\\
\\
\\


===== ゲームオブジェクトに当たり判定をつける =====

====== 戦車に当たり判定をつける ======
  - tank.go を右クリック -> Add Component -> Collision Object を追加。
  - Type は“Kinematic”。
  - Group を"tanks" に設定。
  - Mask を"rockets" に設定。
  - “collisionobject” を右クリック -> Add Shape -> Box の当たり判定を付けます。
  - Boxのサイズを戦車の見た目に合わせます。  - 
{{:wiki:defold2:tips:2017-10-23_23.22.12.png|}}
\\
\\
\\


====== ロケットに当たり判定をつける ======
  - rocket.go を右クリック -> Add Component -> Collision Object を追加。
  - Type は“Kinematic”。
  - Group を"rockets" に設定。
  - Mask を "tanks"に設定。
  - “collisionobject” を右クリック -> Add Shape -> Box の当たり判定を付けます。
  - Boxのサイズをロケットの見た目に合わせます。
{{:wiki:defold2:tips:2017-10-23_23.27.09.png|}}
\\
\\
\\
===== 当たり判定に対するリアクションの実装 =====
  - テスト。
  - rocket.scriptを編集します。

-- 関数化。爆発アニメーションの再生。

<code>
local function explode(self)
    self.life = 1000
    go.set_rotation(vmath.quat())
    self.speed = 0
    msg.post("#sprite", "play_animation", { id = hash("explosion") })
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
        explode(self)
    end
end

function on_message(self, message_id, message, sender)
    if message_id == hash("animation_done") then
        go.delete()
    -- Add
    elseif message_id == hash("collision_response") then
        explode(self)
        go.delete(message.other_id)
    end
end
</code>
爆発アニメーションをexplode 関数にまとめました。on_message 関数で"collision_response"が送られてきた時に、explode で爆発アニメーションを再生し、対象のGameObjectを削除しています。実行するとロケットが戦車に当たると爆発アニメーションと共に消える様になっています。
\\
\\
\\
===== UIの実装 =====
スコアの表示や、クリア用のUIを作ります。
  - Assets/mainフォルダを右クリック -> New -> Font からフォントを追加。名前は[text.font]とします。
  - text.font を開いて[04font.ttf]を選択します。
  - Assets/mainフォルダを右クリック -> New -> Guiを選択。名前は[ui.Gui]とします。
  - ui.Guiを開いてOutLineからFonts を選択し右クリック -> Add ｰ> text.font を選択します。
  - Nodesを選択し右クリック -> Add -> Text を追加。名前は[score]とします。テキスト内容は“SCORE: 0”を設定しておきます。
  - Textを画面の左上に配置しておきます。

{{:wiki:defold2:tips:2017-10-24_7.57.59.png|}}
\\
\\
  - Assets/mainフォルダを右クリック -> New -> Gui Scriptを追加。名前は[ui.gui_script]
  - ui.gui ファイルを開いて、Outlineの"Guiを選択した状態で表示されるプロパティのScriptに先程作成した[ui.gui_script]を設定します。
  - main.collection.を開いて、Outlineから右クリック -> Add Game Object ｰ> ゲームオブジェクトの名前は"gui"とします。
  - "gui"ゲームオブジェクトを右クリック -> Add Component File から"ui.gui"を選択します。

{{:wiki:defold2:tips:2017-10-29_21.26.11.png|}}

画面にスコアが表示されました。次はスコアを加算していくためのスクリプトを書いていきます。
\\
\\


===== スコアの更新 =====
  - ui.gui_scriptを開きます。

<code>
function init(self)
    -- score の変数を定義し0で初期化します。
    self.score = 0
end

function on_message(self, message_id, message, sender)
	
    -- "add_score"メッセージが返された時に
    if message_id == hash("add_score") then 
        -- scoreを加算する。
        self.score = self.score + message.score 
        -- score　ノードを取得して、テキストを更新します。
        local scorenode = gui.get_node("score") 
        gui.set_text(scorenode, "SCORE: " .. self.score) 
    end 	
end
</code>

  - add_score メッセージを発火するためのスクリプトをrocket.gui_scriptに書きます。
<code>
function on_message(self, message_id, message, sender)
    if message_id == hash("animation_done") then
        go.delete()
    -- Add
    elseif message_id == hash("collision_response") then
        explode(self)
        go.delete(message.other_id)
        -- スコアを100点追加。
        msg.post("/gui#ui", "add_score", {score = 100})        
    end
end
</code>
これでロケットで戦車を倒すとスコアが100点加算される様になります。


===== 終わり =====
  - 公式チュートリアルはここで終了しています。
  - なんどもトライ＆エラーを繰り返してコツを掴むことが大切です。
ユーザ用ツール

サイト用ツール

ページ用ツール
