freedom-man.com

ブログは俺のセーブポイント

Tag: Cocos2d-x

Cocos2d-JSを触ってみた【BGM再生・キー入力・アニメーション・衝突判定】

今回もCocos2d-JSを色々と弄ってみます。

1. BGM再生

いつも通りresディレクトリ内に音声ファイルをぶちこんで、src/resource.jsを修正します。

あとはsrc/app.jsのLayerのctorに以下のコードを追記するだけで音楽が再生されます。

ちなみに、効果音再生は

って感じで行けます。

2. キー入力受付け

以下のようにcc.eventManagerにキーボード入力に対するイベントリスナーを追加するだけ。

あとは各キーコードに応じた処理をfunction内で定義すればOK。

3. アニメーション

RPGの歩行アニメーション的な永続的なアニメーションの場合は以下のようにして処理を書きます。

画像一枚32px * 32pxで横3縦4で配置されるキャラチップ画像を想定しています。

永続的なアニメーションなので、ループする画像のパターンを定義する必要があって

それがspritesの配列部分になります。

1→2→3→2→1→2→…と続くので1→2→3→2のループを定義しています。

キー入力とうまく組み合わせて、キャラの方向を検知して

アニメーションパターンを都度runActionで変更してあげればRPGっぽいキャラ移動が出来るようになります。

4. 衝突判定

前回やったタイルマップを使えば衝突判定を簡単に実装できます。

“レイヤー>タイル・レイヤーの追加”からレイヤーを追加します。

レイヤーの名前はcollisionとかにしてください。

collisionレイヤーの衝突判定を付けたいところに適当なタイルセットで塗っていきます。

わかりやすくするために黒とかの単色タイルセットを作って塗っていくと

後で衝突設定した場所がわかりやすいです。

cocos2djs-tmx-collision2

塗り終わったらレイヤーの透過度を0にします。

cocos2djs-tmx-collision1

src/app.jsで以下のようにして衝突判定を設定したセルを判定することができます。

確認したところではPointで設定する値は左下基準でしたが、もしかしたら設定で変えれるのかも。

 

Cocos2d-JSを触ってみた【画像表示・タイルマップ表示編】

前回は環境構築を行ったので今回は画像を表示したり、タイルマップを表示したりしてみます。

1. ディレクトリ構成

プロジェクトを作成すると、こんな感じでファイル展開されます。

CMakeLists.txt→ビルドの設定ファイル

frameworks, tools→Cocos2d-JSのAPIとかそういうのが格納されてるディレクトリ

res→リソース(画像とか音声ファイルとか)を格納するディレクトリ

src→プログラムのソースコードが格納されているディレクトリ

index.html→ゲームのHTMLファイル

project.json→ゲームのエンジンとかフレームレートとかの設定を行うJSONファイル

main.js→index.htmlから呼び出されるJSファイル。このJSファイルを起点にゲームが開始される。

 

ということで、基本的にはresディレクトリの中にリソースファイルを追加したり

src内でJavaScriptのソースコード書いたりするのが開発の基本的な流れになります。

2. 画像の表示

実際に画像を表示してみます!

まずは適当な画像を入手します。

今回はRPG的なモノを意識して↓からキャラチップ画像をダウンロードさせていただきました!

RPGツクール素材支部|臼井の会

用意した画像(今回はactor.png)をresディレクトリに格納します。

res/resource.jsに用意した画像のファイル名を追記します。

画像の設定が完了したので、画像を表示するコードをsrc/app.jsに書きます。

ルートディレクトリのmain.jsは以下のように書き換えます。

index.htmlを叩くと、インクルードされているmain.jsが呼び出され

main.jsでは全体的なビューを設定して、リソースを読み込んだ後に

コールバックでDirectorがSceneを起動しています。

Sceneを起動するとLayerを自動的に生成して、自分自身のSceneにLayerを載せます。

Layerが生成された時に画像等のリソース配置が行われてゲームが開始される、といった流れです。

 

画像の表示にはcc.Spriteを使い、画像や表示位置の設定をした後、Layerに載せます。

これで、スライム君が真ん中に配置されるシュールな画面が表示されます。

cocos2djs-splite-sample

3. タイルマップを表示する。

さらにRPGっぽくするために、タイルマップを表示してみます。

タイルマップとは2D RPGとかによくある特定のタイルを組み合わせて出来たマップのことです。

某RPGツクールウディタ等のRPG作成ツールにはタイルマップエディタが付いていたりします。

 

Cocos2d-x, Cocos2d-jsには自体にはタイルマップエディタはついていませんが、

タイルマップ形式のtmxファイルに対応しているので

今回は、フリーのタイルマップエディタであるTiled Map Editorを使ってタイルマップを作ってみます。

Tiled Map Editorを起動して、メニューバーの”ファイル>新しいファイル”でマップを作成します。

マップの設定は以下の通り。

cocos2d-js-tiled-newmap

“マップ>新しいタイルセット”からタイルセットを追加します。

cocos2d-js-tiled-tileset

タイルセットとはタイルのベースとなる矩形の画像を並べたファイルになります。

{Tiledのインストールディレクトリ}/examples/tmw_desert_spacing.pngを

resディレクトリ内にコピーして、コピー先のファイルを選択してください。

