ユーザーブロマガは2021年10月7日(予定)をもちましてサービスを終了します

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

    2020-02-18 01:41


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


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

    ここまでやってきたらゲームをいじって改善していきたくなるのが人のサガです
    ここからはそんなあなた方のためにちょっとしたヒントをあげちゃいます٩( ᐛ )و

    ===========================================================================
    • 画像の差し替え
    せっかく作ったゲームどうせならオリジナルの画像に差し替えたいと思う方もいるでしょう
    そんな方々のために画像の差し替え方法の一例をご紹介しちゃいます!!

    アニメーションさせない画像であれば別にこの方法を用いなくても大丈夫だったりするのですが多少仕組みを理解していた方がどちらも触りやすいと思うので是非一読ください

    障害物を作成した際にこんな感じのことをしましたね




    勘の良い方ならわかっておられるかもしれませんがこのけだまきの画像は横200x縦100の画像でそれを100x100ごとに一枚として切り替えてアニメーションさせています

    仮に三枚に切り替えたくなった場合、用意する画像は横300x縦100でframe: [0,1]のところを[0,1,2]としてやれば良いということです

    そこでどうやって画像を綺麗にくっつけたらと迷う方もいるだろうということでサイトを紹介しておきます(同じようなサイトはいくらでもあると思うのでいろいろ探してみましょう)
    画像結合サイト
    私はいつもここを使っています(結構ページのデザイン頻繁に変えられてるみたいです)


    使い方は特に言うまでもないですがつなげたい画像を入れて


    パターンはこれで


    縦の長さを指定にして100にしておくのがおすすめです

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

    • 音の差し替え
    いい加減癖の強くて耳が痛くなりそうなジャンプ効果音はいやですよね
    とっとと差し替えちゃいましょう!!

    まずアカシックエンジンで音を鳴らすには.oggファイルと.accファイルが必要です
    素材として探す段階ではどんな音楽ファイルでも良いのですが(.mp3や.wav)
    使う前には変換が必要です

    そこで使えるサイトがこちら
    音声変換サイト
    1日で変換できる数に限りがあるのが難点ですが無料でアカウントを作ればいくらでもいけるようになります
    (いろいろサイトを試しましたがファイルサイズの削減的にもここがよかったです)



    ここに用意したファイルを入れます(*一度に入れられる数に制限があるので注意)




    入れたらあとは変換したい形式にしてダウンロードして画像と同じ要領でaudioファイルに名前を変えて入れるだけで完了です!!

    あとはゲームにはBGMが欲しいですよね、準備の方法は同じなのですが少しだけgame.jsonを少しいじらないといけません

    ここは素材取り込みを実行した際に素材の情報などが書き込まれる場所なのですが


    ここのsoundをmusicに変更することで音楽がループするようになります
    4MBが最大容量のニコ生ゲームにおいては重要な要素ですね

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

    他にも何か知りたい要素などがあればコメントにて質問しちゃってくださいね
    それでは٩( ᐛ )و



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

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