javascript(ct.js)で初心者でもできる!簡単ゲーム開発#1ー1tutorial:spaceshooter

ct.jsで初心者がゲームを開発してみる。

ct.jsって?

「GUIからゲームの開発ができる」というフリーのプラットフォームです。 jsの他のゲーム用ライブラリにはphinaJSやphaserJS(これが今一番流行ってるのかな?),melonJSやenchantJS(これはしばらく更新されていないよう)等ありますが、どれもコードを直接書くものです。調べてみると他にもGUIで開発できるものはあるみたいです。

実際にct.jsを触ってみる。

ct.jsのインストール方法は簡単ですので省きます。わからない方はググってみてください。 以下、公式ドキュメントのMakingGames:SpaceShooterの実践です。解説ほどほどに書いていきます。


まずはテクスチャーをインポート

こちらから画像をダウンロードしておきます。 ct.jsを起動し、適当にプロジェクト名を付けて「Create new」を押下。

「Textures」タブから「Import」を押下。必要な画像ファイルをインポートします。(今回は下図のようにすればOK)

以降、画像のことを「テクスチャ」と呼ぶこととします。

テクスチャの設定・衝突判定を設定する。

「playerShip2_blue」をクリック。 画面が遷移したら「Image’s center」をクリックし、「Collision shape:」を「Line Strip/Polygon」を設定します。

「Add a point」をクリックして頂点を追加したり点をドラッグ&ドロップで動かして自分の好きな当たり判定に修正します。 修正が完了したらSaveをクリック。 他のテクスチャ(背景用のテクスチャ「black」は除く)についても同様に設定してください。

マウスでスクロールすることでテクスチャを拡大、黄線上をクリックすることでポイントの追加、ポイントをクリックすることでポイントの削除をすることができます。

「Collision shape:」を「Rectangle」とすればレーザーのような長方形は「Fill」を押下することで自動で修正してくれます。

型を作る

次に型(Types)を作ります。この型から作られたオブジェクト(Copies)をキャンバス(Rooms)に設置することで画面に描画するなど様々な処理を行うことができます。

まず、「Types」タブから「Create」を押下

画面左「Change sprite」を押下し青の機体テクスチャを選択。適当な名前を付け、「Done」をクリック。他のテクスチャ(背景用のテクスチャ「black」は除く)にも同様の作業を行います。

以下、この画像内のTypes名称を利用する場合があります。

キャンバス(Rooms)へ設置する

「Rooms」タブの「Add new」を押下。

画面左の型を選択し、オブジェクトを設置したい場所を右画面でクリック。自機と敵機と2つの隕石を適当に設置します。

画面左のタブを一つ右に移動し、「Add a Background」を押下し、背景画像(black)を追加します。
追加すると右画面は背景画像のみ表示される状態になります。そこで、追加された「black」の右側の歯車マークをクリックしてDepth:を「-5」に設定します。
これによってテクスチャの優先度付けをすることができます。数字が大きいものほど手前に表示されるようになります。

この時点で「Launch」タブをクリックしてみます。下図のように表示されればここまでは完璧です。

プレイヤーの動きを追加する。

「Project」タブから「Catmods」を選択し、開発で利用するモジュールを有効化します。 後で利用するものも含めて、「Keyboard」「Mouse Input」「ct.place」「ct.random」を有効にしてください。(最初から有効になっているものもあるかもしれません。) 各モジュールの右側の丸が緑でチェックマークが付いていれば有効ということになります。

次に「Project」タブの「Actions and input methods」からキーボードの入力やマウスの入力時の動作メソッドを設定します。「Add an action」を押下し、適当な名前を付けて下図のように設定します。
「Multiplier」はデフォルトは1ですが、「MoveY」の「keyboard.ArrowUp」や「MoveX」の「keyboard.ArrowLeft」については-1を設定します。キャンバスでは画面左上が(x,y)=(0,0)となります。xが増えると右へ、yが増えると下へ移動することになります。その逆に移動したい「keyboard.ArrowLeft」や「keyboard.ArrowUp」は(x,y)を減らしたいので-1を設定します

記事が長くなりすぎたので分割ししました。(2020/10/29更新)

記事が長くなりすぎてしまったため、一旦ここで終了とさせていただきます。
ct.jsの公式docは日本語はありませんが、簡単な英語と図で構成されていますので、是非読解チャレンジしてみてください!

質問などありましたらお気軽にどうぞ。

コメントを残す

メールアドレスが公開されることはありません。

RSS
Follow by Email