差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

--- wiki:defold2:tips:003 [2017/10/11 22:46]
step
+++ wiki:defold2:tips:003 [2018/04/04 22:56] (現在)
step
@@ ライン 1: / ライン 1: @@
-====== 公式チュートリアル War battles で学習する ======
+====== 003 公式チュートリアル War battles で学習する ======
 ===== 概要 =====
@@ ライン 128: / ライン 128: @@
   * Scriptには雛形となるコードが記述されているので、これを改造して実装する。
-<sxh cpp; title: player.script>
+<code>
 function init(self)
 	msg.post(".",  "acquire_input_focus")
@@ ライン 176: / ライン 176: @@
 function on_reload(self)
 end
-</sxh>
+</code>
   * init で変数の初期化。on_input で入力処理を、update で移動処理を実装している。
   * このスクリプトをplayerのGameObjectにAdd Component File から追加します。
@@ ライン 199: / ライン 199: @@
-<sxh cpp; title: player.script>
+<code>
 function init(self)
 	msg.post(".",  "acquire_input_focus")
@@ ライン 250: / ライン 250: @@
     end
 end
-</sxh>
+</code>
 add と書かれた部分のコードを追加します。
 fire キーが押された時に、rocketfactory を生成するスクリプトになっています。
@@ ライン 261: / ライン 261: @@
   * scripts 右クリック -> New -> Script からスクリプトを追加。名前は rocket.script としました。
-<sxh cpp; title: rocket.script>
+<code>
 go.property("dir", vmath.vector3())
@@ ライン 286: / ライン 286: @@
 end
-</sxh>
+</code>
 dir プロパティを追加。initでロケットの速度を初期化し、updateで移動処理を実装しています。
@@ ライン 294: / ライン 294: @@
   * 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点加算される様になります。
+===== 終わり =====
+  - 公式チュートリアルはここで終了しています。
+  - なんどもトライ＆エラーを繰り返してコツを掴むことが大切です。

ユーザ用ツール

サイト用ツール

差分

ページ用ツール