前回の記事では、Tiledの基本的な作成とPhaserでの描画ができるようになりました。今回の記事では、ゲームの開始ボタン、スコア表示、Tiledでのオブジェクト配置をして、最低限のゲームの要素すべて実装します。最初にゲーム開始ボタンとスコア作成ですが、Phaserでも作れるのですが、htmlで作成ほうが、私は早いので、htmlで作成した例を載せます。この実装はデザインにこだわりが無ければそれほど難しくはないです。仕組みは簡単で、メニューとスコア表示をゲームを描画するcanvasの上に表示させゲーム開始したら、ゲーム開始ボタンを消すだけとしています。*/}実際に作成したサンプルの画像です。「開始ボタン」を押したときの処理を以下に示します。この関数を呼び出すと、ゲームを最初から開始します。前回のTiledのMAPから、今回新たにオブジェクトとバックグランドを追加します。オブジェクトは、プレイヤーがアイテムを取得するときの要素などを配置するとき使用します。バックグランドは背景とかを表示するとき使用します。あと、今回MAPの画面を縦長に大きく拡張しました。言うと、スマフォで表示させたとき、縦長のサイズのほうがスマフォに適しているためです。MAPのレイヤーに地面を配置します。次に、バググランドレイヤーに森を配置します。最後に、オブジェクトに宝石を配置し、名前をつけます。実装上の重要ポイントを説明します。宝石(jewel)の画像データ読み込み宝石(jewel)の画像データ読み込みを読み込みます。ここが私は最初理解できませんでした。タイルセットのデータを指定して読み取ると思ったのですが、予め用意した宝石(jewel)の画像データを個別に指定しないといけないようです。'assets/tiled/maneo-2/tile/tile_0067.png');:}レイヤーの作成と優先順位Tiledで作成したMAPと背景のオブジェクトを作成します。ここでポイントは、setLayerでmaneo_layerを現在の有効レイヤーにすることです。これをやらないと、MAPとプレイヤーの物理演算が対象でなくなり、プレイヤーがMAPを超えて落ちていきます。Game.map.setLayer('maneo_layer');:オブジェクトの取得と配置Tiledで作成したオブジェクトを取得して、スプライトとして配置します。スプラウトはグループに追加してします。});:プレイヤーとMAP、オブジェクトの衝突検出を実装します。setCollisionで衝突するタイル番号を指定しますが、今回は範囲指定しています。バクグランドは衝突させないので、空データをセットしています。オブジェクトの衝突は、overlapで設定しています。以下の例では、オブジェクトとプレイヤーが衝突すると、音の鳴らし、オブジェクトを破棄しています。});:実際のサンプル以上、実装すべて完了すると、以下のような動きになります。今回で、ゲームらしくなってきたので、次回からさらにゲームらしくするために、いろいろ試していきたいと思います。お付き合いいただければ幸いです。HONDA福島県在住、50代です。40代に比べると体が疲れやすくなったと実感している今日このごろ..WBEシステム開発の勉強を兼ねて本ブログを開設しました。ブログはこう書くべきを無視して自分の興味あるプログラムを「作っては見直し」「作っては見直し」しています。最近は、SNSの自動化に力を入れてます。X、Instgram、LINEなどの自動化のご相談を承っております。広告クリニックのサンプルページです。アイコンやロゴのセットを提供するツールキットです。このブログで契約しているレンタルサーバーです。農家の経営改善や課題解決に強いカンパニーです。PAGESNS連携、WEBシステムお任せください。SHOPでは、ご利用のユーザ様個人情報の取り扱いに細心の注意を払っております。使用して、サイト利用者が当サイトや他のサイトに過去にアクセスした際の情報に基づいて広告を配信します。そのパートナーは適切な広告をサイト利用者に対して表示します。広告設定でパーソナライズ広告を無効にすることができます。Cookieの利用についてCookieは、当サイトや他サイトへのアクセスに関する情報が含まれており、多くのサイトで利用者に有益な機能を提供する目的で使用されています。Cookieには、サイト利用者の個人情報(氏名、住所、メールアドレス、電話番号)は一切含まれません。Analytics」を利用しています。Analytics」はトラフィックデータの収集のためにCookieを使用しています。このトラフィックデータは匿名で収集されており、個人を特定するものではありません。この機能はCookieを無効にすることで収集を拒否することができますので、ご利用のブラウザ設定をご確認のうえ、拒否設定を行ってください。当サイトは、個人情報に関して適用される日本の法令を遵守するとともに、本ポリシーの内容を適宜見直しその改善に努めます。修正された最新のプライバシーポリシーは常に本ページにて開示されます。