あとは追加したタイルマップでタイル塗りしていけばOK。

 

詳細な機能・操作に関しては以下のサイトが詳しいです。

Tiled Map Editor を Cocos2d-html5 と使用する方法 | Tizen Developers

Introduction to Tiled Map Editor: A Great, Platform-Agnostic Tool for Making Level Maps – Tuts+ Game Development Tutorial

TiledMapEditorの使い方 | 2dgames.jp

 

TiledMapEditorで生成されたtmxファイルは画像などのリソースのパスが

作成時の相対パスになるので、実際に配置するresディレクトリとリソースのパスの

整合性が取れるように適宜修正してください。

tmxファイルは以下のような普通のXMLファイルでimageタグのsourceのパスを調整する感じです。

今回はtmxファイルとタイルマップ画像ファイルが同一階層になります。

tmxファイルを作成したらタイルマップ作成に使用した画像とともにresディレクトリに配置します。

resource.jsも追記します。

res/app.jsを書き換えます。

このまま表示すると、何故か黒い枠線が表示されてしまします。

cocos2djs-sample

以下のように色々とワークアラウンドがあるみたいです。

cc.TMXTiledMap – フニゲの開発日記

Problem with load TMXTiledMap in cocos2d-html5, help me please! – cocos2d-x – Cocos2d-x Forum

 

ということで、今回は画像表示メインでやってみました。

次回はBGMや画像のアニメーション、キー入力に対応させてみます!

Cocos2d-JSを触ってみた【環境構築編】

Cocos2d-xというクロスプラットフォームなゲーム開発が可能な

フレームワークがあるということで色々と触ってみました。

 

プロダクトとしてCocos2d-xとCocos2d-JSの2つありますが、

C++, Luaで書けるのがCocos2d-x

JavaScriptで書けるのがCocos2d-JS

という棲み分けになります。

 

どの実行環境向けにコンパイルできるかにも違いが有り、

Webゲームを作りたい場合はCocos2d-JSを選択することになります。

 

今回はみんな大好きJavaScriptで書けるCocos2d-JSで

環境構築+プロジェクト作成+コンパイルまでやってみます!

実行環境はWindows7です。

 

今回の参考URLはこちら↓

Cocos2d-JSを動かすまでの手順 | ゆめみ スタッフブログ -ゆめログ-

Cocos2d-x / Cocos2d-JS のインストール〜起動まで – Qiita

cocos2d-x – Cocos2d-JS を触ってみた – Qiita

1. 環境構築

公式サイトからCocos2d-JSの最新版(現在v3.2)をダウンロードします。

Cocos2d-x-download

ダウンロードしたら展開して、適当なフォルダに展開します。

 

Python 2.7も必要なのでこちらもインストールします。

Windowsの場合は本家から2系の方をダウンロードして実行して適当に場所にインストール。

python-home

インストール後はPythonのインストールディレクトリにパスを通しておきます。

 

Cocos2d-JSの実行スクリプトにもパスを通す必要があるので

<Cocos2d-JSをインストールしたPATH>\tools\cocos2d-console\binを環境変数PATHに追加します。

 

また、プログラムのコンパイルを行う為にCocos2d-JSの設定をする必要があります。

を実行すると対話式で設定をすることが出来ます。

 

Androidのコンパイルをする場合はNDKとAndroid SDKのルートディレクトリをそれぞれ指定します。

コンパイルする場合(Web版だとリリースバージョン作る場合)は

antのルートディレクトリを指定する必要があります。つまり、コンパイルする場合はantも必須です。

 

これで環境構築が完了しました!

と叩いて、コマンドが動かない場合はPythonやCocos2d-JSへのPATHが通ってない可能性が高いです。

2. プロジェクト作成

cocosコマンドで新しいプロジェクトを作成することができます。

作成するとこんな感じでファイルが作成されます。

cocos2d-js-project

Cocos Code IDEを使うとGUIでプロジェクトを作成できます。

cocos2d-js-codeide

プロジェクト作成時点でゲーム開発/実行に必要なものは全て揃っているので

このままディレクトリごとWebにアップロードすればサンプルプログラムが動きます。

DropboxでもOK。

適当なWebサーバがない場合は以下のコマンドを叩いて

pythonのWebサーバで動かすことが可能です。

3. コンパイル

Web版は上記の方法でも動くには動きますが

容量削減とトラフィック等々考えるとミニファイした方が良いです。

以下のコマンドでWeb版のコンパイル(ミニファイ)が出来ます。

Android版を作成する場合は以下のコマンドで

 

Web版の場合はpublish/html5ディレクトリの中にコンパイル後のファイル一式が入っているので

こちらを任意のWebサーバにディレクトリごとデプロイします。

その他

Cocos2d-JSやPythonをインストールしたりPATHを通したり色々やってますが

Cocosコマンド動かす(=プロジェクト作成とコンパイル)ための作業になります。

一回プロジェクトのフレームを作ってしまえば後はJavaScriptで書いていくだけなので

コンパイルしないでプロトタイプ的に作成するのであれば、環境構築自体不要です。

githubにそのフレームの部分を上げたので、設定が面倒な方は

でフレームをgitで取得して、JSファイルを弄るだけでゲーム開発ができます。

© 2017 freedom-man.com

Theme by Anders NorenUp ↑