第一回Clickteam Fusion 2.5スタートアップ講座


というわけでtenkyoです。

さて、始まりましたねSteamオータムセール。
あんなゲームこんなゲームが大セール中ですが、その影で例のアレもセール中であることをご存知でしょうか。

そう、あのおフランス製のゲーム製作ツール、Clickteam Fusion 2.5です。

以前MOGAKUでも紹介したことがありますが、プログラミングなしでゲームを作れるということをウリにしているツールです。
先日僕がデジゲー博2015に持って行って展示したゲーム、「くびきの檻」もこのClickteam Fusion 2.5によって製作しています。(くびきの檻、現在配信中!!

そんなClickteam Fusion 2.5、Steamオータムセールではなんと定価9800円のところ1470円!!(Steamページ)
Clickteam Fusion 2.5には無料版も存在していますが、ビルド可能な形式がHTML5のみだったりと、製品版に比べると著しく機能が制限されているのも事実。

このセールを期に、ClickteamFusionでのゲーム制作をはじめてみましょう!!ということで話が終わってしまうのですが、実際のところいざCF2.5というツールでの制作をはじめようとするとなると、国内でのコミュニティ不足・情報不足感が否めなく、出鼻をくじかれてしまう可能性が高いかもしれません。

プログラム不要がウリなんだから、購入者のほとんどはプログラム未経験のはず!
そんなわけで、これからClickteam Fusionでの開発をはじめようとしている人にとって、その初期の理解に少しでも貢献でき、CF2.5関連で検索をかけたときに目に入るようなテキストを作成しようというのが今回の試みです。講座とかエラそうな単語がタイトルにくっついているのもそのためです。

前置きが長くなりましたが、さっそくセールで購入したClickteam Fusion 2.5をインストールし、ゲーム制作をはじめてみましょう!

Clickteam Fusion 2.5 では、ある結果を得るための方法は1つに限定されません!
logo5

 

 

※本テキストは、Clickteam Fusion 2.5の未経験者、及びゲーム制作未経験者を対象にしているはずです。

  目次
   ■画面にオブジェクトを置いてみる
   ■イベントを書いてみる
   ■オブジェクトのプロパティ
   ■オブジェクトに変数を設定
   ■高速ループを使ったイベントの書き方


 

 

 

2015112700000

さて、おそらく複数回に分かれるかと思いますが、ツール習熟のための習作として、こんなゲームを作ってみましょう。
自機が定点の1画面シューティングゲームです。自機から発射される弾は黄色いオブジェクトの方向に向かって飛んでいき、黄色いオブジェクトは常にマウスの位置を追従する、という感じのものです。

いくつものオブジェクトが画面を動き回っていますが、実際の中身はほんの10行程度のイベントリストのみで構成されています。
では順を追って、CF2.5での制作の方法を確認していきましょう!

 

 


 

 

■画面にオブジェクトを置いてみる

まず、ゲームにはオブジェクトが必要です。今回の場合、「自機」や「弾」、「敵」などがオブジェクトにあたります。

最初に、「自機」のオブジェクトを配置してみましょう。

CF2.5を起動するとまずこのようなまっさらな画面が出てくると思います。
どこでもいいので、まずはこの画面をダブルクリックしてみてください。

2015112700001_1

すると、オブジェクト選択ウィンドウが出てきます。CF2.5には標準でもさまざまな機能を持つオブジェクトが搭載されていますが、そのあたりはいったん後回しにして、ここでは「アクティブ」を選択します。

2015112700001

「アクティブ」を選択して「OK」を押すと、カーソルが十字の形に変わります。
そうしたら、画面のどこかをクリックして、「アクティブオブジェクト」を配置します。
配置したら、左下に「アクティブオブジェクト」のプロパティが表示されるので、まずはわかりやすくするために名前を変えてあげましょう。ここでは「自機」に名前を変更しています。

2015112700002

 

 


 

 

 

同じように、「弾」のオブジェクトを配置します。

ふたたび画面をダブルクリックし、「アクティブ」のオブジェクトを選択しOK。
「弾」のオブジェクトは、デフォルトの緑のダイヤモンドから画像を変更してあげましょう。
配置した「アクティブ」をダブルクリックすると、画像編集ウィンドウが開きます。

2015112700003

ここでは、「弾」は黒の矩形のイメージにしています。好きな画像に編集したら、OKを押下しましょう。
「弾」のオブジェクトはジャマなので、画面外のグレーの部分に置いておきましょう。
さて、現在画面はこのような形になっているかと思います。

2015112700003-2

 

 

 


 

 

 

■イベントを書いてみる

ひとまずオブジェクトを配置したので、最初に「自機から弾を発射する」という機能をつくってみましょう!

画面上部のメニューから、「表示」→「イベントリストエディタ」を選択します。

2015112700004すると画面が切り替わり、「イベントリストエディタ」が表示されます。
この画面で、ゲーム内での「イベント」を記述したり、管理することができます。

2015112700005

「イベント」とは……
たとえば今回のゲームでいえば、「弾を撃つ」というできごとがあります。この「弾を撃つ」というできごとは、「弾のオブジェクトを作成する」「作成した弾を移動させる」という二つのイベントによって成立しています。
文字で見てもピンと来ないかもしれませんね。とりあえず、実際にイベントを書き込んでみましょう!

 

 


 

 

 

イベントリストエディタで、「新しい条件」をクリックします。

「条件」とは、「どんなとき」にそのイベントを起こすかをあらわすものです。
たとえば今回ならば、何をしたときに弾を発射させたいでしょうか? キーボードのキーを押したときや、あるいは画面をクリックしたとき、もしくはマウスカーソルを三回右に回して一回左に回してキーボードのキーを端から全部押しながら右クリックをしたとき、などが主なきっかけとして考えられます。
こうした「きっかけ」を、まず条件として定義してあげる必要があります。

 

今回は、「スペースキーを押したとき」に弾を発射させるようにしたいので、「新規条件」のウィンドウから、「キーボード」→「キーを押した時」を選択します。

2015112700006

 

2015112700007

きっかけとなる条件を決定すると、イベントリストエディタ上はこのように表示されます。
さて、次はいよいよイベントを書き込みます。

 

 

先ほどの文章を思い出してみてください。「弾を撃つ」というできごとは、「弾のオブジェクトを作成する」「弾を移動させる」という二つのイベントによって成り立っています。
まず第一に、「弾のオブジェクトを作成する」というイベントを書き込んでみましょう。
「ここにアクションを挿入」という部分をクリックすると、イベント選択ウィンドウが表示されます。

2015112700008

「オブジェクトの作成」などのイベントは、キューブ型のアイコンが扱っているので、これをクリックし、「オブジェクトを作成」を選択します。
すると何のオブジェクトを作成するかの選択ウィンドウが表示されるので、ここで「弾」を選びましょう。

次に、そのオブジェクトを「どこに」作成するのかを決定します。
画面上のどこでも好きなところを選択することができますが、ここでは「関連」から「自機」を選択してあげましょう。

2015112700009

このオプションは、選択したオブジェクトと同じ位置に配置する、というものです。これで、「弾」のオブジェクトは「自機」の中心に作成されるようになりました。
本当に? と思ったら、F8キーを押してみてください!
ウィンドウが立ち上がって、実際にゲーム画面が表示されます。
ここでスペースキーを押してみれば、「弾」のオブジェクトが「自機」の上に作成されるのを確認できるかと思います。

こうして書き込んだイベントやその他もろもろをテストするため(もちろん実際にゲームをするためにも!)、F8キーを押して実行するというのは重要な方法です。ゲームを完成させるまでに何度も(本当に、嫌になるくらいに何度も)実行することになるかと思うので、今のうちに何度も押して回数を減らしておきましょう。

 

 


 

 

 

しかし、弾は確かに作成されたものの、このままでは微動だにしませんね。

次に、作成した弾を動かすというイベントを書き込んでみましょう。

1行目のイベントは完成しました。
次に、2行目のところに、新しい条件を書き込みます。
「新しい条件」→「特別(歯車のようなアイコンです)」→「常に実行」を選択してください。

2015112700010

「常に実行」という条件は、文字通り常時実行される条件で、英語版では「Always」となっています。
さきほどは「スペースキーが押されたときに実行される」イベントでしたが、逆に言えばそれは「スペースキーを押さない限りは実行されない」ということになります。
それに対してこの「常に実行」は、無条件に実行される条件といえます(妙な日本語ですね)。

 

 


 

 

 

条件を決定したら、さきほどと同じく二行目の「ここにアクションを挿入」をクリックします。

今回は、「弾を移動させる」というイベントですから、つまり「弾」にまつわるイベントになります。
なので、「弾」のオブジェクトを選択し、「位置」→「X座標を変更」を選択してみてください。

2015112700011

 

X座標を決定するウィンドウが表示されました。
では、ここに「移動する」という数式を表現してみましょう。

 


 

 

 

オブジェクトの移動は、「現在の座標」から一定のピクセルぶん位置をずらし、その連続によって生まれる動いているというアニメーションで表現します。(当たり前のことをわざわざ言うんじゃないと思われるかもしれないので、ややこしい言い方をしています)

これを数式で表すと、「弾オブジェクトの現在位置 + 移動速度」となります。
まずは移動速度を1として、こんなふうに数式を書いてみて、決定ボタンを押してみてください。
2015112700012

2015112700013

 

今、イベントリストエディタはこうなっているはずです。

 

2015112700014

 

「スペースキーを押して弾を作成」と、「作成した弾が常に移動する」という二つのイベントを記述できました。

 

 


 

 

 

■オブジェクトのプロパティ

さっそく、F8キーを押して結果を確認してみましょう!

2015112700015

でき……

!?

発射した弾以外に、画面の左側から弾が一個だけ飛んでくるというバグが生まれてしまいました。
このバグの原因は、さきほど画面外のグレーの部分に置いた、最初の弾オブジェクトが原因です。
かといって、エディタ上から弾のオブジェクトを削除してはいけません。そうすると、弾オブジェクトを作成するというイベントのほうまで壊れてしまいます。

 

 


 

 

 

■オブジェクトに変数を設定

このバグの問題は、「弾オブジェクトの最初の一個が画面上に存在している」ことにあるので、最初の一個を削除してしまいましょう。
弾オブジェクトを選択し、プロパティを表示します。
「ランタイムオプション」というページに、「作成オプション」→「開始時に作成」という項目があるので、このチェックボックスを外しましょう。

2015112700016

こうすれば、エディタ上に置かれている弾オブジェクトは、ゲームの実行時に作成されなくなります。
ついでに、弾の移動速度を変数に定義してしまいましょう。さきほど、イベントの中で数式に直接、移動速度を1と記述しましたが、数式に速度などのパラメータをベタ書きするのはおすすめできません。もしあとから移動速度を変えたくなったとき、10行程度のイベントならばまだしも、これが1000行、10000行ものイベントになったときのことを考えてみてください。(金属バットを持って家じゅうの電子機器を破壊して回りたくなるはずです)

そうならないよう、変数を活用しましょう。

 

 


 

 

 

弾オブジェクトのプロパティで、「値」のページを表示します。
「変数」の「新規作成」ボタンを押すと、「変数A」が作成されます。

2015112700017
2015112700018

この変数Aという名称は自由に変更できるので、「移動速度」としておきましょう。
さらに、値の部分には5と入力します。さきほどの五倍の速度です!

 

 


 

 

 

では、数式に変数を書き込んできましょう。
イベントリストエディタを表示し、弾オブジェクトの移動イベントをダブルクリックし、編集ウィンドウを表示します。
数式から忌まわしきベタ書きの1を削除したら、弾オブジェクト→「値」→「値AからM」→移動速度を選択しましょう。
2015112700019

2015112700020

イベントリストがこうなっていれば完成です!

ふたたび、F8キーで実行して確認してみてください。
左側から画面内に紛れ込んでいる弾オブジェクトは消えているはずです。スペースキーを押すたび発射される弾オブジェクトの速度は、さきほどよりも明らかに早くなっているはずです。

たった二行のイベントで、自機から弾を打ち出すゲームを作成することができました!
Clickteam Fusion 2.5 では、ある結果を得るための方法は1つに限定されないのです!!

logo3

 


 

 

 

■高速ループを使ったイベントの書き方

しかし、ゲームというにはやはり「敵」が欠けていますね。
今度は、画面上に「敵」のオブジェクトを配置してみましょう。
オブジェクトの配置方法はもうオッケーですよね!

イメージの編集でわかりやすく赤く塗っておき、名前も「敵」にしてしまいましょう。それから、「開始時に作成」のチェックも忘れずに外しておきましょう!

「開始時に作成」のチェックを外しているので、この「敵」オブジェクトは実行してもゲーム内に一つもない状態です。では、敵オブジェクトを生み出すイベントを書き込んでみましょう。
ふたたびイベントリストエディタへ移ります。

敵オブジェクトの作成も、基本はさきほどとまったく同じです!
しかし、オブジェクト作成をマスターした人にとっては全く同じでは退屈でしょうから、せっかくなので一歩進んで小技を覚えてみましょう。
ClickteamFusionの特徴的な機能の一つに、「高速ループ」というものがあります。これはいわゆる「for文」のことで、特定の処理を1フレームの間に何度も高速で実行するというものです。あまりピンとこないかもしれませんが、順を追って実装してみればどんなものかわかってくるはずです!
では実際に、「高速ループ」を使った敵オブジェクトの作成を実装してみましょう。
ここでは、「エンターキーを押したとき、敵オブジェクトを複数作成する」というイベントにしてみます。

 

 


 

 

 

このイベントのきっかけは「エンターキーを押したとき」ですから、さきほど同様に「キーボードとマウス」の項目から新しい条件を作成します。

2015112700021

ここからが「高速ループ」です!
まず最初に、「高速ループ」の開始を宣言します。

「特別」→「高速ループ」→「ループを開始」の順に選択してみてください。すると、次のようなウィンドウが表示されます。

2015112700022

 

2015112700023

ここで、ループの名前を決定します。日本語が使えるので、処理の目的や、どんなことをするループなのかを名前にしておくのがわかりやすいでしょう。名前を決定すると、次に「そのループを何回まわすか」を決定するウィンドウが表示されます。

2015112700024

 

 

ここでは、ひとまず3回という回数を設定して、高速ループの宣言を完了しましょう。
次はいよいよ、「高速ループが行われている間に実行されるイベント」を書き込んでみます。

「新しい条件」→「特別」→「ループが実行中」を選択してください。

2015112700025

2015112700026

するとイベントを書き込みたい高速ループの名前を聞かれますので、さきほどとまったく同じ、一字一句違わぬループ名を入力してあげましょう。コピー&ペーストが一番です。「正しい数式です」という緑色の表示がありますが、これはあくまで数式そのものが正しいかどうかをチェックしているだけなので、「入力した名前の高速ループが存在するかどうか」などまではチェックしてくれません!

 

 


 

 

 

「ループが実行中」というきっかけを書き込んであげたら、その中に「敵オブジェクトを作成する」というイベントを書き込んで上げましょう。
イベントリストエディタはこのようになっているはずです。

2015112700027

ちょっと待って! このまま実行してテストしようとしてはいけません。
なぜならこのままでは、まったく同じ場所にオブジェクトが作成されてしまうため、見た目上でいくつのオブジェクトがつくられたのかわからないからです。そこで、敵オブジェクトの位置をバラバラにランダム配置するイベントを書き込んであげましょう。

4行目のイベントを右クリックし、「挿入」を選択します。これは、同じきっかけの中に複数のイベントを書き込むときに必要なコマンドです。

やらなければならないことは、「敵オブジェクト」の「位置」をランダムにすることなので、敵オブジェクトを選択し、「位置」から「X座標を変更」を選択します。

2015112700028

 

 


 

 

 

数式エディタが開いたら、「乱数生成」のボタンを押してみてください! Randomという数式が呼び出されるはずです。
これはその名の通り、0から入力された数までの範囲内で、どれか一つの数字を選択するという数式です。たとえばRandom(10)のように記述すれば、「0から9までの10の数のうち、どれかが選択される」という結果になります。(数え始めが0からであることをよく覚えておきましょう。)

2015112700029

ここでは、「ゲーム画面内のいずれかの座標」を選択したいので、入力する数は「画面の幅」になります。手打ちで600とか700とか入力してしまってもいいですが、ここは確かな答えを持っているものに聞きましょう。画面の幅などの情報を持っているのは、「ストーリーボードコントロール」と呼ばれるオブジェクトで、このチェス盤のようなアイコンをしています。
「動作領域」→「幅」を選択してみましょう。するとFrame Widthというプロパティが呼び出されますが、これが画面の幅という数値を常に記憶して持ってくれています。

2015112700030
同じように、Y座標の位置もランダムにしてみましょう。Y座標は画面の高さからランダムに座標を選択するので、Random(Frame Height)というような形になります。

 

 


 

 

 

さて、今イベントリストエディタはこうなっているはずです。

2015112700031

さっそく実行してみましょう!

2015112700032

エンターキーを押すたび、画面上のランダムな位置に敵オブジェクトが三つ作成されたでしょうか?
そして、さきほど高速ループを定義した際に決定した回数が、そのまま作成される敵の個数になっているのがおわかりかと思います!

高速ループの回数を変更すれば、その回数だけ敵を作成するイベントを作成することができました。

高速ループの回数には変数を使うことができるので、今回の例であれば敵を作成する個数をゲーム中に自在にコントロールすることも可能です!

 


 

 

 

お疲れさまでした!
残念ながら習作の完成まではまだ到達できていませんが、CF2.5での制作の仕方について、イメージできたでしょうか?
このテキストが少しでもCF2.5導入の手助けになれば幸いです。

Clickteam Fusion 2.5 では、ある結果を得るための方法は1つに限定されないのですから!!
logo4