ゲーム用 Windows ストア アプリテンプレート (ブロック崩し編)


「ブロック崩し」って、たまにやりたくなりますよね?

アプリのストアで検索してインストールしてみるものの、なんか違うんだよなー、ということがありませんでしょうか?
いろいろインストールしてみるものの、なんかしっくりこない、なんか違う、満足できない。
そういった不満を一気に解決する究極的にして絶対的な方法があります。
それは「自分で自分の欲求を充分に満たす自分だけのブロック崩しを作る」という方法です。
しかしながらイチから作るのは結構面倒です。

そういった方々のためにブロック崩しゲームの Windows ストア アプリ用テンプレートを作ってみました。(Windows 8.1 用)

このテンプレートを使用すると、既定の状態で簡単なブロック崩しゲームができるようになっているので、開発者の皆さんはブロックの画像や、背景画像を差し換えたり、ブロックの出現バターンのロジック (単純な 2 重ループ文で書かれています) を書き換えたりして自分だけのブロック崩しゲームを作ってみてください。

image
(プロジェクトを実行したところ)

プロジェクト テンプレートの入手

以下の URL から zip ファイルをダウンロードしてください。

https://win8apptemplate.codeplex.com/downloads/get/823372

プロジェクトテンプレートのインストール方法

ダウンロードした zip ファイルを解凍せずに以下のフォルダに配置します。

ドキュメント\Visual Studio 2013\Templates\ProjectTemplates\JavaScript

配置後、Visual Studio 2013 を起動し、メニュー [ファイル] – [新規作成] – [プロジェクト] を選択して [新しいプロジェクト] ダイアログボックスを表示します。
同ダイアログボックス左の [テンプレート] ツリーで「JavaScript」を選択すると、テンプレートリストに「BrockBreaker」というテンプレートが表示されるので選択して [OK] ボタンをクリックしてください。

image(インストールしたプロジェクトテンプレートが表示されたところ)

プロジェクト作成後、キーボードの [F5] キーを押下すると、簡単なステージが開始されます。

このテンプレートには 3 ステージ用意されています。

カスタマイズ方法

(※) ここに記載されている内容は、プロジェクトに含まれる Readme.txt にも書かれています。

はじめにしなければならない変更

  1. /pages/settingFlyout.html の内容を作成しているアプリの説明に書き換えてください。
    既定ではテンプレートの説明になっているので、作成したゲームを Widows ストアに公開する際、審査を通りません。
  2. default.html の <h1 id="gameTitle"> 内に自分が作成するゲームのタイトルを記述してください。

パッケージ化する際にしなければならない変更

ロゴやスプラッシュ画面を自分のアプリ用に変更します。
具体的な手順は以下の通りです。

  1. [ソリューションエクスプローラー] で package.appxmanifest をダブルクリックします。
  2. package.appxmanifest の UI 画面が表示されるので、[ビジュアル資産]タブを選択します。
  3. 同タブ左側のツリービューを展開し、既定の画像が指定されているものを、新たに作成した自分アプリ用の画像に差し替えます。

この作業はアプリを Windows ストアに提出する前に必ず行ってください。
ビジュアル資産に既定の画像が含まれていると Windows ストアの審査に合格しません。  

テンプレートを改造する際のポイント

■ 背景画像を変更するには
プロジェクトに新たに背景に使用する画像を追加し、
定数 ASSET_BACKGROUND_IMG01 ~ ASSET_BACKGROUND_IMG04 に設定してある画像へのパスを変更してください。

■ 背景画像を表示しないようにするには
routingStage 関数内の case 文内に記述してある thisGame.initCtrls.createBricks(); を以下のようにコメントアウト

//thisGame.initCtrls.createBricks();

■ 背景色を使用するには
背景画像を表示しないようにしたうえで、routingStage 関数内の case 文内に記述してある以下の文のコメントアウトを解除します。

currentScene.backgroundColor = thisGame.SCENE_BK_COLOR;

色の指定は手数 SCENE_BK_COLOR の内容を任意の色名に変更してください。

■ ブロックの画像を変更するには
幅 100px 縦 50px の画像を用意し、エクスプローラーから直接 Visual Studio IDE 内の [ソリューションエクスプローラー]に画像ファイルを img フォルダにドラッグします。
main.js 上部で宣言されている変数 ASSET_PIC_BRICK~ASSET_PIC_BRICK6 の内容を新しく追加した画像のパスに書き換えます。

