【HTML5】Construct2をインストールしてサンプルを動作させてみた

■環境

PC : lenovo Edge 13
OS : Windows7 64bit

■インストール

1. ダウンロード

https://www.scirra.com/construct2/releases/r139/download
から最新版のConstruct2をダウンロードします
今回ダウンロードできたインストーラはconstruct2-r139-setup_16873096.exeでした
インストーラを実行してインストールしていきます
自動アップデートをしますかという設定を聞かれるところがありますが基本はONでいいと思います
グラフィックドライバとかが最新になっているかもチェックしてくれます
最新でない場合はドライバのダウンロードサイトに移動してくれます

2. サンプル作成

新しプロジェクトを作成します
左上のメニューから作成できます


プロジェクトのタイプを選択できます
プラットフォームごとにいろいろと選択できますが今回はモバイル用のプロジェクトを作成します
※マウスやキーボードを使う場合に「New retro style project」を選択する必要があります、モバイルのプロジェクトの場合はタッチ系の操作しか扱えません


以下の背景用画像をダウンロードします
https://www.scirra.com/images/articles/bg.png
右ペインのレイヤー上で右クリックから「Insert new object」をクリックします


表示されたダイアログから「Tiled Backgroud」を選択してInsertをクリックします


レイヤー上のどこかに配置するとEdit imageのダイアログが表示され背景を設定することができます
今回は先ほどダウンロードした背景を設定します
先ほどダウンロードした背景画像を選択するとEdit image上に背景が表示されるのでダイアログを閉じます




レイヤー上に背景が追加されるので大きさを調整します
レイヤー上に薄く点線が記載されていると思いますのでそれに大きさを合わせます
これで背景の設定は完了です


次にプレイヤー用のオブジェクトを一つ追加します
以下の画像をダウンロードしておきます。
https://www.scirra.com/images/articles/player.png
背景を追加したときと同様に同様にレイヤー上で右クリックしInsert new objectを選択します
今度はSpriteを選択してInsertをクリックします


レイヤー上に追加すると再度Edit imageのダイアログが表示されるので再度「Load an image from a file」から先ほどダウンロードしたプレイヤー用の画像を選択してレイヤー上に追加します
以下のようになればプレイヤーの追加は完了です


次にこのプライヤーを動かして見ます
単純に右にずっと移動させてみたいと思います
タブをEvent sheetに切り替えます
Add eventをクリックするとダイアログが表示されますのでSpriteのプレイヤーを選択します


イベントを選択ダイアログで「Is betweet angles」を選択します
First angleとSecond angleを入力するダイアログが次に表示されるのでデフォルトの値のままDoneをクリックします


イベントを追加できたら次にアクションを追加します
「Add action」をクリックします


アクション追加のダイアログが表示されたら「Move forward」を選択してNextをクリックします
次のダイアログでDistanceを選択できます
Distanceは移動速度を調整できます、ここでは「10」くらいでいいと思います


アクションの追加が完了したら実際に動作するところを確認してみましょう
左上のメニューから実行ボタンを押下するとブラウザが立ち上がりサンプルが動作し始めます
今回はプレイヤーが右に動くだけですが、とりあえず動作することは確認できると思います

とりあえず今回は以上ですが、公式サイトのドキュメントが非常に充実しているので簡単なゲームでしたらすぐに作れると思います

Construct2は有料版があり、有料版は機能が変わってきます
http://www.scirra.com/store/construct-2

■参考サイト

Construct2チュートリアル