プレイヤーの移動動作をフラグを使って行います。
初心者の方でも以下の手順通りの操作で自作移動が出来上がると思います。
変数が分からなくても組んで行く過程で少しずつ分かるようになるはずです。
画面はインディゲームクリエイター Clickteam Fusion2.5 の物です。 2014/08/16
1、新規作成からスタート
2、フレーム1をダブルクリックして、フレームエディタを表示します。
画面はワークスペースツールバー
見当たらない場合、上部のメニューより 表示 ⇒ ツールバー ⇒ ワークスペース で表示できる。
3、フレームエディタ内でダブルクリックし、オブジェクトを新規作成します。
今から作成するオブジェクトは主人公として作りこんでいきます。(移動動作のみ)
4、新規オブジェクトの作成が表示されるのでグラフィックとアニメーションをクリックして
表示するオブジェクトを絞り込みます。
5、アクティブ(アクティブオブジェクト)が表示されるので、アクティブをダブルクリックします。
6、オブジェクトを配置したい場所へカーソル移動させ、クリックして配置します。
マウスカーソルが + に変化する。
今回は点線内の白い領域中央あたりに配置します。
(後で4方向移動の確認をする時に、主人公を最初から画面中央に表示させた方が操作しやすい為)
7、配置したアクティブオブジェクトをクリックして選択します。
8、選択した事でプロパティに、このオブジェクトの情報が表示されます。
プロパティが見当たらない場合、上部のメニューより 表示 ⇒ ツールバー ⇒ プロパティ で表示させます。
9、このオブジェクトに名前を付けます。
アクティブという名前のままなので変更しましょう。
プロパティのバージョン情報をクリックします。
10、名前のアクティブの部分をクリックして名前を入力します。
今回はプレイヤーとしました。名前は何でも良い。
これで名前が付きました。
11、主人公の移動動作に必要な変数を用意します。
プロパティから値のアイコンをクリックします。
変数が苦手な方は、ここではあまり気にせず次へ進みましょう。
12、新規作成ボタンをクリックして、変数を追加します。
変数A、変数B、計2つ作ります。
このようになります。
13、変数に名前を付けます。
変数名をダブルクリックします。
X座標と入力します。
同じ操作で変数Bの名前も変更します。
変数BはY座標と入力します。
変数に名前が付きました。名前は自由に付けられます。
X座標(変数)、Y座標(変数)の中身は右に映っている数字の0です。
彼ら(変数)のことは一旦忘れて次に行きます。
14、主人公の動作を作っていきます。
イベントエディタのアイコンをクリックして、イベントエディタへ移動します。
15、新しい条件をクリックします。
どんな条件でイベントが始まるのか決めます。
(どんな条件で)なにが始まるのかは今は考えません。
16、表示された新規条件の中からストーリーボードコントロールをクリックします。
17、表示されたメニューからフレームが開始をクリックします。
このようになります。
1行目の条件にフレームが開始(された時)が作成されます。
フレームが開始された時に何を実行するかは、気にせず次へ進みましょう。
フレームが開始: このフレームのゲームが始まった時に1度だけ実行される条件
18、最初に作成したアクティブオブジェクト(名前:プレイヤー)に
フレームが開始された時に実行したい内容を指示します。
画面を参考にマウスカーソルのマス目の位置で右クリックします。
これで、 条件:フレームが開始 → 対象:プレイヤー という状態になります。
(マス目のイメージ:条件と上のアイコンが交差したマス目を右クリックして内容を書く)
19、表示されたメニューから、変数をクリックします。
20、更に表示されたメニューから、変更をクリックします。
21、数式エディタが表示されます。
22、値を選択の所が先ほど作成した変数のX座標(1番目の変数)になっている事を確認します。
23、プレイヤーをクリックします。
24、表示されたメニューから、位置をクリックします。
25、更に表示されたメニューから、X座標をクリックします。
このようになります。
これは先ほど作成したアクティブオブジェクト(名前:プレイヤー)のX座標(横の位置)の情報の事です。
今の状態、実行内容のイメージ
26、実行内容が完成したのでOKをクリックします。
これで1つ条件が出来上がりました。
今の状態、実行内容のイメージ
変数にプレイヤーの現在の位置が入ります。
このままでは横方向しか制御できないので、同じ操作でY座標にもプレイヤーの位置を入れます。
28、先ほどイベントを書いたマス(レ点入りのマス)で右クリックします。
カーソルを合わせると、先ほど書き込んだイベントが表示される。
29、表示されたメニューから、変数をクリックします。
30、更に表示されたメニューから、変更をクリックします。
31、値がX座標になっているので、クリックしてY座標に変更します。
32、プレイヤーをクリックします。
33、表示されたメニューから、位置をクリックします。
34、更に表示されたメニューから、Y座標をクリックします。
このようになります。
OKを押して決定します。
変数Y座標にもプレイヤーの現在の位置が入りました。
35、変数の中身を確認してみましょう。
フレームエディタアイコンをクリックしてフレームエディタを表示します。
36、プレイヤーをクリックします。
37、プロパティから、サイズ/位置をクリックします。
38、現在のアクティブオブジェクト(名前:プレイヤー)の位置が表示されます。
オブジェクトを配置した位置なので、ここの画像の数値とは異なります。
39、試しにアクティブオブジェクトをドラッグ移動させてみる。
40、再びプロパティの位置を確認します。
ドラッグ移動した座標に変わりました。
フレームが開始した時に、この数字が変数へ代入されます。
41、カウンターを用意して、変数の中身を確認してみる。
アクティブオブジェクト(名前:プレイヤー)に作成した変数、
X座標、Y座標の中身がゲームを開始した時どのようになっているか見る。
フレームエディタ内でダブルクリックします。
42、データをクリックして、表示するオブジェクトを絞り込みます。
43、カウンターをダブルクリックします。
44、フレームエディタの白い領域内の右上あたりにクリックして配置します。
45、カウンターを右クリックします。
46、表示されたメニューから、オブジェクトをクローンをクリックします。
47、行が2、列が1になっている事を確認してOKを押します。
48、オブジェクトのクローンが出来上がりました。
複製とは異なり、クローンで増やしたカウンターはそれぞれが独立した動作をします。
49、イベントエディタを開き、カウンターの動作を作ります。
50、新しい条件をクリックします。
51、新規条件から、特別をクリックします。
52、表示されたメニューから、常に実行をクリックします。
このようになります。
53、常に実行とカウンターが交差するマスを右クリックして、カウンターの動作を設定します。
54、表示されたメニューから、カウンターをセットをクリックします。
55、カウンターをセットの画面が表示されます。
56、プレイヤーをクリックします。
57、表示されたメニューから、値をクリックします。
58、更に表示されたメニューから、値AからMをクリックします。
59、更に表示されたメニューから、X座標を読み出しをクリックします。
このようになります。
OKを押して決定します。
60、カウンター2の動作も設定します。
カウンター2のマスを右クリックします。
61、表示されたメニューから、カウンターをセットをクリックします。
62、カウンターをセットの画面が表示されます。
63、プレイヤーをクリックします。
64、表示されたメニューから、値をクリックします。
65、更に表示されたメニューから、値AからMをクリックします。
66、更に表示されたメニューから、Y座標を読み出しをクリックします。
このようになります。
OKを押して決定します。
これで、カウンターが変数の中身を常に表示する状態になりました。
67、動作を確認してみましょう。
アプリケーションを実行をクリックします。
上のカウンターは変数X座標、下のカウンターは変数Y座標の中身が表示されます。
このままでは良くわかりません、閉じるボタンをクリックします。
68、フレームエディタへ移動します。
2つのカウンターの位置が近すぎるので、マウスでドラッグして少し離します。
ドラッグ移動が上手く出来ない場合、グリッドにスナップのON/OFFや、
グリッドの設定を調整して下さい。
また、オブジェクトをクリックして選択状態にした時に、
キーボードの矢印キーを押すと位置の微調整も行えます。
70、カウンターの位置が決まったら、プレイヤーをドラッグ移動させ、
プロパティでプレイヤーの現時の位置を確認します。
プロパティにプレイヤーの現在の位置が表示される。
71、ゲームを実行して、プレイヤーの現在の位置と、
カウンターに表示される変数の中身が同じか確認してみます。
実行するとカウンターも現在の位置を表示するはずです。
これで、フレームを開始した時に1度だけプレイヤーの現在位置(X、Y)を
変数へ代入するとういイベントの動作が確認できました。
72、次のイベントを書く前に新しいオブジェクトを作成します。
フレームエディタをダブルクリックします。
73、新規オブジェクトの作成が表示されるので[グラフィックとアニメーション]を選び、
表示するオブジェクトを絞り込みます。
74、アクティブオブジェクトをダブルクリックします。
75、今度は配置する場所を変えます。
左側の灰色の領域に配置します。
76、アクティブをダブルクリックします。
77、ピクチャエディタが表示されます。
78、フレームに表示されているアクティブオブジェクトの絵をクリックします。
選択状態になります。
そのままキーボードのDeleteキーを押すか、左上の赤いバツマークを押して、
フレームを削除します。
このフレームを削除しますか? と聞かれるのでOKを押します。
79、色を選びます。黒にします。
80、線ツールをクリックします。
81、線のサイズを変更しましょう。
10にします。
82、ゲームパッドの十字キーを描きます。
画像を参考に思い切って縦横の中央からドラッグして十字キーを描いてみましょう。
ゲームに映らないので、大体で大丈夫です。
多分こうなります。
OKを押して編集を決定します。
83、この十字キーにも名前を付けます。
名前は方向制御とします。
84、変数も作成します。
4つ作ります。
名前と、変数の初期値を以下のように設定します。
このオブジェクトはプレイヤーを遠隔操作する為に使用します。
イベントシーンなどでプレイヤーをオートで移動させる時に役立ちます。
また、ここでは触れませんが後にキーコンフィグ仕様へ対応する事も出来ます。
85、次はプレイヤー座標の更新動作を作ります。
イベントエディタを開きます。
86、3行目の新しい条件をクリックします。
87、新規条件から、特別をクリックします。
88、表示されたメニューから、常に実行をクリックします。
このようになります。
常に実行の1つ目はカウンター表示用に(デバッグ用)、
今作成した常に実行はプレイヤーの動作用にしたかったので行を分けました。
89、3行目の常に実行とプレイヤーが交差するマスを右クリックします。
90、表示されたメニューから、位置をクリックします。
91、更に表示されたメニューから、X座標を変更をクリックします。
92、数式エディタが表示されます。
93、プレイヤーをクリックします。
94、表示されたメニューから、値をクリックします。
95、更に表示されたメニューから、値AからMをクリックします。
96、更に表示されたメニューから、X座標を読み出しをクリックします。
97、このようになります。
98、OKを押して決定します。
3行目のイベントはこのようになります。
内容が分からなかった方は、下の画像の黒い太文字を読んだ後、
上の画像と見比べると少し把握できるかもしれません。
プレイヤーの位置が変数の中身に常に変更されます。
プレイヤーの位置は変数の中身次第となります。
ゲームを実行しても[X座標(変数の中身)]は最初に入った数字から
変化させるイベントを組んでいないので、プレイヤーは動きません。
変数の中身が100だったとして、ゲームが実行中に変数の中身へ+1を入れると、
常に変更する→プレイヤーの位置 とイベントを組んだので100の座標から101の座標へ
プレイヤーキャラクタが移動します。
3行目のイベントは位置の更新だけの処理をしています。
99、次のイベントを組みます。
このままではX方向しか位置が更新されないので、Y座標も更新するイベントを組みます。
3行目とプレイヤーが交差するマスを右クリックしてイベントを追加します。
100、表示されたメニューから位置をクリックします。
101、更に表示されたメニューから、Y座標を変更をクリックします。
102、数式エディタが表示されます。
103、プレイヤーをクリックします。
104、表示されたメニューから、値をクリックします。
105、更に表示されたメニューから、値AからMをクリックします。
106、更に表示されたメニューから、Y座標を読み出しをクリックします。
107、このようになります。
108、OKを押して決定します。
プレイヤーの座標を更新し続けるイベントが完成しました。
109、プレイヤーに新しい変数を作成します。
イベントエディタ上のプレイヤーを右クリックします。
クリックしてしまった場合、
もう一度プレイヤーをクリックすると元の状態に戻ります。
アイコンをクリックすると灰色になり、
クリックしたオブジェクト以外のイベントを非表示にできます。
110、表示されたメニューから、プロパティを表示をクリックします。
111、プレイヤーの内容がプロパティに表示されるので、
値から新規作成をクリックして変数を追加します。
変数Cが追加されました。
112、変数Cをダブルクリックして、名前を付けます。
113、名前の編集が表示されるので、移動速度と入力します。
変数の名前が変更されました。
114、移動速度の右側の0をクリックして、変数の初期値を設定します。
100と入力します。
変数 移動速度の準備が整いました。
115、次はプレイヤーを移動させるイベントを作ります。
下の画像のマウスカーソル位置を参考に、4行目の行番号の位置で右クリックします。
116、表示されたメニューから、挿入をクリックします。
117、更に表示されたメニューから、イベントグループをクリックします。
118、イベントグループのタイトルを入力します。
119、移動 上 と入力します。タイトル(名前)は自由に付けられます。
このようになります。
4行目にイベントグループ 移動 上が作成されました。
120、5行目の新しい条件をクリックして、イベントグループの中にイベントを設定していきます。
121、新規条件から、プレイヤー1(ジョイスティックのアイコン)をクリックします。
122、表示されたメニューから、ジョイスティックをクリックします。
123、更に表示されたメニューから、ボタンや方向キーを押した時をクリックします。
124、ジョイスティックが以下の画像の状態である事を確認してOKをクリックします。
5行目に上を押した時、が追加されました。
125、5行目と方向制御が交差するマスを右クリックします。
このマスには計4つ、イベントを作成していきます。
126、表示されたメニューから、フラグをクリックします。
127、更に表示されたメニューから、有効に設定をクリックします。
128、数式エディタが表示されます。
129、方向制御をクリックします。
130、表示されたメニューから、値をクリックします。
131、更に表示されたメニューから、値AからMをクリックします。
132、更に表示されたメニューから、上を読み出しをクリックします。
このようになります。
OKを押して決定します。
133、同じマスへ更にイベントを追加します。
5行目と方向制御が交差するマスを右クリックします。
134、表示されたメニューから、フラグをクリックします。
135、更に表示されたメニューから、無効に設定をクリックします。
136、数式エディタが表示されます。
137、方向制御をクリックします。
138、表示されたメニューから、値をクリックします。
139、更に表示されたメニューから、値AからMをクリックします。
140、更に表示されたメニューから、下を読み出しをクリックします。
このようになります。
OKを押して決定します。
141、同じマスをクリックして、更にイベントを追加します。
142、表示されたメニューから、フラグをクリックします。
143、更に表示されたメニューから、無効に設定をクリックします。
144、数式エディタが表示されます。
145、方向制御をクリックします。
146、表示されたメニューから、値をクリックします。
147、更に表示されたメニューから、値AからMをクリックします。
148、更に表示されたメニューから、左を読み出しをクリックします。
このようになります。
OKを押して決定します。
149、同じマスをクリックして、更にイベントを追加します。
150、表示されたメニューから、フラグをクリックします。
151、更に表示されたメニューから、無効に設定をクリックします。
152、数式エディタが表示されます。
153、方向制御をクリックします。
154、表示されたメニューから、値をクリックします。
155、更に表示されたメニューから、値AからMをクリックします。
156、更に表示されたメニューから、右を読み出しをクリックします。
このようになります。
OKを押して決定します。
これで上ボタンを押した時に、内部フラグ上がONになり、
他の3方向は内部フラグがOFFになるイベントが出来ました。
内部フラグはオブジェクトごとに0~31まで有り、各番号に対して有効無効を決められます。
今回は方向制御(十字キーの絵)のオブジェクトに変数を持たせ、
中身に0,1,2,3と予め入れておいたので、変数の中身でフラグ番号を指定しています。
フラグ番号の指定とフラグの操作内容は、
内部フラグ 方向制御(十字キーの絵)のオブジェクトの変数(上) 番を 有効に設定
となります。
変数(上)の中身は数字の0なのでフラグ0番を指定しています。
この方法はwikiでも紹介されている内部フラグに無理矢理名前を付ける方法です。
イベントが見やすくなり管理がとても楽になります。
157、今度は方向キーが押されていない時に内部フラグをOFFにするイベントを組みます。
6行目の新しい条件をクリックします。
158、新規条件から、プレイヤー1(ジョイスティックのアイコン)をクリックします。
159、表示されたメニューからジョイスティックをクリックします。
160、更に表示されたメニューから、ボタンや方向キーを押している間繰り返すをクリックします。
161、ジョイスティックが以下の画像の状態である事を確認してOKをクリックします。
このようになります。
162、6行目を右クリックします。
163、表示されたメニューから、条件を反転をクリックします。
このようになります。
頭にバツが付く事で、押されていない時、という条件になりました。
164、6行目を右クリックします。
165、表示されたメニューから、挿入をクリックします。
166、新規条件から、特別をクリックします。
167、表示されたメニューから、条件を制限をクリックします。
168、更に表示されたメニューから、イベント連続時にアクションを1回のみ実行をクリックします。
このようになります。
繰り返し実行されるのを防ぎます。
168、6行目と方向制御の交差するマスを右クリックします。
169、表示されたメニューから、フラグをクリックします。
170、更に表示されたメニューから、無効に設定をクリックします。
171、数式エディタが表示されます。
172、方向制御をクリックします。
173、表示されたメニューから、値をクリックします。
174、更に表示されたメニューから、値AからMをクリックします。
175、更に表示されたメニューから、上を読み出しをクリックします。
このようになります。
OKを押して決定します。
176、これで、上を押していない時、内部フラグ上(0番)をOFF(無効)にするイベントが出来ました。
177、次は座標を操作するイベントを作ります。
7行目の新しい条件をクリックします。
178、新規条件から、方向制御をクリックします。
179、表示されたメニューから、変数をクリックします。
180、更に表示されたメニューから、フラグをクリックします。
181、更に表示されたメニューから、フラグが有効をクリックします。
数式エディタが表示されます。
フラグの番号を変数で指定していきます。
182、方向制御をクリックします。
183、表示されたメニューから、値をクリックします。
184、更に表示されたメニューから値AからMをクリックします。
185、更に表示されたメニューから、上を読み出しをクリックします。
このようになります。
OKを押して決定します。
186、これで7行目に、もしフラグ上(0番)がONになった時、という条件が出来ました。
187、7行目とプレイヤーが交差するマスを右クリックして、実行内容を作ります。
188、表示されたメニューから、変数をクリックします。
189、更に表示されたメニューから、変更をクリックします。
数式エディタが表示されます。
190、値を選択のX座標をクリックしてます。
191、Y座標をクリックして、変更の対象となる変数を切り替えます。
このようになります。
192、Y座標(変数)に対して、変更を加えて行きます。
プレイヤーをクリックします。
193、表示されたメニューから、値をクリックします。
194、更に表示されたメニューから、値AからMをクリックします。
195、更に表示されたメニューから、Y座標を読み出しをクリックします。
このようになります。
196、マイナスをクリックします。
このようになります。
構文エラーは無視しましょう。
197、カッコをクリックします。(始まりカッコ)
このようになります。
カッコ閉じがありませんはそのまま気にしないで次に行きます。
198、この状態でプレイヤーをクリックします。
199、表示されたメニューから、値をクリックします。
200、更に表示されたメニューから、値AからMをクリックします。
201、更に表示されたメニューから、移動速度を読み出しをクリックします。
このようになります。
202、*をクリックします。* は かける(×)です。
このようになります。
203、数字や点、カッコをクリックしていき、0.01)を入力します。
キーボードでも入力可能。
多分このようになります。
OKを押して決定します。
7行目のイベント入力が完了しました。
この状態でゲームを実行すると、キーボードの上矢印キーを押した時に
プレイヤーが上に(だけ)移動します。
7行目のイベントの内容を確認していきます。
移動速度を少数点化(100分の1)した値にして、Y座標(変数)から引き、同じY座標の変数へ代入しています。
変数の初期値に不動少数(少数点の数字)が設定できないので、(仕様)
数式エディタ上で少数点化させた数字を扱っています。
少数点の数字は、数式エディタ上で扱う事で変数に代入する事が出来ます。
イベントの内容が分からなかった場合は、以下の内容を順に見て行くと何かつかめるかもしれません。
移動速度だけを見ていきます。
移動速度はオブジェクト:プレイヤーに作成した変数です。
下の図にプロパティ画面を持ってきました。移動速度の中身は今100です。
このようになります。
移動速度 × 0.01
移動速度の中身は100なので、計算結果は1になります。
その結果をY座標(変数)から引きます。
Y座標(変数)にはフレームが開始された時に、1度だけ自分の今の位置が入るようになっています。
(1行目の処理内容)
自分の今の位置から1を引くとなります。
引いた結果を、変数Y座標(自分の今の位置)へ入れます。
変数Y座標は最初のプレイヤーの位置が入っていますが、
変数Y座標はこの処理で、自分の今いた位置から-1された数字に置き換わります。
プレイヤーの位置が変数の中身に常に変更されるという3行目のイベントがあるので、
プレイヤーが上に移動する事になります。(座標が-1された為)
移動速度の数字を100より更に大きくして行くと、プレイヤーの移動速度が速くなります。
100以下にした場合は、ゆくっり移動させる事が出来ます。
後は同じように下、左、右のイベントを作成して行くのですが、
上方向の解説だけで88項目(項目115~203)
流石にページが下に伸びすぎる事になるので、サンプルを用意しました。
204、さまざまな方向入力に対応させる。
上キーと左キーに絞って入力と動作を見ていくと、
上を押したまま左を押すと左に動きますが、
上を押したまま左を放した時は止まってしまいます。
今度はこの時に止まらず、上に移動させる動作を作ります。
wikiの行数オーバーの為、別のページに記載します。
- プレイヤーの4方向移動を1から作ってみる (トップページへ)