サクッと Cocos2D ゲームを作ろう!(1)SpriteHelperでのテクスチャー処理

みんなで玉入れ!運動会 App
カテゴリ: ゲーム
価格: 無料

みんなで玉入れ!運動会 iPad アプリが、無事に1.0.1バージョンに更新されました。バグ修正、また、メニューにサウンドを追加しました。このアプリは、フレームワークにHome – Kobold2D™ – Kobold2D ,物理エンジンにBox2D | A 2D Physics Engine for Games を使用しています。

そして、レベルエディタとして、LevelHelper、スプライト作成ソフトとして、SpriteHelperを使用しました。これらのツールによって、多くの作業をグラフィカルに行うことが出来るので、プログラマーの作業を大幅に軽減することが出来ます。ちなみに、玉入れアプリは、基本の玉入れの動作はLevelHelper、SpriteHelperの勉強をかねて、5時間ほどで作ることが出来ました。

(そのあと、メニュー、デザイナとの共同作業、スコア表示、ゲームセンター、アプリ内購入などで、あと数日掛かっているんですが…)

LevelHelper App
カテゴリ: 開発ツール
価格: ¥1,600

SpriteHelper App
カテゴリ: 開発ツール
価格: ¥1,100

SpriteHelperには、お試し版の SpriteHelper FREEもありますが、機能制限があるので、実際にゲームを作るときは、通常版が必要かもしれません。
SpriteHelperFree App
カテゴリ: 開発ツール
価格: 無料

それでは、SpriteHelperから始めましょう。

1. 画像の準備

この記事では、iPad版の「みんなで玉入れ!運動会」ゲームをiPhone対応したいと思います。SpriteHelperでは、Retina版の画像を準備すれば、通常版の画像も作成してくれるので、Retina版の画像を準備します。また、Animationも対応していますが、今回は基本的な動作なので、割愛します。

玉入れのかごをはこんな感じの画像を使います。

basket の画像
basket の画像

問題は、この画像だと、かごの中にボールが入った状況を再現出来ない事です。それで、かごの全面だけの画像を、画像処理ソフトで作成します。こんな感じです。
basketの前面画像
basketの前面画像

これで、この画像を上にして、通常のバスケット画像を下に置いて、ボールをその間に置くことによって、バスケットの中にボールが入る様子を再現出来ます。
あとは、ボールの画像、かごのスタンドの画像、下の芝生の画像などをPNGで準備します。私は、VectorStock® | Royalty Free Vector Graphics & Clipart | VectorStock®.com で1ドルで画像を購入したり、Vicki Wenderlich | Free iPhone Art and Artist Tutorials のフリー素材を使ったりしました。こちらは、使用した事を表示することによって使うことが出来ますね。

Sprite Helperでの設定

Sprite Helper アプリを起動して、新規プロジェクトを作成

新規スプライトシート作成
新規スプライトシート作成

準備した画像を取り込む
Import Images で画像を選択、取り込み
Import Images で画像を選択、取り込み

画像が重なり合って表示されるのを確認
取り込んだばかりのときは、画像が重なっている
取り込んだばかりのときは、画像が重なっている

ボールの部分を見ると、一つの画像で、隙間がある状態でボールが取り込まれているのが分かるでしょうか?ここで、スプライトの作成(pack sprite)を押します。
スプライトの作成
スプライトの作成

そうすると、アプリが、いい具合に、スプライトを配置して、そして並べ替えてくれます。同様の事を行うアプリに、» TexturePacker – Sprite sheet maker, image packer and optimizer があり、こちらの方が、pvrの対応、回転しての並べ替えなど、機能が豊富なのですが、続く、LevelHelperとの連携のためには、SpriteHelperを使う必要があります。
スプライト並べ替え後
スプライト並べ替え後

そして、この SpriteHelperでは、物理エンジンでの振る舞いを設定出来ます。

テクスチャの設定

  1. 基本設定
  2. ここでは、それぞれのテクスチャが固定か、動的に動くか、それとも、物理エンジンからは全く無視するかを設定します。テクスチャを選択して、以下のコンボで設定します。

    基本設定
    基本設定

    • static : 物理エンジン的に、固定で、動かないもの(地面や、壊れない壁など)
    • dynamic : 動的に動く物体(ボールなどはこれに該当します)
    • Kinematic : 加速度に対して反応する物体(今回は使っていません)
    • No Physic : 背景画像など、他の物体に反応しないオブジェクト(かごの背景など)
  3. オブジェクトの形状
  4. 続いて、オブジェクトの形状を設定します。円形の場合、”Is Circle” プロパティを設定することによって、設定出来ます。

    円形形状の設定 Is Circle
    円形形状の設定 Is Circle

    そして、SpriteHelperでは、オブジェクトの形状を、クリックで設定出来ます。試しに、かごの形状を設定しましょう。オブジェクトを選択して、Create Shapeボタンを押して、形状編集モードに映ります。
    形状の編集
    形状の編集

    編集は、マウスで、形状を点で作成していきます。終わったら、Finish Shapeボタンを押します。
    形状の作成
    形状の作成

    これで形状作成完了です。

  5. 物理係数の設定
  6. SpriteHelperでは、反発率、摩擦係数などの物理係数も設定出来ます。

    • Density : 物体の密度(重さ)
    • Friction : 摩擦係数
    • Bounce : 反発係数
    • Linear Velocity: 移動速度
    • Linear Damping : 移動摩擦(減速係数)
    • Angular Damping : 回転摩擦(減速係数)
    • これらは実際動かしながら設定するのがいいかもしれません。こちらは、LevelHelperでも設定出来るので、そちらに任せるのもいいと思います。

これらの項目を設定して、保存して、Generate Texture Atras を行えば、SpriteHelper の設定は完了です。

作成されるファイル
作成されるファイル

作成されるファイルは、

  • Retina用の画像ファイル -hd ファイル
  • 通常用の画像ファイル
  • spriteHelper設定ファイル(pshs)ファイル
  • このファイルを、LevelHelperで読み込むことが出来ます。上の画像を見て分かるように、すべてのテクスチャは一つの画像にまとめられているので、効率よく画像を表示することが出来ます(SpriteBatchSheetが使える)

それぞれの設定はこんな感じです。
かごは、動かないので、Staticで、形を定義しています。

かご
かご

かごの背景は、何にもぶつからないように、No Physic 設定をしています。

かご背景
かご背景

ボールは、円形で、Dynamicに設定してます。

ボール設定
ボール設定

スタンドは、土台のところだけ、反射するようにしています。Staticです。

かごの土台
かごの土台

地面は、でこぼこ感を再現しています。

地面
地面

地面の背景は、No Physicです。

地面の背景
地面の背景

こんな感じです。長くなったので、分割します。近いうちに、LevelHelperについても書きます。

LevelHelper App
カテゴリ: 開発ツール
価格: ¥1,600

SpriteHelper App
カテゴリ: 開発ツール
価格: ¥1,100

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください