blog

Cocostudio ハンズオンチュートリアル 色移りモード ハッチ作り

ゲーム内の多くのアクションは、演出の種類で作られており、今日は下の写真の色変更モードでハッチ効果を完成させるためにフレームアニメーション技術を使用するためにあなたをリードしています。これはタイムトンネ...

Oct 1, 2016 · 6 min. read
シェア

最近発売された新しい3つの消去ゲーム "小さなモンスターの攻撃 "を例に取ると、ゲーム内のアクションの多くは、CocoStudioの種類の生産であり、今日はハッチの特殊効果の色変更モードで次のイメージを完了するためにフレームアニメーション技術を使用するように導きます。これはタイムトンネルです。

次に、本題に入りましょう!

I: クリエーション・プロジェクト

1,cocostudioランチャーを開き、アクションエディターを見つけます。

2,新規プロジェクトの作成

メニューバーの「File」メニューから「***New Item」を選択します。

3、プロジェクト名の設定

II: リソースの追加

1.リソースの準備

これは、色が変わるハッチのフレーム・アニメーションに使用したイメージの1つで、別のフォルダに入れてあります。

2,エディターに追加

この2つのファイルをリソースパネルに直接ドラッグ&ドロップします。

3.リソースのチェック

リソースパネルのインポート後、このパネルには "Resources "というルートノードがありますが、cocos2d-xのイメージデータは特殊な管理のため、ここにあるファイルは、少なくとも既存のファイルの構造を恣意的に変更しないように、あらかじめパス関係を整理しておくことをお勧めします。

また、プロジェクト全体で同じ名前のイメージやリソースを使わないようにして、1つのファイル内でもリネームによってすべてのファイルが衝突しないようにすることをお勧めします。

III: レイヤーノードの作成

フレーム・アニメーションは比較的単純なアニメーションで、レイヤーは共通レイヤーのみです。このレイヤーは主にイメージ情報を表示するために使用されるので、リソース・パネルのレンダリング・エリアにイメージをドラッグするだけです。

カラフルな背景イメージを見つけて、まずそれを追加しました。

次に別のハッチレイヤーを追加します。この連続したイメージが、アニメーションを形成する鍵となります。

ただし、ドラッグ&ドロップするときは、レンダリングの空白部分にドラッグするように注意してください。すでにテクスチャがある場所にドラッグすると、競合が発生します。

次に、そのハッチレイヤーの座標位置を固定し、点に設定します。下のレイヤーも点かどうかチェックします。

IV: レイヤーの複数リソースの設定

Layerはテクスチャを表示するためのレイヤーコンテナですが、多くのものを保持することができます〜このアニメーションは複数のアニメーションを実現するために2つのレイヤーを再利用する必要があるため、まずレイヤーに複数のテクスチャリソースを設定することができます。

まずベースマップレイヤーを選択し、リソースパネルでいくつかの色の背景を一緒に選択し、"Render Resource "プロパティに追加します。

ハッチレベルも同様

効果を見るには、"Render Resource "プロパティでランダムなイメージを選択し、レンダリング領域が変化したかどうかを確認します。

V: 簡単な回転アニメーションの作成

このアニメーションの背景は回転するエフェクトです!

まず、一番下のレイヤーを選択し、指定したフレームに新しいフレームを作成します。終了フレームを選択し、"Rotation "プロパティを"-360.00 "に設定します。これで回転アニメーションは完成です。効果を見るには再生をクリックしてください。

VI: シーケンスフレームアニメーションの作成

このタイムカプセルは、ハッチが開閉する特殊効果に加え、とてもクールなスピンを備えています。これ以外にタイムカプセルと呼べるものはないでしょう。

このハッチは背景とは違う手法を使っていて、シーケンス・フレームを使ってアニメーションしています。これは、前回のアニメーションと同じように簡単に実装できます。

ステップ

レイヤー2を選択し、属性 "Sequence Interval "を変更します。デフォルト値は5で、これは各フレームの間隔が5フレームであることを意味します。これを3に変更します。これはイメージの変化の程度に依存します。変化が大きい場合は、視覚効果を高めるためにこの値を小さくしてみてください。これはイメージの変化の程度に依存し、変化が大きい場合は、視覚効果を高めるためにこの値を小さくしてみてください。

次に、リソースパネルで1から7までの番号をつけたイメージをいくつか選択し、アニメーションフレームのオブジェクトにドラッグ&ドロップします。すると - もうこれ以上はありません ~~~ ただ効果を見てください~~~。

注:これはアニメーションgifで、ページ上にないと表示されません。

VII: 複数のアニメーションの作成

ここにあるいくつかのフレームアニメーションは、ベースとなるイメージの色が違うだけで、非常によく似ています。そこで、アニメーションのコピー機能を使って、複数のアニメーションを素早く作成することができます。

ステップ:アクションリストで、Animation1を選択し、マウスの右ボタンをクリックし、Copy Animationを選択します。

コピーされたアニメーションは****と全く同じです。レイヤーを選択するだけで、テクスチャを直接変更できます。

ステップ:レイヤー1の***フレームを選択し、"Render Resource "プロパティで新しいテクスチャを選択します。最後のフレームのテクスチャが置き換えられるかどうかは問題ではないので、ここでは2つのフレームしかありません。

他のいくつかのアニメーションも同じ修正を使っています。

第8回:片付け

1,アクション名の修正

管理を簡単にするために、個々のアクションの名前を統一する必要があります。アニメーションをクリックし、右クリックメニューからRenameを選択します。

2: フレームの整理

最初に設定した背景アニメーションの長さは、ハッチを閉じるアニメーションの長さとは異なるので、背景レイヤーのテールフレームをレイヤー2のテールフレームと同じ位置に直接ドラッグします。

IX:まとめ

以上の8つのステップを経て、ハッチの制作が完了し、簡単なドラッグ&ドロップとプロパティの変更を通じて、美しいアニメーションを完成させることができ、私はプログラムのために多くの作業を保存する必要があると信じて、芸術も非常に簡単に始めることができ、最終的なインストールパッケージのために大きなサイズを小さくすることができ、特にゲームが比較的大きな図を持っている場合、CocoStudioでも提供しています。CocoStudioでは、スケルタルアニメーションにも対応しており、キャラクターを作るのに10Mのイメージが必要だったものが、数十万で作れるようになりました。

[]

ちなみに、「Attack of the Little Monsters」は、超キュートな小さなエイリアンモンスター、ゴージャスでファンタスティックな消去エフェクト、パワフルでクールな小道具が特徴で、キュートな小さなモンスターたちと一緒に星間冒険を体験できます。新しい3つの消去ゲームとして、現在、すべての主要なアプリショップで良いパフォーマンスを持っています。

これを見るのが楽しみですか?CocoStudio.orgの公式サイトで***バージョンをダウンロードして体験してください!

Read next

一目でVMware Horizon View 5.3の新機能

バージョン番号から5.3を表示するには、小さなリリースですが、ユーザーエクスペリエンスでは、TCOは、非常に大きな進展があります。

Oct 1, 2016 · 2 min read