ブロック崩し

シェアする

この記事の所要時間: 2350




はじめに

ゲーム100本製作修行「100つく」の第1回目は『ブロック崩し』です。

私はヘルプファイルもろくに読まず、予習もチュートリアルもほとんどやっていませんが、CF2.5はプログラミング知識ゼロでもブロック崩しくらいなら簡単に作成できるとのことなので、まずは初歩中の初歩からはじめてみます。

グラフィックを準備

ブロック崩しに必用なグラフィックは、自機、ボール、ブロック、壁の4つですね。

グラフィックツールで用意します。

私は主に『EDGE』というフリーのドット絵エディタを使用してグラフィックを作成しています(Asepriteもたまに使用します)。

今回、用意したグラフィックもEDGEを使用しました。

サイズは128×128です。こんなにちいさくても大丈夫!

(こちらのグラフィックは右クリックの「名前を付けて画像を保存」で、ご自由にダウンロードしてご利用くださいませ)

用意したグラフィックは、CF2.5側で読み込んだあとに拡大して使用します。

なにせ100本のアプリを作るので、これから大量に用意するグラフィックのドット数をサーバ容量的にも製作時間短縮のためにも極力すくなくしようという工夫です。

CF2.5の起動と初期設定

新規作成をクリックしたのち、ゲームのウインドウサイズは256×256に設定します。

ウィンドウのサイズを変更すると、フレームサイズをウィンドウサイズに合わせるか否かを問うダイアログが開きますので、今回はそのまま「はい」を選択します。

このような白い四角形が画面の中心に表示されました。

これがゲーム画面になります。

今はまだ真っ白な状態なので、グラフィックを読み込んで配置していきます。

オブジェクトの配置

各種グラフィックをオブジェクトとして配置していきます。

今回使用するオブジェクトは下記の通りです。

  • アクティブオブジェクト
  • 背景オブジェクト
  • クイック背景オブジェクト
  • カウンタオブジェクト
  • 文字列オブジェクト
  • ライフオブジェクト

まずは自機を読み込んで配置します。

「右クリック」→「オブジェクトを挿入」→「グラフィックとアニメーション」→「アクティブ」の順にクリックします。

カーソルが「+」に変わるのでフレーム編集画面のどこかを左クリックすると緑色の四角形が配置されます。

この緑色の四角形が「アクティブオブジェクト」です。

グラフィックは大まかに分けて、操作キャラや敵キャラなど動きのある「アクティブオブジェクト」と背景や障害物など動きのない「背景オブジェクト」があります。

自機は操作して動かすので基本的にはアクティブオブジェクトを使用します。

この緑色の四角形を先ほどのグラフィックに変更します。

アクティブオブジェクト(緑色の四角形)を右クリックし「編集」を選びます。

編集画面が開くので、ファイルを参照して用意したグラフィックをインポートします。

インポートした画像では1枚絵にすべてのパーツをまとめて書いてあるので、部品ごとに分けて取り込む必用があります。

「イメージモードオプション」の「選択範囲のインポート」を選んだら「選択」を押して、読み込む範囲を選択します。

その前に、画像が小さいのでマウスホイールなどで見やすい大きさに拡大しましょう。

まずは自機をインポートします。青と白の点線で囲まれた部分が読み込む範囲になります。

初期設定では真っ黒の部分(RGB=0,0,0)は透過色扱い(透明)になります。

自機を読み込むことができましたが、読み込んだ画像のままでは小さいので2倍の大きさに拡大します。

拡大ツールを選択し、「横列比保持」と「引き伸ばし」にチェックを入れます。

幅の数値を倍に増やします。

この場合ですと「24」から「48」に変更し「適用」を押します。

今の状態では透明の余計な部分も選択しているので、 トリミングアイコンを押してトリミングします。すると、自機は15×15のサイズになりました。

つぎに目のマークと光のマークを押して、ホットスポットとアクションポイントを設定します。

ホットスポットはオブジェクトの中心点(操作するときに基準になる位置)で、アクションポイントは動作の中心点(弾を発射する場所などの位置)です。

座標を入力したりマウスクリックで変更できますが、今回は「クイックムーブ」により変更します。

9個ならんだマスの中から真ん中のマスを押して、中心にホットスポットを変更します。

アクションポイントも同様に変更してください。

アクションポイントの変更が終わったら「ok」を押して編集画面を閉じます。

さきほどグラフィックをインポートしたアクティブオブジェクトを右クリックします。

