IDEとLua言語を使ったサンプルコードと例文集です。スプライトを使用すると、画像ファイルを画面に表示することができます。サンプルコードプロジェクトの新規作成で作成されるGameScene.luaのGameScene.create()を下記のサンプルコードと書き換えます。画像をcharacter.pngのファイル名で作成し、resディレクトリに追加します。実行すると画面にスプライトが表示されます。sceneendcharacter.pngスプライトの例文スプライトを作成するSpriteクラスを使い、スプライトを作成します。画像ファイル名を指定してスプライトを作成します。作成したスプライトはシーンやレイヤーの子として加えることで画面に表示されます。引数のrectでスプライトとして表示する矩形を指定することができます。(空のスプライトを作成します。メソッドに続いてsetTextureメソッドを呼び出してください。rect)スプライトを作成します。rect:描画する矩形シーンやレイヤーに配置するスプライトはシーンやレイヤーに配置するまで表示されません。シーンへの配置はaddChildメソッドを使います。tag)子ノードとして追加します。Zオーダーのデフォルト値は0になります。表示位置を設定するスプライトの表示位置を変えるにはsetPositionメソッドを使います。スプライトを(100.0,100.0)に表示します。メソッド親の座標系での(x,y)にノード位置を設定します。画面中央に表示するスプライトを画面中央に表示するには、cc.Director:getInstance():getVisibleSize()で画面サイズを取得し、スプライトを中央に表示するように座標を指定します。visibleSize.height/2.0)表示位置を取得するスプライトを表示位置を取得するには、getPositionX()、getPositionY()、getPosition()を使います。getPosition()はx,yの2つの値が返ります。pos.xとpos.yでX座標、Y座標がわかります。sprite:getPosition()サイズを取得するスプライトのサイズを取得するには、getContentSize()を使います。下記の例では、size.widthで幅、size.heightで高さがわかります。setScaleY(倍率)を使います。scaleY)setScaleX(scaleX)setScaleY(scaleY)ノードの倍率を設定します。回転するスプライトを回転するにはsetRotation(角度)を使います。角度は時計回りの角度を指定します。メソッドノードの回転角度を設定します。正の数は時計回り、負の数は反時計回りとなります。反転表示するスプライトを反転表示するにはsetFlippedX(true)、setFlippedY(true)を使います。X方向に反転sprite:setFlippedX(true)表示・非表示にするスプライトを表示するにはsetVisible(true)、非表示にするにはsetVisible(false)を使います。sprite:setVisible(true)重なり順を変更するスプライトの重なり順を変更するにはsetGlobalZOrderメソッド、setLocalZOrderメソッドを使います。Zオーダーが大きいほど手前に描画されます。setGlobalZOrderはノードの親子関係に関係なく重なり順を決めます。setLocalZOrderは兄弟ノード同士の重なり順を決めます。sprite:setGlobalZOrder(10)Z座標を変更するスプライトのZ座標を指定するには、setPositionZメソッドを使います。Z座標が大きいほど手前に大きく、小さいほど奥に小さく描画されます。sprite:setPositionZ(1)Spriteクラス:setPositionZ(positionZ)メソッドZ座標を設定します。setGlobalZOrder()も設定されます。透明度を変更するスプライトの透明度を指定するには、setOpacityメソッドを使います。0〜255の範囲内で値を指定します。0で完全に透明、255で不透明になります。透明sprite:setOpacity(0)Nodeクラス:setOpacity(opacity)メソッドノードの透明度を設定します。opacity:透明度スプライトに色を付けるスプライトに色をつけるにはsetColorメソッドを使います。色はcc.c3b(赤,緑,青)を使って指定します。255))Nodeクラス:setColor(color)メソッドノードの色を設定します。color:色アンカーポイントを変更するスプライトのアンカーポイントを変更するにはsetAnchorPoint(x,y)を使います。x,yは0.0〜1.0の値で指定します。1.0)Nodeクラス:setAnchorPoint(x,y)メソッドsetAnchorPoint(anchorPoint)ノードのアンカーポイントを設定します。アンカーポイントはすべての変形や位置決め操作が行われる中心点です。これは親に貼り付ける場所を示すノード内のピンのような物です。アンカーポイントはパーセントのように正規化されています。(0,0)は左下の角を意味し、(1,1)は右上の角を示します。(1,1)以上の値や(0,0)以下の値を使うこともできます。アンカーポイントのデフォルト値は(0.5,0.5)で、ノードの中央を起点とします。anchorPoint:アンカーポイントの座標値2つのスプライト同士が交差しているかどうかを調べる2つのスプライト同士が交差しているかどうかを調べるにはcc.rectIntersectsRect関数を使います。2つの矩形が交差している時にtrueが返ります。スプライトの矩形はgetBoundingBox()メソッドで取得することができます。2つのスプライトsprite1,sprite2を作成しておきます。交差するとresultにtrueが返ります。矩形同士が交差しているかどうかを調べます。交差している場合trueが、そうでない場合falseが返ります。rect2:座標点がスプライト内にあるかを調べる座標点が矩形内にあるかどうかを調べるには、cc.rectContainsPoint関数を使います。座標点がスプライトの矩形ないにあるとresultにtrueが返ります。座標点が矩形内にあるかどうかを調べます。矩形内の場合trueが、そうでない場合falseが返ります。point:スプライトをシーンやレイヤーから削除するスプライトを親シーンや親レイヤー上から削除するには、removeFromParent()メソッドを使います。sprite:removeFromParent()スプライトに名前をつけるスプライトに名前をつけるにはsetNameメソッドを使います。名前をつけるsprite:setName("name1")Nodeクラス:setName(name)メソッドノードを容易に識別できるように名前を設定します。名前からスプライトを探す名前からスプライトを探すには、親レイヤーなどに対してgetChildByName(名前)を使います。layerはスプライトを追加したレイヤーNodeクラス:getChildByName(name)メソッド子ノードを名前で探して取得します。name:ノード名の文字列スプライトにタグ番号を付けるスプライトにタグ番号を付けるにはsetTag(タグ番号)を使います。タグをつけるsprite:setTag(10)Nodeクラス:setTag(tag)メソッドノードを容易に識別できるようにタグを設定します。tag:タグ番号タグ番号からスプライトを探すタグ番号からスプライトを探すには、親レイヤーなどに対してgetChildByTag(タグ番号)を使います。layerはスプライトを追加したレイヤーNodeクラス:getChildByTag(tag)メソッド子ノードをタグ番号で探して取得します。tag:タグ番号スプライトに独自のデータを設定するスプライトのインスタンスに変数を持たせて、そこにデータを格納できます。Luaではコードの途中からでも変数を追加できてしまうので、どこで変数を作成したかわからなくならないように配慮しましょう。コンストラクタで初期値を設定するなどして、変数の使用を明示するとよいでしょう。既存の変数を上書きしないようにも注意してください。"abc"テクスチャからスプライトを作成テクスチャからスプライトを作成するにはcreateWithTextureメソッドを使います。false)テクスチャからスプライトを作成します。rotated:テクスチャが回転しているかどうかスプライトフレームからスプライトを作成スプライトフレームからスプライトを作成createWithSpriteFrame(spriteFrame)を使います。Spriteクラス:createWithSpriteFrame(spriteFrame)メソッドスプライトフレームからスプライトを作成します。spriteFrame:テクスチャと矩形位置・サイズを含むスプライトフレームスプライトでパラパラアニメーションをするスプライトを使ってパラパラアニメーションをするには、主に次の手順で行います。下記のサンプルコードでは256x256サイズの2枚の絵からパラパラアニメーションを行っています。texture.pngは256x256サイズの絵を横に2枚並べて512x256のサイズの画像としています。この後layerをシーンに配置します。スプライトのマスク処理スプライトのマスク処理を行うにはClippingNodeを使います。クリッピングノードを作成し、レイヤーへ追加します。この時setAlphaThreshold(0)を設定しておきます。次にマスク用の画像をスプライトとして作成し、クリッピングノードのステンシルに設定します。マスク用の画像は透明な部分が繰り抜かれます。これでクリッピングノードの準備は終了です。最後に必要な分だけスプライトをクリッピングノードへ追加していきます。下記のサンプルコードはマスク用画像mask.pngを背景を透明色、表示したい部分を塗りつぶした画像を使用しています。サンプルをテストするための画像はQiitaに投稿した画像を使用してください。この後layerをシーンに配置します。マスク用の画像についてマスク用の画像は背景を透明色、表示したい部分を何色でも良いので塗りつぶして作成します。マスクする部分を逆にしたい時マスクして隠す部分と表示する部分を逆にしたいときはclippingNode:setInverted(true)を使います。うまく表示されない時うまく表示されない時は、clippingNode:setAlphaThresholdの設定がされているか、clippingNode:setStencilでマスク画像が指定されているか、クリッピングノードや画像の位置、アンカーポイントがおかしいため表示範囲外にはみ出ていないか、などをチェックしてみてください。