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

第６回はフォントと音を用意して公開までいきます。

■目次

【改造内容】

フォントを追加する
音を用意する
音を追加する

【ゲーム公開】

zipにする
アイコンを用意する
アツマールにアップロードする
生放送に登録する

【改造内容】フォントを追加する

スコア表示と時間表示の文字が弱々しいので変えていきます。

[2021/2/19加筆]
以下の記事は、ビットマップフォントを使う前提で記載しています。
ダイナミックフォントでもくっきりと力強く表示できることがわかりましたので、
検討している方はこちらのダイナミックフォントの項目を確認してください。

フォントファイル等は、好きなフォントから作ることができるのですが、作り方がややこしいので今回は省略します。

公式が用意しているこちらの一番下にあるもの使います。

展開すると　font16_1.png と　glyph_area_16.json　というのがあります。

それぞれkaizouの imageフォルダ　と　textフォルダ　に格納します。

画像を追加したときと同じように、akashic scan asset　で追加します。

さらに同じように、プログラム内でも登録します。

assetIds: [
　　"player",
　　"shot",
　　"tile",
　　"tutorial",
　　"finish",
　　"font16_1",
　　"glyph_area_16",
　　"se"
]

そして、現時点のフォント関連の記載がある、 var font　var scoreLabel　var timeLabel　にvar glyphを加えつつ以下のように変えます。

// フォントの生成
var glyph = JSON.parse(scene.assets["glyph_area_16"].data);
var font = new g.BitmapFont({
　　src: scene.assets["font16_1"],
　　map: glyph,
　　defaultGlyphWidth: 16,
　　defaultGlyphHeight: 16,
});
// スコア表示用のラベル
var scoreLabel = new g.Label({
　　scene: scene,
　　text: "SCORE: 0",
　　font: font,
　　fontSize: font.size*2.5,
});
scene.append(scoreLabel);
// 残り時間表示用ラベル
var timeLabel = new g.Label({
　　scene: scene,
　　text: "TIME: 0",
　　font: font,
　　fontSize: font.size*2.5,
　　x: 0.75 * g.game.width
});
scene.append(timeLabel);　

　　

上のようにフォントが表示されたでしょうか。

【改造内容】音を用意する

音を用意していきましょう。

今回ほしい音は６種類あります。

発射音　（すでにある音に置き換え）
弾がタイルに変化した音
積み数が一致した音
積み数が超過してミスになった音
ゲームが終了した音
BGM

ゲーム開始音はタイミングを合わせるのが面倒なので省略します。

音源は自分で作ってもいいですが、無償で公開されていらっしゃる方々がいらっしゃいます。

状況によって使用可不可や、表記の要不要が異なります。私の方でコメントすることではありませんが、よく確認して使わせていただくのが良いのではないでしょうか。

開始音と終了音は「泥棒バスター」の素材があるのでそちらをお借りするのも良いでしょう。
一応ライセンス表示は必要みたいです。

音源を用意して、ゲームにのせる前に加工をします。
ogg形式のファイルとaac形式のファイルの両方が必要です。

ffmpegというのをインストールすると楽なのですが、若干難しいかもしれません。簡単にインストールできそうならおすすめしますが、そうでなければ他の方法を模索してください。
また、こちらのツールも使えるはずです。

ffmpegを使うと音量の調節も同時にできたりします。
素材サイトから頂いた状態だと、ちょっと音が大きめのことが多いように思います。

２種類の形式のファイルが用意できたら、kaizouのaudioフォルダに格納します。
そしてakashic scan assetを行い、ゲーム内に登録します。

assetIds: [
　　"player",
　　"shot",
　　"tile",
　　"tutorial",
　　"finish",
　　"font16_1",
　　"glyph_area_16",
　　"se_finish",
　　"se_match",
　　"se_miss",
　　"se_shot",
　　"se_tile",
　　"bgm",
　　"se"
]

"se"は消してもいいんですが、他の場所も消す必要がでてくるので残しています。

そして、ちょっと書き方が変わりますが音源の再生を以下のようにに記載します。

