初心者が征く!オリジナルゲーム作成道 day5

こんにちは!インターン生の内村です!

今回はいよいよシューティングゲーム作成に入っていきます!

まずは、前々回にも少し書いたゲーム画面への画像の表示方法について解説していきます。
ちなみに今回の作成の時間も使って少しバージョンアップしています!

※前回の画面

前回同様にこちらのサイトを参考にしています。
https://creive.me/archives/9788/ けいしゃけ 様

また、cocos2dの教本も今回から使用し始めました。
「JavaScript版Cocos2d-x かんたんゲーム開発」
Emanuele Feronato (著), 清水友晶 (翻訳), 松浦晃洋 (翻訳), 齊藤建二 (翻訳), 古木映治 (翻訳), 藤本武志 (翻訳)  (敬称略)

早速ですが今回出来上がったゲーム画面がこちらです!

前回と比べてコーディング以外にもサイズなどを変更して見やすい画面になっています!
では、コーディングについて解説していきます!

まずは下記のようなテンプレートを作ります。
①HTMLファイル

( 〈title〉タグはshooting_gameにしていますが何でもOKです!)

②main.jsファイル

(緑の部分のコメントアウトは解説です。)

③project.jsonファイル

(デフォルトから変えるところはほとんどありません。)

④その他.jsファイル
用途に応じて作成するので特にテンプレートなどはありません。
(ファイル名は何でもよいですが分かりやすい名前が管理しやすくオススメです!)

例)画像や音声などを管理するファイル→resource.js アプリケーションの機能を書くファイル→app.js など

次に使用する画像を手に入れます。(商用利用などを目的としない場合もフリーサイトからいただくことをオススメします!)
手に入れた画像は縦横のサイズをペイントソフトなどを用いて小さくし透過しておきましょう。(大きすぎると画像が表示されません)
※背景にする画像はgamecanvasの大きさと同じにしましょう
また、画像の拡張子(名前の後ろについてるやつ。.jsや.png)は.pngか.jpgで統一し、プロジェクトフォルダ内のresフォルダに入れておきましょう。
これで準備完了です。

筆者はこちらのフリーサイトからいただきました!
http://gahag.net/ 背景の画像
https://www.ac-illust.com キャラクターの画像 イラストレーター=miyagi 様 

テンプレートを用意してくださいと書きましたが、今回はresorce.jsとapp.js(少しだけproject.json)のみ書き換えていきます!
以下の手順でコーディングしていきます。
①resource.jsを作成し画像を結びつけておく
②app.jsを作成し画像表示の機能を書く
③project.jsonを編集しlistに.resourcejsを追加する

①resource.jsを作成し画像を結びつけておく
以下の画像のようにコーディングします。

【解説】
var res の配列には使用する画像を代入して結びつけておきます。今後使用する画像はここに追加しましょう。
(res/bg.pngはresフォルダに入っているbg.pngという名前の画像を読み込んでいるという意味です)
下の for(var i in ~)という処理は配列g_resources[]に上記の画像を読み込んだ配列res[]を代入するという意味です。
(2段階に分ける理由は、画像に変更があったときに大幅にコードを書き直す手間をかけないためです)

②app.jsを作成し画像表示の機能を書く
以下の画像のようにコーディングします。

【解説】
コーディングの前に、解説がより分かりやすくなるようにフレームワークcocos2dの階層構造について説明します。
cocos2dの階層構造は以下のようになっています。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
スプライト  スプライト         スプライト  スプライト
———————————–     ——————————————
レイヤ             レイヤ
——————————————————————————————
シーン
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

つまりシーンが一番大きい要素でその上にレイヤ、さらに上にスプライトが存在します。
それぞれの解説はコメントアウト文参照です。

これでcoco2dの階層構造について知ることができました。少し長いですが順に見ていきましょう。
このコーディングでは、まず上部でメインとなるシーンを作っています。

下部では、レイヤに対してスプライトを作成しています。
このスプライトが操作キャラや背景の画像です。
解説については、コメントアウト参照です。

③project.jsonを編集しlistに.resourcejsを追加する
以下の画像のようにコーディングします。

【解説】
これは簡単なコーディングで、ただ単にresource.jsファイルを読み込んでもらうために「”jsList”」に「”src/resource.js”」と書くだけです。
(res/と同じくsrcフォルダに入っているresource.jsファイルを読み込みという意味です)

興味を持たれた方はお気軽にお問い合わせください。

インターンシップへの申し込み・お問い合わせ先

インターンシップへの申し込み・お問い合わせ先
メールでのお問い合わせは、下記フォームに入力して送信してください。
ご氏名 (例)山田 太郎
メールアドレス 半角英数字:ご入力間違いのないようにご注意ください
メールアドレス(確認用) 半角英数字:ご入力間違いのないようにご注意ください
電話番号 (例)0354339211 ※ハイフン抜きで入力してください
題名
お問合わせ内容

アーカイブ

カテゴリー