• ゼロから始めるニコ生ゲームの作り方 仕上げ編

    2019-12-08 00:00


    導入編から順番に来てない方はそちらからご覧ください٩( ᐛ )و



    ===========================================================================

     ゲームの投稿の前にニコ生ゲームのランキングモードへ対応させましょう
     ゲームフォルダの中のどのフォルダにも入ってない "game.json" を開きましょう


    "environment": {

    "sandbox-runtime": "2",

    "niconico": {

    "supportedModes": [

    "ranking"

    ]

    }

    }

    }

     一番したの該当箇所を画像のように書き換えるだけです٩( ᐛ )و

    ===========================================================================

     それではここまで作ってきたゲームをニコニコのRPGアツマールに投稿していきましょう



     まずはゲームを提出できる形にしましょう
     以前ダウンロードしたコマンドセットの "ゲーム書き出し" をダブルクリック!!

     ゲーム名を入力して少し待つとゲームのフォルダに "game.zip" が生成されていると思います
     これをアツマールに投稿するとニコ生ゲームになります

     


     ここからゲームが投稿できます!!



     ここら辺りは特にいうことはありません、必要事項を入力して投稿しちゃってください




     その後、自分のアカウント名のところをクリックすればマイページに行けるはずです



     その他の項目をクリックするとニコニコ新市場に登録申請の項目があるはずなので
     申請しちゃいましょう12/11以降であれば即座に生放送から遊べるようになっているはずです

     


    =========================================================================

     これにてゼロから始めるニコ生ゲームの作り方は一旦終了です!!
     お疲れ様でした٩( ᐛ )و

     質問・要望などがあればコメントからお願いします


    続き 番外編 (そのうち)


  • 広告
  • ゼロから始めるニコ生ゲームの作り方 ゲーム製作編 Ⅱ

    2019-12-07 00:00


    導入編から順番に来てない方はそちらからご覧ください٩( ᐛ )و


    ===========================================================================

     ラン系ゲームではプレイキャラクター以外を動かします
     背景などが動くだけでプレイヤーがしっかりと動いているように見える上
     プレイヤーの位置が変わらないため色々と処理が楽になる利点があります

     今回はゆかりさんが走ってタイミングよくボイロモンスターを飛び越える
     ゲームへとしていくとしましょう٩( ᐛ )و

    ===========================================================================
    • 障害物を生成しよう



    ゆかマキは定番の組み合わせなのでケダマキを使うとしましょう!!
    とりあえず表示に関してはゆかりさんの時と同じです


    var wall = new g.FrameSprite({

    scene: scene,

    src: scene.assets["kedamaki"],

    // 表示場所

    x: 1000, //左上が0

    y: 600, //左上が0

    // 表示サイズ

    width: 100,

    height: 100,

    // 元画像のフレーム1つのサイズ

    srcWidth: 100,

    srcHeight: 100,

    // アニメーションの速度

    interval:500,

    // アニメーションに利用するフレームのインデックス配列

    frames: [0, 1],

    // アニメーションをループする(省略した場合ループする)

    loop: true

    });

    scene.append(wall); //画像の表示

    wall.start(); //アニメーション開始




    *素材を使えるようにするのも忘れずに(画像をフォルダに入れたり取り込みコマンドの実行なども)


    assetIds: ["player", "shot", "se","yukari","kedamaki"] 


    *一応ゲームを起動してこまめにミスがないか確認しよう


     ラン系ゲームにおいて障害物はプレイヤーに向かって動く必要があり
     通り過ぎた後にもう一度同じように向かってくるようにしなければなりません

     まずはプレイヤーの動きの時と同様にパラパラ漫画の紙の束を作りましょう

    scene.setInterval(function() { // 頻度ごとに中身を実行

    }, 0.1); // 頻度

     *実は別にプレイヤーの紙の束のところに書いていってもいいのですが処理を固まらせてわかりやすくしたいのであえてこれを使っています
     
     
     では移動の処理を書いていきましょう


    wall.x--; // 左へ動かす

    if(wall.x<-100){ // 左の画面外に行ったら

    wall.x=1500; //右の画面外に動かす
    }

    wall.modified(); //画像の移動反映

     これでゲームを起動すればけだまきが動いていくはずです٩( ᐛ )و
     *結構速いスピードで駆け抜けていきますが調整したければ自分でやってみましょうここまでの内容でできるはずです!!


    =========================================================================

    • 判定をつけよう

    当然このままでは飛び越えても何も起こりません
    プレイヤーがジャンプしているときに障害物を通り過ぎたらスコアを得るようにしましょう

    判定の仕方はプレイヤーと障害物が同じx座標(左右の位置)
    の時にジャンプ中であるかを飛び越えたかの判定とします

    判定系はまとめたいので
    ジャンプの判定などを書いた前のパラパラ漫画の束の方に書いていくとしましょう

    if(wall.x == 200 && JUMP == true){ //飛び越えたかの判定

    }

     
     お次は中身の処理にスコアを加算していきたいのでスコアの準備をしましょう
     JUMPだとかGROUNDだとかのいわゆる変数を用意した時と同じですね

    var Score = 0; // スコアを入れる用

    g.game.vars.gameState = {};

    g.game.vars.gameState.score = 0; // ランキング用のスコアを送るためのもの

      *ぶっちゃけScoreの方は要らないのですがわかりやすいよう作っておきます
     
     ではスコアを増加させましょう、せっかくだから景気良く大きめに増やしていきますよ!!

    Score += 1000;
    g.game.vars.gameState.score += Score;

     これで飛び越えれば "1000" スコアが増えるようになりましたね٩( ᐛ )و

    =========================================================================

    • スコアを表示しよう


     せっかくなのでスコアを表示しましょう



    var font = new g.DynamicFont({

    game: g.game,

    fontFamily: g.FontFamily.Serif,

    size: 60

    });

    var label = new g.Label({

    scene: scene,

    font: font,

    text: "Score : 0",

    fontSize: 60,

    textColor: "blue",

    x: 10,

    y: 20

    });

    scene.append(label);


     この段階ではただ "Score : 0" と表示し続けているだけです
     しっかり飛んでもスコアは増えません、処理を書いてませんから当然ですね



     スコアを表示させていくとしましょう!!

    label.text="Score : " + Score; // 文字の文章を指定
    label.invalidate(); // 文字表示更新

     これで最低限の要素はできましたね٩( ᐛ )و

    =========================================================================

     これでプログラム部分は一旦完成です
     もちろん、ジャンプの判定が少し違和感があったり色々と直すべきところはあると思います
     それはまた後ほどやり方のヒントなどを拡張編でお伝えしますのでお楽しみに٩( ᐛ )و

     質問・要望などがあればコメントからお願いします

    続き 仕上げ編
    *なぜか投稿できないので後ほど
    *一日の投稿制限があるみたいなので12/8 0:00に見れます
    =========================================================================

  • ゼロから始めるニコ生ゲームの作り方 ゲーム製作編 Ⅰ

    2019-12-07 00:00


    導入編から順番に来てない方はそちらからご覧ください٩( ᐛ )و


    ===========================================================================
    1. どんなゲームを作っていくか


      今回は一番作りやすく応用の効くラン系のゲームを作っていくとしましょう

      ゲームの概要としてはニコ生ランキングゲームの制限時間である60秒間の間に
      流れてくるスコアアイテムなどを回収してそのスコアを競うゲームですね

      具体的なゲームを挙げるなら
      私が最初に作ったニコ生ゲーム "AKARI ROLLING"



      ニコニコ が作った"つりっくま"ですね



      当然、「 え?2つのゲーム全然違うじゃん 」と思う方もいらっしゃるでしょう
      けれどもこの二つのゲーム根本的なところでは同じなのです

      それは
      「プレイヤーが動かず、タイミングよく操作してスコアを獲得する点」です

      この仕組みで作られているゲームは他にも数多くあります

      つまり、この仕組みでゲームを作れるようになれば
      見せ方と工夫次第でいろいろなゲームが作れるようになるというわけです

      というわけでやっていくとしましょう٩( ᐛ )و


      =========================================================================

    2. まずは素材集め

      まずは今回プレイヤーが操作するキャラクターの素材を用意しましょう
      基本的になんでも良いですがここでは私の素材を使ってやっていきます
      *素材の加工については後ほど

      静画クリップ: https://seiga.nicovideo.jp/my/clip/2220581
      加工後素材



      使いたい素材を先ほどの手順と同じく、
      ゲームフォルダ内のimageフォルダに入れておきましょう(記事)
      *素材取り込みをダブルクリックするのも忘れずに

      効果音などは素材の加工方法同様後ほど解説します٩( ᐛ )و


      =========================================================================

    3. プログラムをいじっていこう
    素材の利用方法


    main.jsを開きましょう、プログラムの内容については大体説明をつけてくれていますが


    ここの assetIds:["player","shot","se"] の部分で使う画像ファイルなどを準備しています

    つまり先ほどの素材のゆかりさんを使いたければ
    ここを assetIds:["player","shot","se","yukari"] とすれば良いわけです


    *プログラムを変更した後は保存するのを忘れずに

    =========================================================================

    プログラムの下準備 main.jsの内容はいきなり書き換えていくのは少し難しいかもしれないので
     下の画像をみながら、最低限必要な物だけ残して消してしまいましょう


    "use strict";

    function main(param) {

    var scene = new g.Scene({

    game: g.game,

    // このシーンで利用するアセットのIDを列挙し、シーンに通知します

    assetIds: ["player", "shot", "se","yukari"]

    });

    scene.loaded.add(function () {

    // ここからゲーム内容を記述します


    // 画面をタッチしたとき、SEを鳴らします

    scene.pointDownCapture.add(function () {

    scene.assets["se"].play();

    });

    scene.append(player);

    // ここまでゲーム内容を記述します

    });

    g.game.pushScene(scene);

    }

    module.exports = main;

     このぐらいにしてしまえばだいぶ見やすいですね٩( ᐛ )و


    =========================================================================

    • 画像の表示

      画像の表示ならできていたじゃないかと思うかもしれませんが
      あの書き方のままだとアニメーションさせられないので下の画像のように書きましょう


      var player = new g.FrameSprite({

      scene: scene,

      src: scene.assets["yukari"],

      // 表示場所

      x: 200, //左上が0

      y: 600, //左上が0

      // 表示サイズ

      width: 100,

      height: 100,

      // 元画像のフレーム1つのサイズ

      srcWidth: 100,

      srcHeight: 100,

      // アニメーションの速度

      interval:500,

      // アニメーションに利用するフレームのインデックス配列

      frames: [0, 1],

      // アニメーションをループする(省略した場合ループする)

      loop: true

      });

      scene.append(player); //画像の表示

      player.start(); //アニメーション開始

      書き終わったら、ちゃんと表示できているかどうかゲームを起動してみてみましょう
      *色々パラメーターをいじってみてどうなるかみてみるのも良いかもですね




      =====================================================================

    • ジャンプできるようにしよう

      クリックしたときにジャンプできるようにしましょう
      プログラムを書いたことのない人には少し難しいかもしれないですが
      少し説明しておきますね(あとの画像のプログラムを見て場所がわかれば十分です)

      ジャンプといえば
      普通クリック→上昇→落下 ですよね

      ですがプログラムの仕組みとしては
      地面にいない&ジャンプ中じゃないなら ”落下”
      地面にいる&ジャンプ中なら "上昇"
      といった感じに基本的にします

      地面にいるかいないかはキャラクターのy座標(上下の位置)が
      今回であれば600以上かどうかで判断できますね

      ジャンプ中かどうかはクリックした際にジャンプ中とし
      ジャンプの最高点に達したときにジャンプ中じゃないとすれば良いですね

     今回は200ぐらいジャンプさせましょうか


    =========================================================================

     まずはジャンプ中かどうかと地面にいるかどうかをプログラムに書きましょう


    var GROUND = false; // 地面にいるかどうか falseなら空中、trueなら地面

    var JUMP = false; // ジャンプ中かどうか 

     用語で言うと変数というやつですね、数字とか色々入れられます

     これをtrue,false切り替えて状態を表していきます

     ということをプログラムで宣言した感じですね


    =========================================================================

     次にジャンプの処理の中身を書いていきます

     ゲームは動画とかと一緒で突き詰めていくとパラパラ漫画です

     紙一枚ごとに処理してパラパラさせるとゲームに見えるということですね 

    scene.setInterval(function() { // 頻度ごとに中身を実行

    }, 0.1); // 頻度

     *プログラムわかる人などは言いたいことがあるかもしれませんが黙っててください

     先ほどの例えでいくと、これがパラパラ漫画の紙の束ということになります


    =========================================================================

     中身は少し難しいので「へー」ぐらいで流してもOKですが

     上の方の説明と照らし合わせると尚良しです٩( ᐛ )و


    if(player.y > 600){ // 接地処理

    GROUND = true;

    }

    if(player.y < 400){ // 最高点処理

    JUMP = false;

    GROUND = false;

    }

    if(JUMP == false && GROUND == false){ // 落下処理

    player.y++;

    player.modified(); //画像の移動反映

    }

    if(JUMP == true){ // 上昇処理

    player.y--;

    player.modified(); //画像の移動反映

    }

      *わかればだんだんプログラムが書けるようになってくるはず(オリジナルのものを作っていくには必須かも?)

    =========================================================================

     さてジャンプの処理の仕上げです
     クリックしたときの処理をつけましょう


    if(GROUND == true){ // ジャンプ処理

    JUMP = true;

    GROUND = false;

    }

    =========================================================================

     プレイヤーの動きがとりあえずできましたね٩( ᐛ )و
     一旦ここまでにしましょう

     質問・要望などがあればコメントからお願いします

     → 続き ゲーム製作編Ⅱ