「Construct2」でゲームを作る【1】

c2_title02

今回は「前回の記事」に引き続き「Construct2」を実際に使いながら、ゲームを作っていきたいと思います。


以前の記事では「Construct2」というかなり優秀なゲーム制作ツールがあるという事について紹介しました。ですが、ソフトの良い所を紹介して終わり、だと投げっぱなし感がしたので、Construct2の使い方についてもこのブログで色々紹介して行こうと思いました。……いつまで続くか分かりませんが。

今回はConstruct2(以下C2)を使ってみるということで、細かい設定などの説明は省略して、Construct2を使用してブラウザ上でキャラクターを動かす方法について紹介したいと思います。画面上でキャラを動かすだけなので「ゲームを作る」と言うのか微妙な所ですが、一気に説明するのは無理なので、複数回に分けて紹介していく予定です。

難しい用語は極力使わないように努力したつもりですが、もし分からない言葉があればGoogle先生に聞いてくださいね。


0:Construct2のインストール

一応この記事は前回の記事を見て、C2に興味を持ちダウンロードした方に向けて書いていますが、まだソフトをダウンロードしていない方は公式サイトの「Download Now」からダウンロードしてください。ちなみにSteam版もあるので、Steamで管理したい方は参考まで。

1:新しくゲームを作ってみる

とりあえず、C2を起動してみましょう。
c2_0201
最初にこのようなC2有料版の購入案内ウィンドウが出てくると思います。無料版では毎回起動する度に出てきます。ですが今は無料版を使いたいので右上の「×」ボタンをクリックしてください。ウィンドウが閉じます。

すると、中央のウィンドウにこの画面が出てきます。
c2_0202
○各メニューの解説

  • Start…新しいプロジェクトの作成、製作中のプロジェクトを開いたりする。
  • Project Examples…サンプルゲーム。
  • Recent Projects…最近開いたプロジェクトを開く。
  • Useful Links…操作マニュアルや各種チュートリアル。(これを一通り読めば、作りたいものは大体作れます。)

C2でゲームを作成・保存するには「プロジェクト」(ゲームに必要なファイルをひとまとめにしたもの)を作る必要があります。Startから「New Project」をクリックしてください。
c2_0203
色々なテンプレートが出てきます。

新しくゲームを作る場合、右上が折り曲がっているアイコンを選べば新規プロジェクトが作成されます。私は今回、上から二番目の「SD/Landscape/4:3」のプロジェクトを選びました。(landscapeで横長、portraitで縦長の画面)

また下の方には色々なジャンルのゲームの作例が入っているため、今後色々なジャンルのゲームを作る時に参考になると思います。

2:ウィンドウの説明

新しいプロジェクトを作ったら、このような画面になります。ここでは画面の解説をしやすくするために、各ウィンドウに色を付けています。
c2_0204

○各ウィンドウの解説

  • Ribbon…MicrosoftのOfficeシリーズでおなじみリボン。よく使う操作などがここに収まっている。
  • Propeties…プロパティウィンドウ。ゲーム全体の設定や、選択したオブジェクトの細かい設定を行う。
  • Layout View…ゲーム画面。ここで画像の配置を行う。
  • Eventsheet View…ゲーム中のイベントの管理を行う。
  • Project…プロジェクト内にある全てのデータを確認できる。
  • Layer…レイヤーの追加や削除、表示・非表示を切り替える。

基本的なゲームを作るのに使うのは大体これくらいです。今回紹介しなかったウィンドウについては、また別の機会に解説したいと思います。

3:キャラクターを置いてみる

まずは画面上にキャラクター(ゲーム画面中に表示させる画像キャラクターの事を「スプライト」とも呼びます。)を表示させてみたいと思います。私が今回使うのはこの車の画像。ここで使う画像はウィンドウサイズ(縦680px、横480px)以下のサイズの物であれば何でもいいです。
c2_0205

フォルダ内のキャラクターの画像ファイルをLayout Viewにドラッグ&ドロップしましょう。Layout Viewに先程の画像が表示されていれば完了です。お疲れ様でした。

……これだけでは短いので、別の方法でもやってみることにします。

Layout Viewの白い画面内の適当な所でダブルクリックすると、このウィンドウが出てきます。
c2_0206
これはゲーム内に挿入するオブジェクトを選択する画面です。「Sprite」をクリックして、右下の「insert」ボタンを押します。すると、マウスカーソルが十字になるので、Layout View内の配置したい場所でクリック。
c2_0207
何だか一気にウィンドウが出てきました。これはスプライト画像編集用のウィンドウ一式です。

このウィンドウから1からキャラクター画像を制作することも出来るのですが、今回は先程のキャラクター画像を使いたいので左上の二番目にあるフォルダのアイコンをクリック。すると画像を選択するウィンドウが出るので、キャラクターの画像を保存してあるフォルダを選択し、画像を開いて下さい。これで先程同様、Layout Viewにキャラクター画像が表示されます。

4:イベントを追加する

「イベント」とは、キャラクターの動作やゲームの開始、終了などといったゲームの様々な要素を設定するためのものです。

先程配置したキャラクターに動きをつけてみましょう。Layout Viewの上にあるタブから「Event sheet 1」をクリックします。
c2_0208
すると、Layout ViewがEventsheet Viewに切り替わり、この画面が出てきます。この時点ではまだ何もイベントを設定していないため、白紙の状態です。

左上に紫の文字で「Add event」と書かれているのでここをクリックします。
c2_0209
新たにウィンドウが出ました。今回は「System」と書かれた歯車のアイコンをクリック。
c2_0210
そして「General」メニュー内にある「Every tick」を選択し、右下の「Done(決定)」をクリック。
c2_0211
先程選択したものが追加されました。

今追加したのはイベントの「前提条件」となる部分です。大抵のプログラムは「~のとき(条件)に~する(動作)」と書く必要があります。先程指定した条件は「すべての瞬間」、つまりゲームを起動中常に実行される動作のことです。

続いて動作の方を追加していきましょう。

「Add action」をクリックし、今度は配置してあるキャラクター画像を選択してください。
c2_0212
下にスクロールしていき「Size & Position」メニュー内にある「Move forward」(前進)を選択して「Next」へ
c2_0213
Distance(前進で移動する距離)を聞かれました。この数値が多いほど、キャラクターがより高速で移動します。ここの数字は何でも良いのですが、今回は「3」と入力し、「Done」をクリック。
c2_0214
このように表示されていれば、イベントの追加は完了です。

5:動作を確認する

それではイベントがちゃんと動くかどうかをブラウザで確認します。ブラウザは最新版のものであれば何でも良いですがHTML5ゲームの場合「Google Chrome」が一番良く動作します。Chromeを入れていない人は動作確認用にインストールしておくと良いです。

RibbonのHomeタブから「Run layout」を選択。メインで使用しているブラウザが立ち上がり、ゲーム画面が表示されます。

キャラクターが右に移動していればOKです。お疲れ様でした。


C2のゲーム制作は、基本的にこの3~5の工程(素材の配置→イベントの設定→動作の確認)の繰り返しとなります。あとはサンプルゲームのプロジェクトを開くと、どのようなイベントが組まれているかを見られるので、これを参考にしていくと良いでしょう。

今回はここまでになります。残りはまた次回に。