ニコ生ゲームを作ろうと思ったらすぐ作ろう その2

第2回は前回起動したサンプルゲームの改造の仕方を説明していきます。

さすがにサンプルゲームはシンプルゲームなので、そのままの投稿は気が引けます。

 

簡単にゲームを変えるのにどういう事ができるか。基礎的な変更から紹介します

 

■目次

【改造の準備】

【改造内容】

  • キャラクターの動きを変える (数字を書き換える)
  • 残弾数を決める (数値を記録する)
  • 残弾ゼロで打てなくする (条件をつける)

 


 

【改造の準備】 ダウンロードしたファイルについて

改めて前回ダウンロードしたファイルを見てみましょう。

こういうフォルダ構造になっているはずです。

  namage

   └ sample
      ├ audio
      ├ image
      ├ script
         ├ main.js
         └ その他のファイル
      ├ text
      ├ game.json
      └ その他のファイル

 

これからメインに編集するのは「main.js」です。

まれに「game.json」も編集しますので、軽く覚えておいてください。

音素材を追加する場合はaudioフォルダに入れます。画像素材はimageフォルダ。

フォントに関するファイルをtextフォルダに入れることもあります。

 

今回はダウンロードしたファイルはそのまま置いておいて、名前を変えたコピーを作りましょう。

sampleフォルダごとコピーアンドペーストしましょう。フォルダの名前は何でもいいですがkaizouあたりにします。

これだけでゲームのコピーができます。特に設定はありません。



【改造の準備】 テキストエディタ

さてここからmain.jsを編集していきますが、Windowsのメモ帳では流石に難しいです。

 

一番オススメなのは、プログラマ用のエディタです。文字を自動で色分けしてくれたりするのが非常に便利です。

Visual Studio Codeというのが評判が良いのですが、日本語化が必要です。日本語化のやり方を調べて導入できそうな方はぜひ導入してください。ちなみに私は存在を知らなかったのでAtomというのを導入しました。こちらも英語ですが悪くはないと思います。

 

あ、そういうのはちょっと…という方はシンプルなテキストエディタでも可能です。

フリーソフトTeraPadや様々なテキストエディタが公開されていますので、好きなのを使ってください。

 

【改造の準備】 main.jsの中身

つぎにmain.jsの中身を見てみると、よくわからない呪文が116行も並んでますね。

例のごとく内容はほとんど説明しませんが、全体の流れ「カッコ」がどのように配置されているかが最低限わからないと、どこに編集を加えていいのかわからないはずです。

 

今回のプログラムに改行を入れて区切りを入れ、11個のセクションに分けてみます。


 


セクション名だけで記載するとこういう構造になっています。

  (1)  プログラム はじまり
  (2)    ゲームの準備
  (3)    ゲーム部分 はじまり load
  (4)      プレイヤー 配置
  (5)      スコアと時間表示 配置
  (6)      画面タッチ はじまり
  (7)        画面タッチ処理
  (8)      画面タッチ おわり
  (9)      常に更新する処理
  (10)   ゲーム部分 おわり
  (11) プログラム おわり


カッコ {   } や(  )で括られた階層構造になっていて、はじまりーおわりで対になっています。

改造で編集する箇所は、基本的に(4)~(9)のゲーム部分(loadの中)です。


【改造内容】 プレイヤーの動きを変える (数字を書き換える)

まずプレイヤーの位置を左にずらしましょう。

プレイヤーの動きが書いてあるのは(4)のこの辺ですね。

  // プレイヤーの初期座標を、画面の中心に設定します
  player.x = (g.game.width - player.width) / 2;
  player.y = (g.game.height - player.height) / 2
  player.onUpdate.add(function () {
    // 毎フレームでY座標を再計算し、プレイヤーの飛んでいる動きを表現します
    // ここではMath.sinを利用して、時間経過によって増加するg.game.ageと組み合わせて
    player.y = (g.game.height - player.height) / 2 + Math.sin(g.game.age % (g.game.fps * 10) / 4) * 10;
    // プレイヤーの座標に変更があった場合、 modified() を実行して変更をゲームに通知します
    player.modified();
  });


