見出し画像

AnimateCCでゲームUIのお題を出してくれるアニメーションを作る

koge

ゲームUIの練習のため自主制作をしたいなーと思ってるkogeです。

しかしUI制作用の仮のゲーム企画を設定するところに
やたら時間をかけてドツボにはまってしまい、
誰か私のかわりにお題を作ってくれないかなぁ、ということで
お題を出してくれるアニメーションを
AnimateCCで自作してみました。

AnimateCCを使おうと思ったのは　
FlashとAS2.0をそこそこ使い慣れていたのと、この機会に
AnimateCCをプロトタイピングツールとして勉強したいと思ったからです。

ここではActionScript3.0で引っかかったところなどを備忘録として書きたいと思います。

↓完成イメージはこんな感じ。(さすがに仕様書までは出てきませんが…)

--------------------------------------------------------◆要件

・使用するツールはAnimateCC 
・①ゲームの内容　
　②テーマ(世界観)　
　③αのキーワード(グラフィックのタッチや想定ユーザーなど)を
　それぞれ指定したテキストからランダムに表示し、その三種の組み合わせ によってゲーム企画のお題とする
・簡単にテキストの追加、変更ができるように作る

--------------------------------------------------------
◆完成品

こんな感じになりました。
これは動かしているところをgifアニメにしたもので、もちろんSWFファイルでは自分でボタンを押せます。
（結構めちゃめちゃなお題が出るので実用に耐えるかはこれから検証したいところ…)

とりあえず 内容：26個　テーマ：14個　キーワード：12個 のテキストを指定してあります。

--------------------------------------------------------
◆中身

中身はこんな感じ。

■　メインのタイムライン
　∟　赤いレバーのムービークリップ
　∟　”内容テキスト”のムービークリップ
　∟　”テーマテキスト”のムービークリップ
　∟　”キーワードテキスト”のムービークリップ


◆メインのタイムライン
メインタイムラインの1フレーム目で行う主要な処理は３つ。
　①テキストを取得するための乱数(ランダムの数)の作成
　②お題テキストの指定
　③赤いレバー部分のボタンの指定

①乱数の作成

//◆乱数
//Math.floor 小数点以下を切り捨てる,Math.random　0.0～0.999999の乱数を取得する(0～9)
// /:roulette_content : 26個　26をかけると0～25 ＋1で1～26
var roulette_content = Math.floor(Math.random() * 26)+1;
// /:roulette_theme : 14個　
var roulette_theme = Math.floor(Math.random() * 14)+1;
// /:roulette_keyword : 12個　
var roulette_keyword = Math.floor(Math.random() * 12)+1;

AS3.0では何をするにも変数の宣言が必要です。(varとついているもの)
ランダムの数の変数をそれぞれ
”roulette_content(内容)、roulette_theme(テーマ)、roulette_keyword(キーワード)”
として、乱数を作成するメソッドMath.floorとMath.randomを使用します。
下記のroulette_contentの場合、Math.randomで作った数(0.0～0.999999)にテキストの種類の個数26をかけた上でMath.floorで整数にしてます。
(わかりやすいように1足してますが、今思えば必要なかった…)

②お題テキストの指定

//◆内容の文字列
var text_content1: String = "ＲＰＧ";
var text_content2: String = "２Ｄ\nｱｸｼｮﾝ";
var text_content3: String = "３Ｄ\nｱｸｼｮﾝ";
var text_content4: String = "ＭＯＢＡ";
var text_content5: String = "ＴＤＦ";
var text_content6: String = "ローグ\nライク";
var text_content7: String = "オセロ";
　…続く

お題のテキストを必要な数分羅列します。
外部ファイルを読み込めるようにするとかもっとスマートなやりかたがあるような気がしますがとりあえず一個ずつベタ書きです。テーマとキーワードも同様に。

次に①で作った乱数から該当の番号のテキストを呼び出すための変数（text_content(theme/keyword)_num）を作ります。

////////テキストを判定するよう変数を作る
var text_content_num:*;
var text_theme_num:*;
var text_keyword_num:*;

text_content_num = this["text_content" + roulette_content];
text_theme_num = this["text_theme" + roulette_theme];
text_keyword_num = this["text_keyword" + roulette_keyword];


これでtext_content_numの変数から乱数の番号のテキストを呼び出せるようになります。
（*は可変引数のことらしいですがまだあまりよくわかっていません…）

③ボタンの指定

/* クリックして特定のフレームに移動し、再生
特定のシンボルインスタンス上でクリックすると、再生ヘッドがタイムラインの指定フレームに移動し、そのフレームから再生が継続されます。
メインタイムラインまたはムービークリップタイムライン上で使用できます。

手順 :
1. 以下のコード内の数値 5 を、シンボルインスタンスのクリック時に再生ヘッドが移動するフレームの番号に置き換えます。
*/

btn_play.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndPlayFromFrame_2);

function fl_ClickToGoToAndPlayFromFrame_2(event: MouseEvent): void {
	this.btn_play.gotoAndPlay("start");
	this.mc_roulette_content.gotoAndPlay("start");
	this.mc_roulette_theme.gotoAndPlay("start");
	this.mc_roulette_keyword.gotoAndPlay("start");
	this.mc_img_car.gotoAndPlay("start");
	gotoAndPlay(2);
}

ボタンイベントはコードスぺニット(コードをテンプレを使って書いてくれる機能)から作りました。これは便利ですね。
ボタンを押したらレバーのムービークリップ内でアニメーションをスタートさせ、
それぞれのテキストのムービークリップ内でテキストに置き換える処理が書いてあるフレームに飛ばすように
処理を書いています。

テキストのムービークリップの中身
それぞれのテキストのムービークリップの中はこんな感じです。

1フレーム目でstopさせておき、ボタンが押されたら2フレーム目に飛ばすことで
アニメーションを再生してます。
この中にカラのテキストボックスを置いていて、その中に①②で指定したテキストを入れる形でテキストを差し替えてます。

２フレーム目のコードは下記の通り(contentの場合)

//ルートのデータ取得
var rootObj: Object = this.root as Object;

//コンテンツ乱数に応じたテキストの取得
var text_content_num: String= rootObj.text_content_num;

//テキストボックスをからに
this.TextContent.text = "";

//テキストボックスのy値をリセット
this.TextContent.y　= 0;

ムービークリップ内ではまずroot(一番上の親タイムライン)で宣言した変数の中身をとってくる必要があるようです。
このあたりの概念がまだよくわかっておらず苦労してるポイントです…。
何度も回す時のためにテキストボックスの中のテキストをリセットする処理と
テキストを縦方向の中央に表示するための処理をリセットする処理を
入れています(下の二つ)

そしてようやくテキストを入れます。(７フレームのところ)
ステージ上に置いているテキストボックスにテキストを指定してます。

また行数が変わった際のテキストの高さをそろえるための処理も入れてます。難しそうだなと思ったけど案外あっさりできました。

// テキストボックスに乱数の番号のテキストを入れる

this.TextContent.text = text_content_num;

//ダイナミックテキストの高さを取得
var text_content_height = this.TextContent.height;

//ダイナミックテキストの高さを1/2したところにテキスト表示
this.TextContent.y += (text_content_height - this.TextContent.textHeight)/2;

--------------------------------------------------------

AS3.0はまだ慣れず、難しいところも多いですが
一旦概念を理解してしまえば簡単にさわれるコンテンツが作れそうなので、
まだまだいろいろ試してみたいと思います。

いいなと思ったら応援しよう！