C言語しか知らない大学生がCocos2d-xでゲーム作ってみたいpart3

皆様こんにちは。インターン生の百目鬼(どうめき)です。

前回、前々回とインストール作業だけで終わってしまいました。
今回こそはしっかりインストール作業を終えてゲーム制作に着手!

しました!やっと!

CocosCreatorに絞ることにしました。
というわけでまず、公式から出題されているらしいチュートリアルで簡素なものを組みあげていくことにしました。

全編英語だったのですが、日本語に訳してくださっている方がいらっしゃいましたのでそちらを参考に進めてみました。

CocosCreator の公式チュートリアルを翻訳してみた
(https://qiita.com/hirodragon/items/aa73490b52ec4ca7f5ec)

ここで様々な基礎知識を学びました。
「ノード」という概念、画像の取り込み方、キーボードの入力との紐づけ方…
特に驚いたのが、このソフトウェア、
何かしら設定したい数値の中身を0でも何でもコードエディタで一度設定したら、
以降はCocosCreator側でサクっと変更できるようになっています。
例えばあるキャラクターをジャンプさせるとして、
ジャンプの高さを30、次のジャンプとの間隔を0.3と設定してコードを書いて読み込んでおけば、
CocosCreatorでボタンをポチポチすれば高さを50、間隔を0.7にすることが可能なわけです。
いちいちコードエディタで開き直して変更箇所見つけて書き換えて保存して読み込ませて…という手間がいりません。

そんなこんなでピョンピョンとモンスターが動き回って星を集めるゲームができました。

が、本番はこれからなわけです。
まだ自分のゲームを作ったわけではありません。
チュートリアルですからね。

まずどんなゲームにするかまだ決まってないのです。
一応、テーマを「春」にしてはどうか、という提案をある方からいただいたので、
春らしい何かにしてみようとは思っています。

引き続き生暖かい目で見ていただけたら幸いです。

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

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


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

いよいよこの記事も今回が最後になります。
今回は前回からゲーム完成までを解説していきます。

以下の手順で行います。
①スコアの導入
②敵キャラクターの追加・スコアによる生成変更
③ステージ変更・ゲームクリア画面の導入

【解説】
①スコアの導入
以下のように行います。

まずはスコアを表示するラベルをレイヤに作成します。
文字列で「”Score:”」を指定することによって画面に表示されます。
フォント(ここではArial)や位置を調節してレイヤに加えて完成です。
(今後呼び出される変数_scoreLavelにラベルを代入するのを忘れずに!)

先ほどの変数を切り替える関数を作成します。(上記のラベルはゲーム開始時に表示されるものでこちらは1秒ごとに変化するスコアを反映するものです)
この関数では”Score:”の後に変数_scoreTimesで更新された値が表示されます。

次に変数_scoreTimesの値を変更する関数を作ります。
これは1秒ごとに値が1増える変数_score(ちなみにこの変数はvar game の親クラスで宣言して0で初期化しておいてください)と40をかけた数に変更されます。
(なぜ40をかけるかというと250秒でゲームクリアのため、この処理を行うと最終スコアが10000になるからです)

次に先ほどの変数_scoreの値(最初は初期化されているため0)が1ずつ増えていく関数を作成します。
これは特に難しい処理ではないため割愛します。

そしてscheduleで引数を1にして1秒ずつ呼び出します。
(更新するための関数はすべてupdataで呼び出してください。)

これでスコアが自動で更新され画面へ反映されるようになりました。

② 敵キャラクターの追加・スコアによる生成変更
以下のように行います。

敵キャラクターの挙動についてはこれまでの記事やこの画像を参考に各自で作成してください!

この処理は①で作成したスコアをもとに生成される敵の種類を変更しています。
if文でまとめて分岐するようになっています。
({}の中ではunscheduleを使ってscheduleによる自動生成を止めています)

③ステージ変更・ゲームクリア画面の導入
以下のように行います。

この2つについてはゲームオーバーの処理を流用しています。
ネクストステージは敵の生成が変化するたびに実行してプレイヤーに知らせているためリスタートなどは削っています。

実行処理の例はこんな感じです!

以上でこのシューティングゲーム作成に関しての記事は終了です。
至らぬところばかりですが最後までお付き合いいただきありがとうございました。
自分の未熟さによって実装できずに終わった要素が多く悔しい思いはありますが、1つのゲームを完成させた達成感を得ることができました!
今後もゲーム制作を続けていく中で今度こそ悔いが残らないゲーム制作を行えるように日々精進していきたいと思います!

このゲーム制作では下記のサイトを参考にさせて頂きました!誠にありがとうございました。
https://creive.me/archives/9788/ けいしゃけ 様
素材をいただいたサイト様
https://www.irasutoya.com/
https://www.ac-illust.com/

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

C言語しか知らない大学生がCocos2d-xでゲーム作ってみたいpart2

皆様こんにちは。インターン生の百目鬼(どうめき)です。

前回はインストール作業だけで終わってしまいました。
今回こそはしっかりインストール作業を終えてゲーム制作に着手!

…したかったんですけどね。
今回もダメでした。

まず、導入の方法が千差万別すぎてどれが自分に合った方法なのかわかりません。
そもそもCocos2d-x自体がかなり頻繁にアップデートされているらしい上に、
色んな導入例を見てみると3年前の記事だったり、Windowsのバージョンが全然違ったりでメチャクチャです。

かろうじて自分の探していたCocos2d-x(js)のWindowsへの導入例が見つかったので参考にしてみました。
Windows で cocos2d-x 3.16 のインストール
(https://www.kunihikokaneko.com/dblab/toolchain/cocos2dx.html)

が、使わなければならないソフトウェア「VisualStudio」のバージョンが
自分が持っていたのとは別のものだったのでインストールしなきゃならなかったり、
さらに2つ3つ新しくソフトウェアをダウンロードしなきゃならなかったり、
またそれが結構な容量を食うもので空き容量の確保に忙しかったり、
いざ指示通りにやってみたら全くうまくいかなかったり…

なので今度は別の導入例を参考にしました。
Cocos2d js セットアップ for windows
(https://www.slideshare.net/mogiken1/cocos2d-js-for-windows)

すると、今度はすんなりとHello,worldを表示させることができました。
が、今度は素人目にはどうやって開発していったら全くわかりません。
特に、編集すべきファイルの種類も場所も全くわかりません…

ここは知らずのうちに張っていた見栄を捨て、便利な開発ツールを使う事にします。
そこで見つけたのがCocos2d-x公式サイトにある「CocosCreator」。
画面の様子がリアルタイムでわかり、編集も直感的に行えるのでとても作りやすいでしょう。
言語が英語と中国語のみなのが不便ですが、そこは翻訳サイトとかで何とかできるでしょう。

公式サイトにそんな便利そうなものがあるならなぜそれを最初から使わなかったのかというと、
このCocosCreatorには少しばかりの問題があるからです。

[Cocos2d-x] Cocos Creatorとは:開発ツールのまとめ
(http://site.oukasei.com/?p=1387)
こちらの記事によると、「CocosCreatorは厳密にはCocos2d-xではない」というのです。

このCocosCreator、元々は「fireball」という名前の別のツールだったそうで。
それがCocos2d-xの開発プロジェクトに取り込まれ、Cocos2d-xやCocos2d-jsのエッセンスが盛り込まれた結果、
CocosCreatorとして生まれ変わったそうです。
そんな経緯があったためか、Cocos2d-xと同じような機能でも使われている単語が全く違ったり、
Cocos2d-xで使用できる機能を使用できない、また逆にCocosCreatorのみで使用できる機能があるなど、
例えCocos2d-xで指を慣らしていたとしても、CocosCreatorはイチから覚え直さなくてはならない、というレベルで差異があるそうです。

ちなみに、かつては「CocosStudio」という別の公式開発ツールがあったそうです。
これはCocos2d-xをそのまま開発できるようになっているらしいです。
が、CocosCreatorが開発されたことで、それに置き換えられたようです。

さて、先ほど「CocosCreatorには”少しばかり”問題がある」、と言いました。
なぜ”少しばかり”なのかというと、それは、ゲームを作れるなら何だっていいからです。
使えそうなものはありがたく使うことにします。
CocosCreatorがCocos2d-xを元に作られたのなら、タイトルもかろうじて嘘にはならないでしょうし。
もしこのCocosCreatorもダメだと感じたら、次はUnityすらも検討に入れます。その時はタイトルも変わると思います。

前途多難にも程があると自分でも思いますが、引き続き生暖かい目で見ていただけたら幸いです。

以上、ノートPCにお茶をこぼし一瞬内蔵SSDの接続が切れて肝を冷やした百目鬼がお送りしました。

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

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

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

今回もシューティングゲームの作成を行っていきたいと思いますが、残念なお知らせがあります。
この度、企画していたシューティングゲームですが、弾幕ゲームのようなものに変えたいと思います。
理由としては、私のJavaScript及びCocos2dへの知識・経験不足によって技術的な問題が生じ、インターン期間内に解決できないと考えたからです。
解決できなかった問題は、弾と敵キャラクターとの間の衝突判定を設定することができなかったというものです。
この度は誠に申し訳ありませんでした。

気を取り直して、今回から弾幕ゲームを作成していきたいと思います。
今回までに行ってきた制作は弾の発射以外はすべて再利用します。

簡単な想像図としては、操作キャラクターめがけて飛んでくる敵キャラクターをタップによる左右への移動で避け続けるというものです。
これだけでは退屈なのでスコアなどによって生成される敵キャラクターの傾向が変わるなどの要素を追加したいと思います。

今回は、敵キャラクターを避けるための移動の機能を作ります。

以下の手順で行います。
①操作キャラクターの移動速度に使う変数を宣言
②プレイヤーの移動を反映する関数movePlayerを作成
③プレイヤーの移動方向を逆にする関数changePlayerDirectionを作成
④movePlayerをupdataに書く
⑤changePlayerDirectionをタッチ操作処理に書く

【解説】
①そのままのため割愛します
②プレイヤーの移動を反映する関数movePlayerを作成③プレイヤーの移動方向を逆にする関数changePlayerDirectionを作成
以下のように書きます。(移動速度に使う変数はvar gameの初めの方に書いてください。下のコードでは「_dx」と設定)

まずは、getPositionで操作キャラクター_playerのX座標を読み取ります。
次に、読み取ったX座標を先ほど操作キャラクターの移動速度として宣言した変数_dxと足して新しい変数newXに代入します。
そして、画面サイズを読み取りちょうど画面からプレイヤーが見えなくなるくらいでchangePlayerDirectionで反転するように設定します。
changePlayerDirectionについては_dxに入っている値の正負を入れ替え逆に移動するようにします。

④これもそのままなので割愛します。
⑤changePlayerDirectionをタッチ操作処理に書く

以下のように書きます。

前回までにコーディングしたタッチ処理の動作する部分のみを書き換えるだけです。
弾の発射を操作キャラクターの移動方向変更に書き換えます。

今回は以上です。

次回はスコアの追加、敵キャラクターの種類の追加、クリア画面の追加を行いたいと思います。
次回で最後ですがなんとか完成するようにベストを尽くしたいと思います。

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

C言語しか知らない大学生がCocos2d-xでゲーム作ってみたいpart1

皆様初めまして。インターン生の百目鬼(どうめき)と申します。

皆様はゲーム、特にスマートフォン向けのゲームなどで遊ばれたりしますか?
私はよく遊んでおります。最近は今まで遊んでいた家庭用据え置き機・携帯機のゲームを差し置いてこちらを遊んでいるくらいです。

で、そんなスマートフォン向けのゲームを、
簡単ではないけど誰でも作ることができる、良いモノがあるんです。
        
それが、「Cocos2d-x」というものです。
PCにダウンロードして使います。

こちらオープンソース、つまり無料で誰でも利用できます。
非営利の個人から商用利用の方まで誰でも全ての機能を無料で利用できます。
自宅のPCにダウンロードすれば誰でも入門できます。
主にMacとWindowsで利用できます。
Linuxでもいくつか手順を踏めば利用できます。

iOS、AndroidといったスマートフォンのOSのゲームのほか、
Mac、Windows、LinuxといったPCのOSのゲームも製作できます。

開発する際、言語にC++とLuaとJavaScriptの3つから選択できます。
この3つ、その中でも特にC++は広く用いられているプログラミング言語で、
既にある程度のプログラムを書ける方も多いと思いますので、それもプラスに働くと思います。
また、JavaScriptを選ぶと、ブラウザ上で動くゲームも作ることができるようになります。

Cocos2d-xで開発したゲームは非常に動作が軽く、
性能が良くないマシンでも軽快に動作するなど、細かいけどありがたい特徴もあります。

さて、ここまで長々と、そして自慢げに解説を述べてきました。
さぞ色々経験された方なのだろう、なんて思っていただけたかもしれません。

ハイ、そうです。タイトルの通りです。
私、このCocos2d-xというもの、使ったことがありません。

そもそもゲーム作ったことがほとんどありません。
大学の講義でチームを組んで作ったことはありますが、
出来合いの素材を持ってきて、とある超わかりやすいゲーム制作アプリケーションで組み合わせただけです。
プログラミング的な事は一切やっていません。
かといって他に本格的な事してきたかというと、講義でC言語学んできただけです。

なので、「もしC言語を学んだだけの大学生が、Cocos2d-xでゲームを作ってみたら」
というていでこれから色々やっていこうと思っています。
JavaScriptで、スマートフォン向けのゲームを作ろうと思います。

インストールするのに手間取って何もできてませんが、
とりあえずは「Hello,world!」から始めてみようと思います。

生暖かい目で推移を見ていただけたらと思います。

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

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

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

今回は、いよいよシューティングゲームの肝となる弾の発射についての処理を作っていきたいと思います。

今回のシューティングゲームの弾は花火師が操作キャラクターということで花火玉を使用します。
プレイヤーのタップで弾が発射されるようにする必要があるので新しい処理を行います。

以下の手順で行います。
①花火玉の画像をフリーサイトからダウンロードする
②画像をスプライトにしてアクションを設定する
以下のように書きます。

【解説】
まずは、いつものように画面サイズをcc.director.getWinsize()で取得し(弾の発射場所の指定に試用します)、cc.Sprite.create()で画像のスプライトを作ります。
次に、弾が操作キャラクターの前方から発射されるように位置を指定したいため、操作キャラクターの現在の座標を取得します。
この際、x座標はそのままで構いませんがy座標は操作キャラクターの座標の少し前に設定します。(ここでは操作キャラクターの前方30ピクセルに設定しています)
表示する座標を全く同じにすると画像が重なってしまい不格好になってしまうからです。
これで弾の表示までは完成しました。
しかし、このゲームはシューティングゲームなので弾が前方に飛んでいくように設定します。
前回の敵キャラクターの自動生成・移動のように指定した座標へ飛んでいくようにします。

③プレイヤーがタッチする度に弾が発射されるようにする
以下のように書きます。

【解説】
これが今回から登場したタッチ処理です。
このコーディングでは、プレイヤーが画面のどこかをタッチ(もしくはクリック)した際に、先ほどの弾の発射処理関数を呼び出す処理です。
まず、_playerを格納する変数selfを定義します。
そして、cc.EventManager.addListener()によってタッチ処理EventListenerを作成します。
TOUCH_ONE_BY_ONはシングルタッチの読み込み、swallowTouches()はタッチ処理が発生するシーンを現在のシーンに限定することを示しています。
onTouchBegan内に先ほど処理を書いてtrueを解すように設定すれば完成です!

このコーディングを反映させるとこんな感じです!

次回は弾と敵キャラクターの間に衝突判定を作り、互いに衝突したら自壊する処理を作りたいと思います!

画像はこちらのフリーサイトからいただきました!
https://www.ac-illust.com 弾の画像 作者 minokikaku 様

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

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

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

今回は衝突判定とゲームオーバー画面の表示を作っていきたいと思います!

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

まずは衝突判定です。
現在のゲームには、前回までに作成した操作キャラクターと敵キャラクターが画面上に存在するため、この2つが接触した際の判定を作っていきます。

以下の手順で行います。
①操作キャラクターのスプライトに操作判定を付与する
②敵キャラクターのスプライトにも操作判定を付与して、2つが重なった場合の処理を書く。
以下のように書きます。(var game内のupdate:functin()に追加します。)

【解説】
まず、スプライトの大きさと同等の矩形(すべての角が直角の四角形(正方形、長方形)の図形)を返すgetBoundingBox()で操作キャラクターを読み込みます。
同様に敵キャラクターも読み込みます。(敵キャラクターは配列で何体も生成されるため繰り返し文Forを用いて判定を付けます)
rectIntersectsRect()で2つの矩形が重なった場合の処理を書きます。(現在はthis.gameOverが入っていますが後で解説します。)
これで操作キャラクターと敵キャラクターの衝突判定が完成しました!

次にゲームオーバー画面の表示です。
操作キャラクターが敵キャラクターと重なった瞬間にゲームオーバー画面が表示されて一切の操作が不能になり、リスタートが選べるといった画面・処理を作ります。

以下の手順で行います。
①var game 内にgameOver:function()を作成する。
②getWinSizeで画面のサイズを取得する
③表示したい文字や文字のフォント、大きさ、色などを指定する
④restartボタンをゲームオーバーの文字の下に表示するように設定する
⑤restartとstopAllenemiesを作成する

以下のように書きます。

①と②は今までやってきた処理と同じなため割愛します。

③表示したい文字や文字のフォント、大きさ、色などを指定する

【解説】
cc.LabelTTF.create()で文字を表示させフォントなどを整えます。
取得した画面サイズをもとに位置を調整します。
addChildの2つ目の引数は2にします。(今後のゲーム作成で1を使うため。この引数が意味しているのはゲームのz軸の奥行で背景などは0にある。)

④restartボタンをゲームオーバーの文字の下に表示するように設定する

【解説】
cc.MenuItemFont()でリスタートボタンを設定します。(restartと結びつけておくことを忘れずに)
ゲームオーバーと同様に位置など調整します。

⑤restartとstopAllenemiesを作成する

restart
【解説】
_enemiesの中を空にしてゲーム(gameScene)をrunSceneで読み込みなおしています。

stopAllenemies
【解説】
特に難しい処理ではなく、読み込まれている敵キャラクター_enemiesのアクションをすべて停止させる処理です。
これによって画面が止まったようにプレイヤーに感じさせます。

今回は以上です!
次回は弾の発射と弾と敵の衝突判定を作りたいと思います!

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

第6回webのひみつ(cssでのアニメーション)

皆さんこんにちは。
インターン生の明瀨と申します。

今回はCSSのアニメーションについてまとめていきたいと思います。

まず、CSSは2011年6月にCSSアニメーションに対応しました。
このCSSアニメーションは、この月にfirefox5が対応したことがきっかけにグーグルや、Safari、iosなどなど次々に書くブラウザがCSSに対応していったそうです。
このCSSのメリット、デメリットについてに触れていきたいと思います。
(メリット)
<引用始め>
・ほとんどのスマホがCSSアニメーションに対応しているので、モバイル・デザインにも活用できる
・初心者にとってJavaScriptに比べると分かり易いコード
・動作がスムーズ
<引用終わり>
<引用URL>
https://blog.codecamp.jp/css_animation
(デメリット)
・jQueryなどの利用に比べると、コード量が増える
・アニメーション要素(プロパティ)が限定的

以上が上記のメリット、デメリットとなっています。
次に、CSSアニメーションの基本的な書き方を書いていきたいと思います。
よく見られる書き方の手順は、
.name{
animation: animationname 5s ease-out infinite;
}
@keyframes animationname
{
0% {}
100% {}
}
このような書き方がよく見られます。
この書き方は、
まず上の.nameはhtmlで指定した
div class=”1″
の部分で1で指定した部分がcssの.nameの部分となっています。

これを間違えるとまず動作しないので気を付けてください。
その次にanimation:の中にある、animationnameがこのキーフレーム名となっています。その次にしてされている5sはアニメーションの時間を指定しています。こちらは、指定した時間にかけてアニメーションを行っており、5sの場合だと5秒間をかけてアニメーションを再生するといった解釈となります。
次のease-outはイージングを示しており、動き方について示しています。例を挙げるとeaseInExpoといったものやlinearと呼ばれるものがあり、一つめに述べたものは段々と早くなるようなアニメーションを制作できるようになります。

次に@keyframesに関して説明をしていきたいと思います。
こちらは基本from,toを使用してアニメーションの移行方法を示しています。
しかし上記に示している方法は0%,100%と表記しています、これを応用することで75%を間に差し込んだりできます。
他にも色々なものがあるので、是非調べてみて下さい。
今回はこの辺で終わりたいと思います。
次回は、divなどのhtmlで指定したclassをcssで指定する方法を詳しく述べていませんでしたので、次回書いていきたいと思います。

(参考URL)

https://blog.codecamp.jp/css_animation

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

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

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

今回は敵キャラクターの設定を作っていきたいと思いますが、その前に前回説明し忘れた「preloqd」について説明します。

「preload」とは、HTMLが読み込まれた時にあらかじめ画像などのresourceを読み込んでおいてくれる処理です。
つまり、画像などを一気に読み込んだうえでHTMLが起動するということです。
例)Webサイトに添付された画像、Flashなど
Webサイトのような静的なものの場合は画像の読み込みに待ち時間が発生しても構いませんが、ゲームのような動的なものの場合は操作やゲーム性から考えて死活問題です!
(いきなり敵キャラが操作キャラの前に表示されて被弾、ゲームオーバーなんてことになったらもう二度とプレイされなくなってしまうでしょう…)

実装はこのようになっています。

作成中のゲームはgamesceneを読み込むmain.jsファイルからpreloadしています。
とても大切な処理なのでお忘れなく!

では、いよいよ今回のメインである敵キャラクターの設定について解説します!

まずは敵キャラクターの設定です。
以下の手順で行います。
①画像の収集(加工も行います)
②resorce.jsの編集
以下のように書きます。

【解説】
ただ単にres配列に画像を追加しただけです。
弾の画像も前もって入れてあります。

③敵キャラクターが自動で生成され自壊する処理のプログラム
以下のように書きます。

【解説】
敵キャラクター生成関数spornEnemyを作成しその中にコーディングをしていきます。
まずは、cc.Sprite.createで敵キャラクターの画像を読み込みます。
次に、敵キャラクターを生成したいエリア(今回はシューティングゲームなので画面最上部から生成)を決めます。
敵キャラクターを生成する座標X,Yの変数を作り、座標XにMath.randumと画面横幅の最大値をかけ合わせた数値、座標Yに画面縦幅の最大値の数値をそれぞれ代入することで
画面上部からランダムな位置で出現するようになります。
これだけでは、移動してくれないので敵キャラクターに移動アクションを付与します。
ここで使うのがcc.MoveByで引数(メソッドのあとの()の中に記述されているもの)を指定することで画像などの位置を動かすアニメーションを作成できます。
ここでは2~4秒で画面端まで移動するようになっています。
移動した後に自壊するようにremoveで指定して、sequenceで連続させてアクションを行わせています。

以下のような結果になりました!

app.jsのvar gameにscheduleを追加して1秒ごとの処理にするのもお忘れなく!

今回は以上です!
次回は衝突判定を作成していきたいと思います!

画像はこちらのフリーサイトからいただきました!
https://www.irasutoya.com 敵キャラクターの画像

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

初心者が征く!オリジナルゲーム作成道 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ファイルを読み込みという意味です)

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