前回は、androidの広告表示についてのお話でした。
今回は、cocos2d-htmlによる「Spriteの生成」をご紹介します。
cocos2d-htmlの基本構造は、2013/10/16の記事で紹介させていただきました。
その中でも比較的多く使用される「Sprite」にスポットを当て、使い方を簡単に説明していきたいと思います。
cocos2d-htmlのライブラリには多くのアクションが用意されており、それらのアクションを組み合わせることによって様々なアニメーションを表現し、ゲーム等を作成していきます。
当記事で使用するProjectは、ダウンロードしてきた「 cocos2d-html 」を解凍したときにデフォルトで入っている
「 HelloHTML5World 」とします。
それではさっそくSpriteを使っていきましょう。
「 HelloHTML5World 」⇒「 src 」と進み、「 myApp.js 」(※以後、ソースと記載）をテキストエディタで開きます。
Spriteに設定する為の適当な画像を用意し「 res 」フォルダ ( “HelloHTML5World/res” ) の中に置きます。
※このような画像を用意しました。 ファイル名：circle.jpg
Spriteに使用する画像の用意が終わったら、下記のようにソースを編集します。
※画像のファイルパスには ” res/画像ファイル名 “と指定します。
次に、HelloHTML5Worldフォルダにある「 index.html 」をブラウザで開きます。
すると先ほど、追加したSpriteが表示されているのがわかります。
追記した１行目の” cc.Sprite.create() ” によってSpriteを生成し
２行目の” this.addChild( circle, 1 ) ” によってSpriteをLayerに追加しています。
addChild()内の circle 部分は宣言した変数名により異なります。
第２引数の” 1 “は Z座標を指定しています。
※Z座標とは奥行きです。 SpriteやLayerは重ねることができるのでZ座標の数値の高いほうが手前に表示されるようになっています。
画像の１/４しか表示されていない理由は
cocos2d-htmlの原点( 0, 0 )が左下で、Spriteの座標の基準(アンカーポイント)が中心
ということです。
先ほど追加した処理には、Spriteを配置する座標を決めるようなものは含まれていないので、デフォルトの座標でSpriteが配置されたということになります。
任意の場所にSpriteを配置させる場合には下記のように処理を追加します。
処理を追加後、ブラウザで index.html を開きます。
Spriteの配置位置が変わっているのが見てわかると思います。
Spriteの基本的な生成方法としては以上となりその都度、使用する状況にあわせた処理を追加設定していくような流れになります。
以下に簡単な処理をいくつか記載します。
setColor( new cc.Color3B( R, G, B ))
RBG値をそれぞれ指定してSpriteの色を変更。 ※画像では( 255, 0, 0 )に設定しています。
setScale( x )
Spriteの倍率を変更。 xには整数が入り、「 1.0 」が等倍になります。 ※画像では2.0に設定しているため元画像の２倍のサイズになっています。
setOpacity( x )
Spriteの不透明度を変更。 xには0～255の数字が入り、255に近づくほど不透明になる。 ※画像では128に設定しているため透過度50％になっています。
この他にも、まだまだたくさんの関数が用意されているのでリファレンスを参照してみてください。