Akashic Engine サンプルを改造してみる②

前回までのあらすじ。

アツマールのバカゲーコンテストに、ニコ生ゲーム賞なるものが登場したので
ニコ生ゲームについて、調べてみた。
なお、ニコニコ自作ゲームフェス2021にもニコ生ゲーム賞があるそうだ。
Akashic Engineというものを使って作るそうだ。

とりあえず、スコアボード機能付きで「Hello World」を新規作成して
プレイヤーの画像を変更してみたよ。

じゃあ、今日は「Shot」の画像をハートに変更して
ランダムな方向に発射するようにしてみるよ。
とりあえず、８方向でいいかな。

まず、ランダムな数値を取得する命令を探します。

var wawa = Math.floor(g.game.random.generate() * 8);//0以上8未満の整数を変数wawaに取得

となるらしい、これを（変数名のwawaは適当に自分でつけたやで）
// 弾の初期座標を、プレイヤーの少し右に設定します
のとこに配置。
理由はよくわからないけど
// 弾を右に動かし、弾の動きを表現します
のとこに配置すると飛んでいかずにわらわらする。
まあそれも悪くない気がしたけど、今回は飛んでってもらいたい。

で、// 弾を右に動かし、弾の動きを表現しますのとこは
if文で、８通りの方向へ飛ばす。

if (wawa == 3) {

shot.y += -10;//変数wawaが3の弾は上へ移動

}

if (wawa == 4) {

shot.y += -10;//変数wawaが4の弾は右上へ移動

shot.x += 10;

}

上記は一部だけど、８方向分書いたで。
まあ、いわゆる恥ずかしいコードっていうやつなんだと思うけど
基本のif文使ってるだけだから、何をしているのか後で見てもわかりやすいで？
と、開き直っておこう。（関数とか方程式苦手なんよ）

これで完成としてもいいんだけど、ゲームが終わったことがわかりにくいので
タイマーが0になったら、「リロードしてね」って表示したいよ。

逆引きリファレンス「文字列を表示する」を読んでみよう。
まるっとこぴっぺして

// カウントダウンを止めるためにこのイベントハンドラを削除します
の、次の行ぐらいに放り込めばよさそうだ。

さて、後は、ゲーム開始のタイミングを、画面をクリックしたらにしたいんだけど
「クリック・タップできるようにする」等で変数を変更し、
ゲーム部分をifで囲めばいいかと思ったけど、これはダメのようです。
他にそれらしいサンプルを探してみます。

うーん、ダウンロードできるサンプルは軒並み複雑で
私には読み解けそうにありません。

「Hopping Witch」も難しいなあ。

「シーンを切り替える」あたりかなと思ったけど

私にはちょっと読み解けなかったです。

逆引きじゃないリファレンスで、g.game.pushScene()を検索するもヒットせず。
このリファレンスはどう使うものなのかな。

クリックでゲーム開始とか、ウェイトを入れてとか

わかりやすいサンプルが欲しいよね・・・
単体のサンプルじゃなくて

「Hello World」にスタートボタンをを追加するとか
スタートのカウントダウンを追加する、みたいなサンプルが欲しいですね。

あと、クイズゲームのサンプルとか欲しいっすね。

今日から始めるニコ生ゲーとかいう配信を見つけたので、見てみる。
サンプルカタログなるページがあるらしい。
が、欲しいパーツは見つからなかった。

まあ気が向いたら、もうちょっと調べてみるか公式さんに聞いてみることにして
とりあえず完成にしとく。
（公式さんに教えてもらって、作れるようになりました！
　詳しくはこちら）

念頭に「わからない」が真っ先に来るようになったら
どんなに頑張っても「わからない」のループだからね。

というわけで、アツマールに投稿してテスト。
よしよし、動てる動いてる。
しかしどうやら、連打してると、スコアボードが開いても
見る前にクリックで閉じてしまう事案が発生ｗ
スコアを表示するボタンくらいは配置しておこう。
さすがにこれは「クリック・タップできるようにする」でできるやろ。

・・・できた。（良かった）
このボタンは、最初から設置しておいてもよさそうだけど
一応、タイマーが止まってから表示することにしよう。

★出来上がったゲームを遊んでみる★

Akashic Engine サンプルを改造してみる①

前回までのあらすじ。

アツマールのバカゲーコンテストに、ニコ生ゲーム賞なるものが登場したので
ニコ生ゲームについて、調べてみた。
なお、ニコニコ自作ゲームフェス2021にもニコ生ゲーム賞があるそうだ。
Akashic Engineというものを使って作るそうだ。

というわけで、サンプルデモを見てみます。
Akashic Engineのサイトメニュー、右端から今回は「Hello World」を選択
おっとこれは・・・実際にスクリプトをいじって反映させることができるっぽい。
このままスクリプトのお勉強ができそうですね。

コメントも丁寧に書いてくれているので、なんとなく流れがわかった気がする。
（タイルから下は、コメントも少なくいきなり難度がアップするけど）
「Hello World」は、ゲームの新規作成をしたときに生成されるらしい。

キャラクターが表示され、画面のどこかをクリックすると
弾が発射されるだけのゲームとは言えないものですが
10秒間にクリックされた回数を図るゲームになら
簡単に改造できそうです。

せっかくなので、スコアボード機能付きで新規作成して
みんなでスコアを競えるようにしてみます。

というわけで、ランキング機能対応のゲームプロジェクトを作成。
なんと、タイマーとスコア表示もセットでついてきました、お得！
さっそくアツマールに投稿だ！

結果


あっれれ～？
akashic-sandboxコマンドでテストプレイした時には
背景が真っ白で、タイマーもスコアも表示されてたのに
真っ黒で見えないぞ～？

どうやら背景を指定した方が良いみたいだね。
とりあえず、背景を短径で塗りつぶす方法を
逆引きリファレンスで調べてみよう！

・・・・・・みあたらなかったｗ
けど、ゲームアツマールでの背景色を指定するというのがありました。
読んでみたけどHTMLでした。はい、まあそうですね。
これで指定してもいいんだけど、背景を透過しておきたくないので
どっかにサンプルがないかあさります。

ビットマップフォントサンプルにありました。
10～19行目の「// 背景の黒」の命令文を丸っとコピーして
「// プレイヤーを生成します」の上にペースト。

// 背景の黒

var bg = new g.FilledRect({

scene: scene,

cssColor: "#CCFFFF",

x: 0,

y: 0,

width: g.game.width,

height: g.game.height

});

scene.append(bg);

cssColorの指定色を好きな色に変更して終わりー。

いえーい。
スコアとタイマーが見えたー。

さて、ここからオリジナルな変更追加をしていくよ。
とりえず、プレイヤーグラフィックを、女の子の顔にして静止。
「image」フォルダの「player.png」を差し替えればよいよね。

・・・・・・ダメでしたｗ


猛烈に無意味なトライ＆エラーののち
問題がアセットの設定にあるんではないかと思い立ち（思い立つのが遅い）
アセットの設定をどこでやってるのか、探した結果game.jsonでした。
画像の大きさもここで指定してたんですねぇ。

そういえば言えば、akashic-sandboxコマンドを走らせたまま
コマンドプロンプのウインドウを消さないで
ブラウザをリロードすると、編集結果が反映されるんですね。
これ、編集するたびに実行するのかと思ってテストプレイがしんどかったけど
そうじゃないってわかって、少し楽になったよ。

今日はここまで～。

Akashic Engine 入門編

アツマールのバカゲーコンテストに、ニコ生ゲーム賞なるものが登場したので
ニコ生ゲームについて、調べてみた。
なお、ニコニコ自作ゲームフェス2021にもニコ生ゲーム賞があるそうだ。

とりあえず、コンテストの説明ページから、ニコ生ゲームの説明に飛ぶ。
Akashic Engineというものを使うそうだ。

基本的にJavaScript(あるいはTypeScript)で動いているみたいです。
コマンドプロンプトとかも使ってるみたいなので
その地点でもうすでに私の脳みそが拒絶反応を起こしているが
とりあえず、インストールについては、大変丁寧に説明されているので
インストールまでは、おそらく誰でもできるかなと思います。

ニコ生ゲームの説明ページ通り進むと、次はサンプルの改造をしてみよう
なわけですが・・・画像を入れ替えるだけの超初心者向けでした。

そこを過ぎると急に内容が難しくなって
リファレンスや入門ガイドを読みながら
いくつかあるサンプルゲームを解析して覚えていく感じでしょうか。

一応、入門編を読むと、ゲームの新規作成方法はわかりました。
コマンドプロンプトで作成するようです。

んで「script」フォルダにある「main.js」を編集してゲームを作るようです。
このファイルは、テキストエディタで編集できます。
文字コードに注意。

今日の所は、以上です。
スクリプトで作成するので、私に何か作れるかはまだ未知数です。
わかりやすい講座があると助かるんだけど。
ご存じの方いらっしゃったら、どうか教えてね！

とりあえず「よく使うコマンドプロンプトの備忘録」

