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

新しい記事を投稿しました。シェアして読者に伝えましょう

×

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

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に見れます
    =========================================================================

    広告
    コメントを書く
    コメントをするには、
    ログインして下さい。