この文書の現在のバージョンと選択したバージョンの差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
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には雛形となるコードが記述されているので、これを改造して実装する。 | * Scriptには雛形となるコードが記述されているので、これを改造して実装する。 | ||
- | <sxh cpp; title: player.script> | + | <code> |
function init(self) | function init(self) | ||
msg.post(".", "acquire_input_focus") | msg.post(".", "acquire_input_focus") | ||
ライン 176: | ライン 176: | ||
function on_reload(self) | function on_reload(self) | ||
end | end | ||
- | </sxh> | + | </code> |
* init で変数の初期化。on_input で入力処理を、update で移動処理を実装している。 | * init で変数の初期化。on_input で入力処理を、update で移動処理を実装している。 | ||
* このスクリプトをplayerのGameObjectにAdd Component File から追加します。 | * このスクリプトをplayerのGameObjectにAdd Component File から追加します。 | ||
ライン 199: | ライン 199: | ||
- | <sxh cpp; title: player.script> | + | <code> |
function init(self) | function init(self) | ||
msg.post(".", "acquire_input_focus") | msg.post(".", "acquire_input_focus") | ||
ライン 250: | ライン 250: | ||
end | end | ||
end | end | ||
- | </sxh> | + | </code> |
add と書かれた部分のコードを追加します。 | add と書かれた部分のコードを追加します。 | ||
fire キーが押された時に、rocketfactory を生成するスクリプトになっています。 | fire キーが押された時に、rocketfactory を生成するスクリプトになっています。 | ||
ライン 261: | ライン 261: | ||
* scripts 右クリック -> New -> Script からスクリプトを追加。名前は rocket.script としました。 | * scripts 右クリック -> New -> Script からスクリプトを追加。名前は rocket.script としました。 | ||
- | <sxh cpp; title: rocket.script> | + | <code> |
go.property("dir", vmath.vector3()) | go.property("dir", vmath.vector3()) | ||
ライン 286: | ライン 286: | ||
end | end | ||
- | </sxh> | + | </code> |
dir プロパティを追加。initでロケットの速度を初期化し、updateで移動処理を実装しています。 | dir プロパティを追加。initでロケットの速度を初期化し、updateで移動処理を実装しています。 | ||
ライン 294: | ライン 294: | ||
* Add Component File から rocket.scriot を追加。 | * Add Component File から rocket.scriot を追加。 | ||
* Add Component ー> Sprite を追加し、player.atlas を設定。Default Animationはrocket にします。 | * 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> | ||
+ | 実行するとロケットが飛んで1秒後に爆発エフェクトが再生されます。 | ||
+ | しかしこのままでは爆発エフェクトのゴミが残ってしまいます。エフェクトのゲームオブジェクトが削除される様に修正します。 | ||
+ | |||
+ | <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点加算される様になります。 | ||
+ | ===== 終わり ===== | ||
+ | - 公式チュートリアルはここで終了しています。 | ||
+ | - なんどもトライ&エラーを繰り返してコツを掴むことが大切です。 |