「名前を変更」を選び、「自機」に名称を変更します。

このように「自機」を配置した手順を繰り返し、ボールやブロックもアクティブオブジェクトとして配置します。

わかりやすくするため、このように、画面の左側にすべて並べています。

それぞれの名前を自機、ボール、ブロックの色で名前を変更しています。

背景の設置

「オブジェクトを挿入」→「バックグラウンド」→「背景」の順で選択し、背景オブジェクトを設置します。

背景オブジェクトは画面内(白い四角内)の一番左上(X0,Y0)の座標にに設置してください。

グリッドを使用すると指定した単位だけオブジェクトが移動するので、グリッドオプションを利用してもいいでしょう。

背景オブジェクトは初期のままでは風景写真のようなアイコンで表示されます。

プロパティの一番左にある設定タブからイメージを変更します。

アクティブオブジェクトでグラフィックをインポートしたように、青い背景用のパーツを範囲選択して読み込んでください。

背景パーツを右クリックし「複製」を押します。

行を8、列を5に設定してOKを押してください。

すると、指定した数だけ背景パーツが複製されます。

次に、メニュー用の「クイック背景オブジェクト」を設置します。

クイック背景は初期の段階だとグレーの四角形として表示されています。

クイック背景オブジェクトを右クリックし、設定タブから種類を「単色」、色を「RGB=0,0,0」に設定します。

プロパティからサイズと位置を変更します。

位置は「X=160、Y=0」に、サイズは「幅=100、高さ=256」に設定します。

次に壁(枠)を設置していきます。

壁もクイック背景を使用しますので、先ほどと同じ手順でグレーの四角を設置してください。

クイック背景のグラフィックを変更するため、プロパティの設定タブを開きます。

「種類」をテーマに変更し「編集」のボタンでグラフィックをインポートします。

これまでの手順と同じように、横向きと縦向きの壁用パーツを読み込みます。

読み込んだ壁パーツを左右と上に設置します。

「背景オブジェクト」で角のパーツとアクセントのパーツもインポートして読み込み設置します。

画像では周囲をぐるっと囲っていますが、下側は開けておく必用があるので実際には壁を取り除いてください。

参考画像の画面が大きくなっていますが、これは上部メニューの「表示」→「拡大/縮小」で編集画面の表示を200%に拡大しています。

これは編集画面のみを拡大しているので、実際のゲームには反映されません。

拡大することで編集がしやすくなるので、今回そうしています。

ゲーム画面が大きくて全体図を縮小して見たいときは、100%以下に設定してもいいでしょう。

ブロックの配置

次にブロックを並べていきます。

ブロックをクリック(選択状態に)して「Ctrl+C」でコピーし、「Ctrl+V」でペーストします。

8色のブロックを横一列に並べたら、それぞれ「オブジェクトを複製」で行(縦)を7つに複製します。

ブロックの位置を微調整して綺麗に整列させます。

「オブジェクトを挿入」→「テキスト」→「文字列」で文字列オブジェクトを2つ設置してください。

続けて、「オブジェクトを挿入」→「データ」→「カウンタ」でカウンタオブジェクトを2つ設置してください。

それぞれ、スコアとハイスコアに使用します。

文字列オブジェクトは文字を表示します。

カウンタオブジェクトは数値などを増減させて表示します(非表示も可能です)。

文字列オブジェクトを編集し、それぞれ表示する文字列を「Score」と「High Score」に変更し、色も白と赤に変更してください。

カウンタオブジェクトも種類を「テキスト」に変更し、色を白に変更してください。

カウンタと文字列を右の黒いメニュー部分に配置し、自機とボールも画面内に配置してください。

あとは、残機を表示するための文字列と「ライフ」のオブジェクトも配置します。

ライフオブジェクトは、イベントエディタで簡単に増減が可能なので今回は残機の判定に使用します。

ライフのイメージは初期だと「」のマークですが、これをプロパティから自機オブジェクトに変更します。

すべて配置し終わったら、左に縦一列に並べたオブジェクトは削除しましょう。

すると、下の画像のようになります。

これで、まずは「ビジュアル面」の部分だけが完成しました。

おおー!なんか、すごくそれっぽい!!

「F7」キーを押して、実際のゲーム画面を開いて確認してみましょう。

このままではまだなにも動かすことのできない「一枚絵」の状態です。

つぎのページでは、イベントエディタでゲームとしての命を吹き込んでいきます。

ここからが本番ですよ!