■ ブロックの画像を追加するには (ブロックの行数を増やしたい場合など)
幅 100px 縦 50px の画像を用意し、エクスプローラーから直接 Visual Studio IDE 内の [ソリューションエクスプローラー]に画像ファイルを img フォルダにドラッグします。
[ソリューションエクスプローラー]への画像の追加が確認できたら、main.js 内、createGame 関数の game.preload メソッドに以下のように画像ファイルのパスを追加します。

※"img/NewImageFile.jpg" 追加の例
  //使用する画像のプレロード
  game.preload(thisGame.asset_pic_bar,
    thisGame.asset_pic_ball,
    thisGame.asset_pic_leftSwitch,
    thisGame.asset_pic_rigthSwitch,
        ( ~ 略 ~ )
    thisGame.ASSET_BACKGROUND_IMG04,
    "img/NewImageFile.jpg");

追加した画像ファイルを表示させるには createBricks メソッドで brickImageArray 配列に設定します。
以下の例では、一番上の段に表示されるよう指定しています。

  //各行ごとに違うブロックを出すために配列に画像を設定
  var brickImageArray = [
      thisGame.game.assets["img/NewImageFile.jpg"],
       thisGame.game.assets[thisGame.ASSET_PIC_BRICK],
      thisGame.game.assets[thisGame.ASSET_PIC_BRICK2],
         ( ~ 略 ~ )
       thisGame.game.assets[thisGame.ASSET_PIC_BRICK6]
   ];

■ 表示されるブロックの数、パターンを変更するには
このテンプレートでは、ステージごとにブロックを描画するメソッド createBricks、createBricks2nd、createBricks3rd、createBricks4th が用意されています。
これらメソッド内の 2 重ループでブロックを描画しているので、内容を参考に改造してください。
ちなみに変数 BRICK_ROW_COUN ブロックの縦の個数で、BRICK_COL_COUNT が横の個数です。

■ ステージ数を減らすには
main.js 上部で宣言している変数 MAX_STAGE_NUMBER の値を減らしたステージ数ぶん引いてください。
次に routingStage メソッド内の case 文から条件を削除してください。

■ ステージ数を増やすには
main.js 上部で宣言している変数 MAX_STAGE_NUMBER の値を追加したいステージ数ぶん増やしてください。
次に createBricks メソッドの内容を参考に、新たにブロックを描画するメソッドを定義します。
最後に routingStage メソッド内で case 文に追加したメソッドに分岐するよう条件を追加します。

■ ボールのスピードを調整するには
ボールの既定のスピードを変更するには、main.js 上部で宣言している変数  BALL_INIT_SPEED_X、BALL_INIT_SPEED_Y の値を変更します。
増やすと早くなり、減らすと遅くなります。
プログラム中で変更するには、任意の位置で thisGame.ctrl_ball オブジェクトの dy、dx プロパティを変更します。
以下の例ではボールのスピードを 1.2 倍しています。

var ball = thisGame.ctrl_ball;
  ball.dy = ball.dy * 1.2;
  ball.dx = ball.dx * 1.2;

■ バーのスピードを調整するには
バーの既定のスピードを変更するには、main.js 上部で宣言している変数 BAR_INIT_SPEED の値を変更します。
プログラム中で変更するには、任意の位置で、変数 thisGame.bar_speed の値を変更します。
以下の例ではバーのスピードを 10 に変更しています。

thisGame.bar_speed = 10;

--------

注意事項:
・すべてのシナリオでテストしているわけではありませんので、予期せぬエラーの可能性があります。
・WACKテストは合格していますが、このテンプレートで作成したアプリがWindowsストアへ公開されることを保証するものではありません。

ゲームエンジンについて

このゲームは 株式会社ユビキタスエンターテインメントが提供する HTML5 ゲームエンジン enchant.js を使用しています。
enchant.js の使い方など詳細については以下のサイトをご覧ください。

enchant.js - A simple JavaScript framework for creating games and apps.
http://enchantjs.com/ja/

おしらせ

html5j が主催する HTML5 コンテンツのコンテスト「HTML5 Japan Cup」が開催されます。

HTML5 Japan Cup
http://5jcup.org/

       

日本マイクロソフトもスポンサード予定です。

Windows ストア アプリ部門では、アプリのインストールイメージの提出が必要になりますので、このドキュメントの「Windows ストア アプリ テスト用インストールイメージの取得」の手順にしたがいインストールイメージを取得して提出してください。

皆様の力作のご応募、心よりお待ちしております。

Real Time Analytics

Clicky

Comments (0)

Skip to main content