Cocos Creatorは、物理エンジンのChipmunkを使用できます。
物理エンジンとは、物体が落下したり衝突したりした時の動きを計算してくれるものです。
アクションゲーム等を作る際に利用出来ます。
Tiledのマップデータから、アクションゲームのステージを作成するには、壁・床・ブロック等がそれぞれ物理的に認識される必要があります。
今回は、Tiledで壁・床・ブロックとしてオブジェクトを配置し、Chipmunkを利用して、これらがプログラム上で物理的に認識されるようにします。
下図はプロジェクトの実行画面です。
タッチした位置に丸い物体が生成されるようにしています。
壁・床・ブロックに対して、跳ねたり、転がったり、留まったりします。
下記に動くデモがあります。
Tiledのオブジェクトのデータの中身を見る!:Cocos Creator
Tiledについては、こちらの記事で基本的なマップの作り方やオブジェクトデータの取得方法について説明しています。
mmorley.hatenablog.com
Tiledでは、下記のオブジェクトを配置出来ます。
四角形 | |
楕円形 | |
ポリゴン | |
ポリライン |
replace()の機能のまとめ!『正規表現、function()、arguments、RegExp()』:JavaScript
『replace()』は、文字列の置換を行う関数です。
基本的な使い方は、下記の通りです。
var text = "abcabc"; var result = text.replace(/a/g, "1"); // "abcabc"内の"a"を最後まで検索して"1"に置換する // 結果:resultは"1bc1bc"になる
『replace()』の第1引数の『/a/g』は、検索する文字列を正規表現で表したものです。
- 正規表現では、検索する文字列を『/(スラッシュ)』で囲みます。
- 末尾の『g』は、最後まで探すというフラグです。
フラグには下表のようなものがあります。フラグ 意味 g 1個目だけでなく最後まで検索します。 i 検索の際に大文字と小文字を区別しません。 m 複数行に渡って検索します。
*また『text.replace("a", "1");』のように通常の文字列で検索すると1個目しか置換されません。var text = "abcabc"; var result = text.replace(/a/, "1"); // resultは"1bcabc"になる(1個目だけ置換) var result = text.replace("a", "1"); // resultは"1bcabc"になる(1個目だけ置換)
正規表現を使う利点は、"文字のパターン"で検索出来ることです。
例えば、『"'abc','de',f"』で'abc'と'de'を1に変えたい場合、『'(シングルコーテーション)で囲まれている文字列』というパターンで検索することで、文字の種類、長さが異なる'abc'と'de'を一度に置換することが出来ます。実際にどうやるかは後述しています。
また、『replace()』の第2引数にコールバック関数を指定すると、見つかった文字ごとに違う処理を行うことが出来ます。
上記の例を含めて『replace()』の様々な使い方をまとめました。
ジョイスティックでキャラクタを動かす!:Cocos Creator
こちらの記事で2Dのキャラクタのアニメーションを作りました。
mmorley.hatenablog.com
↑ではボタンでアニメーションを切り替えていましたが、ゲームらしくするためにジョイスティックでキャラクタを動かせるようにしてみました。
2Dキャラクタを描く! その4(完):Inkscape
こちらの記事の続きです。
2Dゲームで使うキャラクタの絵を描いています。
mmorley.hatenablog.com
前回で、それらしく出来たので、パーツごとに分けて、『Cocos Creator』で動かしたいと思います。
2Dキャラクタを描く! その3:Inkscape
こちらの記事の続きです。
2Dゲームで使うキャラクタの絵を描いています。
mmorley.hatenablog.com
前回は全てのパスに色を設定し、線画の線幅を調整しました。
これで良いかなという気もしますが、今回はこれに影とハイライトを付けます。
2Dキャラクタを描く! その2:Inkscape
こちらの記事の続きです。
2Dゲームで使うキャラクタの絵を描いています。
mmorley.hatenablog.com
下絵をトレースしたパスに色を設定していきます。