2015-03-01

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

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

1. ディレクトリ構成

プロジェクトを作成すると、こんな感じでファイル展開されます。 ``` CMakeLists.txt frameworks index.html main.js project.json res src tools ``` 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に用意した画像のファイル名を追記します。

var res = {
    actor_png : "res/actor.png"
};

var g_resources = [];
for (var i in res) {
    g_resources.push(res[i]);
}

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

var HelloWorldLayer = cc.Layer.extend({
    sprite:null,
    ctor:function () {
        this._super();
        
        //画面サイズの取得
        var size = cc.winSize;
        //画像の表示
        this.sprite = new cc.Sprite(res.actor_png, cc.rect(0, 0, 32, 32)); //左上から32px*32pxで画像切り出し
        this.sprite.attr({x: size.width/2 , y: size.height/2}); //画像位置の設定
        this.addChild(this.sprite);
    }
});

var HelloWorldScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new HelloWorldLayer();
        this.addChild(layer);
    }
});

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

cc.game.onStart = function(){
    cc.view.adjustViewPort(true);
    cc.view.setDesignResolutionSize(640, 480, cc.ResolutionPolicy.SHOW_ALL);
    cc.view.resizeWithBrowserSize(true);
    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new HelloWorldScene());
    }, this);
};
cc.game.run();

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ファイルとタイルマップ画像ファイルが同一階層になります。

<?xml version="1.0" encoding="UTF-8"?>
<map version="1.0" orientation="orthogonal" renderorder="right-down" width="20" height="15" tilewidth="32" tileheight="32">
 <tileset firstgid="1" name="desert" tilewidth="32" tileheight="32" spacing="1">
  <image source="tmw_desert_spacing.png" trans="00ff00" width="265" height="199"/>
 </tileset>
 <layer name="base" width="20" height="15">
  <data encoding="base64" compression="zlib">
   eJyTZGBgkCICSwOxHBFYEYiViMDKNDJPHgceLO6jtnlqODCt3KcJxFpEYG0izaMV1sOBKTGP2u4b7OZRM/yohQGIzCWv
  </data>
 </layer>
</map>

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

resource.jsも追記します。

var res = {
    actor_png : "res/actor.png",
    tmw_desert_spacing_png : "res/tmw_desert_spacing.png",
    desert_tmx : "res/desert.tmx"
};

var g_resources = [];
for (var i in res) {
    g_resources.push(res[i]);
}

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

//タイルマップを追加
var tiledMap = new cc.TMXTiledMap(res.desert_tmx);
this.addChild(tiledMap);

this.sprite = new cc.Sprite(res.actor_png, cc.rect(0, 0, 32, 32));
this.sprite.attr({x: 32*15 + 16 , y: 32*5 + 16}); // 表示位置を少し調整
this.addChild(this.sprite);

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

cocos2djs-sample

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

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

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

 

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

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

このエントリーをはてなブックマークに追加