・作業フォルダへの移動　cd フォルダのアドレス
・ゲームの新規作成　akashic init [--type javascript-minimal]
　ランキング機能付新規作成　akashic init [--type javascript-shin-ichiba-ranking]
・テストプレイ　akashic-sandbox
　(実行後、http://localhost:3000/gameをブラウザで開く)
・投稿用zipファイル生成　akashic export html --output ./game.zip --atsumaru

アクツクMVでノンフィールドADVを作ってみよう！⑨

アクションゲームツクールMV」©2018 KADOKAWA CORPORATION.
その名の通り、アクションゲームを作るツールで
ノンフィールドADVを作ってみるわけです、はい。

今回は、BGMや効果音の音量変更とボイスのONOFFの二本立てということで。
ようするに、オプションメニューですね。

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

まずは、音量変更の仕様を考えます。
オプションメニューを呼び出し
カーソルが当たってる時に左右に入力すると音量を変更する。

おお、なんということだ、呼び出し用のボタンが足りない。
セーブ用に割り当てた、Xボタン（Dキー）を間借りしようと思います。

ということで、オプションメニューの内容としては
・セーブメニューを呼び出す選択肢
・ロードメニューを呼び出す選択肢
・BGM音量変更選択肢
・効果音音量変更選択肢
・ボイス音量変更の選択肢（あれば）

って感じかな。

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

メニューの作り方は、もうさんざんやったので説明不要ですね。

一応、おさらいというかまとめというか、大事なことは
メニューシーンは、元となる最初のメニュー以外に配置したオブジェクトは
配置されたメニューが呼び出されるまで動かない。
てことですね。

それを念頭におきつつ
ロードのメニューをタイトル用のをコピーして手直し。
最初からメニューからもロードするつもりで作っておけば
楽だったのにとちょっと思いました。

で、オプションメニューがこんな感じにできました。

テキストに埋め込んだ変数は、値の変化に応じて表示が変わったりしないので
数値の部分だけ、数値用のテキスト表示にしていますよ。

というわけで、今回のサンプルはこちら。

梱包されている楽曲は、私が昔作った「魔法使いさんお静かに」
という曲です。
同名の漫画（作：竹本泉氏）のイメージソングだったりします。
脳内ではもうちょっといい曲なんだけど
上手に譜面に起こせなかったんですよね・・・
なかよしで募集されていたから作った歌だけど
結局応募したのかどうかは記憶にない。

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

ところで、クリア状態を覚える方法を使って
若干セーブスロットのテキスト表記に差異をつけることができそうです。
オブジェクトの名前にも制御文字が使えるので
例えば、現在の場所を表記したり、今何章かとか、プレイ時間とか。

プレイ時間の表示について考えてみます。

プレイ時間をカウントしてくれてるっぽい変数が見当たらないので
カウントするオブジェクトを作る必要がありそう。

時２桁、分２桁で、合計４桁。
スロットの数はとりあえず3つとして
0はノーカンで、分の十の位は5まででよいので
（9×3+5）×3＝96個のスイッチが必要ですね。
秒まで表示するなら、138個。

まあ、章数表示くらいが妥当な作業量感ですね。（短気）

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

これで、私の思いつくノベルゲーの機能がおおむね入ったと思います。
次回は、まとめというかあとがきになります。

改造して使ってよい、土台のプロジェクトファイルとか
サンプルゲームを配布するよー。

アクツクMVでノンフィールドADVを作ってみよう！⑧

アクションゲームツクールMV」©2018 KADOKAWA CORPORATION.
その名の通り、アクションゲームを作るツールで
ノンフィールドADVを作ってみるわけです、はい。

今回は、メッセージ一時消去とスキップの二本立てということで。

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

まずは、メッセージ一時消去から、仕様を考えます。
Rボタンを押したら、メッセージおよび各種ボタンを消して
絵だけを表示する。

絵、以外のレイヤーを非表示にすればよい感じですね。
とりあえず、テキストの表示命令に「最前面」を指定していると
消えてくれないので、チェックを外してしまいます。

もしこれで、メッセージがキャラの後ろに表示されたりする場合は
メッセージ表示命令のあるオブジェクトを、キャラクターのあるレイヤーより
上のレイヤーに変更します。

後、レイヤーの動作もOFFにしておきます。
うっかり決定キー押すと見えないまま、話が先へ進んでしまうので。

消去中は、セーブやログ表示を起動できないようにしておきます。
その他メニューシーンに配置しているものも非表示にしますが
初期設定のメニューシーンは消去も停止もできないので
オブジェクトのアクションで制御します。

終わり。

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

じゃあ次、メッセージスキップね。

仕様を考えます。
Xボタン（Sキー）を押すと、選択肢までスキップする。
もう一回押すと、スキップを止める。

特定のスイッチがONの場合は、すぐに次へ進むリンクを追加すればよさそうです。
選択肢のアクションまで来たらスイッチを切る命令を入れれば大丈夫かな。

例によって、スキップ中はセーブや他のシステムを起動できないようにしておく。

一応、メッセージ表示中以外はスキップが有効にならないようにしました。

キャラクターの移動やアニメにウェイトがかかっている場合
そっちにもスキップの場合のリンクを貼る必要がありそうですね。

終わり。

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

説明も実装も、簡単ではありますが
スキップの実装は、ひたすら面倒くさい処理ですね。（遠い目）
まあでも、コピペしまくるだけなので単純作業ではあります。
やってできないことはないとわかりました。

仕様はきちんと控えを取って、ゲームの最初から終わりに至るまで
システムの筋が通るようにしなければなりません。
ならないというよりは、そうしておかないと忘れた時困るという。

というわけで、今回のサンプルはこちら。

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

次回は、最後の機能・・・
BGMや効果音の音量変更やボイスのONOFFです！