横の位置が書いてある2行目をこのように変えます。

  変更前 player.x = (g.game.width - player.width) / 2;
  変更後 player.x = (g.game.width - player.width) / 10;

g.game.widthはゲーム全体の幅です。今回は1280になります。
それを / 2 の割り算で2分の1にすることで画面の真ん中に配置していました。
そして、もっと左に寄せるために10分の1にしてみます。



次に縦の動きです。7行目の2つの数字を変えます。

あと「 % (g.game.fps * 10)」というのがちょっと不自然な動きを生むので消します。

  変更前 player.y = (g.game.height - player.height) / 2 + Math.sin(g.game.age % (g.game.fps * 10) / 4) * 10;
  変更後 player.y = (g.game.height - player.height) / 2 + Math.sin(g.game.age / 15) * 270;

これは三角関数 Math.sin の式ですが、せっかくなので数学の話も省略します。



値を変えてmain.jsを保存したら、前回やったテスト起動をやりましょう。
コマンドプロンプトを開いて、今回のフォルダ kaizouに移動します。

起動の呪文akashic-sandboxを入力します。
もしくは、コマンドプロンプトは上キーを押すと過去の呪文を呼び出せます。


キャラクターが左寄りで大きく動いていればOK。





【改造内容】 残弾数を決める (数値を記録する)

ここまではすでにある数字を編集するだけでしたが、新しい数字を導入していきましょう。


ゲーム部分のはじまりのloadのすぐ下に以下の呪文を挿入します。

  var bullet = 3;


前後を合わせると以下のようになります。

  scene.loaded.add(function () {
    // ここからゲーム内容を記述します

    var bullet = 3;
    // 各アセットオブジェクトを取得します

これでbulletという数値(変数)が追加されました。

 

次に、射撃したら残弾数が減るようにします。

loadの中のタッチ処理のところ(6)に以下の文字列があります。

  scene.onPointDownCapture.add(function () {


ここから先が scene(シーン)が pointDown(押された)時に処理する所です。

このすぐ下にbulletの値の操作を入れましょう。

  scene.onPointDownCapture.add(function () {

    bullet = bullet - 1;

これでタッチするごとに残弾数が一つ減っていきます。

 

【改造内容】 残弾ゼロで打てなくする (条件をつける)

残弾数なので弾がなくなったら打てなくならないとだめですね。

bulletが0より大きい時だけタッチ処理を実行するという条件をつけましょう。

条件は以下のようなカッコを使います。

  if (条件式) {
    処理内容
  }

条件式に bullet > 0 を入れて、さきほどのscene.pointDownCapture.の中身をすべて処理内容として上のカッコに入れます。

  // 画面をタッチしたとき、SEを鳴らします
  scene.pointDownCapture.add(function () {

    if (bullet > 0) {
      bullet = bullet -1;
      // 制限時間以内であればタッチ1回ごとにSCOREに+1します
      if (time > 0) {
        g.game.vars.gameState.score++;
        scoreLabel.text = "SCORE: " + g.game.vars.gameState.score;
        scoreLabel.invalidate();
      }
      seAudioAsset.play();
      // プレイヤーが発射する弾を生成します
      var shot = new g.Sprite({
        scene: scene,
        src: shotImageAsset,
        width: shotImageAsset.width,
        height: shotImageAsset.height
      });
      // 弾の初期座標を、プレイヤーの少し右に設定します
      shot.x = player.x + player.width;
      shot.y = player.y;
      shot.onUpdate.add(function () {
        // 毎フレームで座標を確認し、画面外に出ていたら弾をシーンから取り除きます
        if (shot.x > g.game.width)
          shot.destroy();
        // 弾を右に動かし、弾の動きを表現します
        shot.x += 10;
        // 変更をゲームに通知します
        shot.modified();
      });
      scene.append(shot);
    }
  });


カッコが離れていると、数が合わなくなったりしますのでよく確認してください。
カッコの中をtabで一段ずらすのも見やすくする常套手段です。

 

保存してテストページを更新しましょう。3回射撃して打ち止めになればOK。

 



【終了】

今回はここまでです。最終段階のソースはこちらです。

次は残弾表示などを追加していきます