// 画面をタッチしたとき、SEを鳴らします
scene.onPointDownCapture.add(function () {
　　if (bullet > 0 && time < 53) {
　　　　bullet = bullet - 1;
　　　　scene.assets["se_shot"].play();
　　　　// プレイヤーが発射する弾を生成します
　　　　var shot = new g.Sprite({
　　　　　　scene: scene,
　　　　　　src: scene.assets["shot"],
　　　　　　width: scene.assets["shot"].width,
　　　　　　height: scene.assets["shot"].height
　　　　});

そしてこの、scene.assets["se_shot"].play();の中身を書き換えて各所に配置していきます。

終了時のse_finishのみタイミングらしいタイミングがないので、次のように配置します。

scene.onUpdate.add(function () {
　　if (time < 0) {
　　　　if (finish.opacity == 0) scene.assets["se_finish"].play();
　　　　finish.opacity = 1;
　　} else {
　　　　finish.opacity = 0;
　　}
　　finish.modified();
});

これで、１度だけ処理されるはずです。ただ単にscene.onUpdate.add(function () {の中に入れていると、何重にも重なって再生されて非常にうるさくなります。
想定外の処理で無限ループにならないよう注意が必要です。

それ以外の配置場所は完成したコードをみて確認してください。

音の処理は１行だけでできますが、一つだけ追加の設定があります。
ゲームの長さにもよりますがBGMは、ループして再生されることが望ましいですね。

BGMをループにする設定はgame.jsonの方にあります。akashic scan assetを実行したあとであれば、各素材の情報がgame.jsonに記載されています。

BGMのファイルのみ以下のように変更します。

"bgm": {
　　"type": "audio",
　　"path": "audio/bgm",
　　"systemId": "music",
　　"duration": 66264
},
"se_finish": {
　　"type": "audio",
　　"path": "audio/se_finish",
　　"systemId": "sound",
　　"duration": 1344
},

systemId が sound となっているところを music にします。これでループになります。

【ゲーム公開】zipにする

ひとまずこれで完成しました。アップロードするためにzipにします。

コマンドプロンプトから、次の呪文を行います。

　　akashic export html -f --output jelly.zip --atsumaru

kaizouフォルダにjelly.zipが生成されたかと思います。

【ゲーム公開】アイコンを用意する

サイズは160x160 以上 320x320 以下にしましょう。生放送向けの制限のようです。
外周に隙間があってもいいですがあまり中央に寄りすぎると寂しくなります。
下の絵ぐらいが下限だと思います。

　　

gifアニメのアイコンはやめたほうがいいですね。
アツマールだとアニメーションアイコンは珍しくないのですが、生放送向けのものは運営に差し替えられてしまいます。目障りだからでしょうか。

→　[追記]　最近はアニメーションのアイコンでも残してもらえてます。

→　[再追記]　いつの間にか「ニコ生ゲームではgifアニメーション画像は1フレーム目のみ表示されます」という文言が追加されていました

運営にアニメーションだと気づかれないやつは残るのかな？

[2022/12/20加筆]
以下の記事は、アツマールがサービス提供中の時点の内容です。
アツマールがサービス終了したあとの手順はこの一連の記事では説明していません。
別途、公式チュートリアルや解説記事を探してください。

【ゲーム公開】アツマールにアップロードする

アツマールにアクセスすると右上にアカウントのプルダウンメニューがあるはずです。

　　

ここでゲーム投稿を選びます。

ゲームファイルにさきほど作ったzipファイルをドロップします。

アイコンも同じようにし、ゲームサイズなどを入れていきます。
「背景色」は透過が多いゲームだと役に立ちそうですが、実際は役に立たず黒になります。

最後の「公開設定」のところは、最初は非公開にしてテストするのが良いですね。
ただし、最終的にニコ生ゲームに登録するには、ここを公開にする必要があります。

　　

アツマールで動作や表示を確認します。

アツマールは背景が真っ黒なので、テスト環境の真っ白と比べて大きく印象が変わってしまうことがあります。生放送でも真っ黒にしている方は珍しくないですね。

それ以外でも、スコアボードがうまく機能するかなど、プレイしてみましょう。
ゲームを公開状態にして、アツマールでいろいろな方にプレイいただいて、十分にバグ出しをしてから生放送に登録するのもありです。

【ゲーム公開】生放送に登録する

問題がなければアツマールでゲームを公開状態にし、あとは登録申請するだけです。

まず投稿ゲーム管理のページに行きます。

そしてゲームのパネルの右下のその他から「ニコ生ゲームに登録申請」を押します。

その後に最終確認の注意事項が出てくるのでよく確認してください。

ニコ生ゲームは一度登録してしまうと、自分で非公開にすることはできません。
お問合せフォームから運営に削除を依頼する必要があるので、よく確認しましょう。

一応ファイルをアップデートすれば、旧版をプレイできないようにはできます。

終了

これでニコ生ゲームリリースまでの流れは終了です。
簡単に説明するつもりが恐ろしく長い記事になってしまいました。

最終コードは、こちら。
game.jsonは名前を変えていますが、こちら。
画像ファイルは前回と同じですが、こちらです。
フォントファイルは上にリンクがあります。
音声ファイルは再配布しないので、テストで動かしたい場合は、適当なファイルに名前をつけて置いておくか、main.jsの記載を消してscan assetをやってください。

アツマールはこちら。
このあと、アツマール用のリスタート機能を追加しましたが、ブロマガには反映させてません。
リスタート機能は次の記事で紹介しています。

今回作ったゲームが新しく作るゲームのテンプレになるかというと、ちょっと難しいですね。
サンプルゲームを無理やり活かしているため、これ以上ゲーム性を広げたり、素材を変えて新しいゲームとして見せるのには向かないと思います。

次回からはゲームの大枠の進行やデザインを決め、作り込みの少ないシンプルなゲームを作ろうと思います。

一方で、共通して使える機能は最初から搭載しておき、転用しやすくなることを目指します。

以上です。お疲れさまでした。