忍者ブログ
windowsやブラウザ のゲーム作ったりとか。
「Dr.サイダイの巨大生物工房」は
Akashic Engine
で作ったブラウザゲームです。



生物は6種類で、それぞれ7段階あります。
出現確率はすべてランダムです。

良かったら遊んでね!

★遊ぶ★

拍手[0回]

PR
「はいきんぐ!」は
Akashic Engine
で作ったイラストクイズみたいなブラウザゲームです。


遊んでみる(アツマールに移動します)

BGM・効果音はスキップモア様からお借りしました。
ありがとうございます。

10ターンの間、正解の道を進むとクリア!
問題数は、10枚。
ランダムで表示されます。

大体、パッと見てわかるものが多いですが
中にはじっくりみないとわからないかもしれない
ちょっと意地悪なのも混ざっています。

楽しんでね!


拍手[0回]

前回までのあらすじ。

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

サンプルに毛が生えただけの処女作がこちら

そしてついに、オリジナルのミニゲーム作ったよ!
15秒間に動くハートに何回タッチできたかを
ランキングで競うゲームだよ!

ハートにタッチ」遊んでね!

ユーフルカさんの各種素材をお借りました。
ありがとうございます。

処女作でできなかったタイトルの演出は、結局自力では無理と判断して
公式さんに教えてもらったので、ばっちりです!

方法はとても簡単だったけど、私は可能性から除外していた方法だったので
目からうろこが落ちました。

定期的に処理を実行する、を使えばよかったのでした。

一応、機能確認で命令文自体は試していましたが、使い方が違っていたのでした。
321とカウントしてゲームを開始する具体的な作例は、以下の通り。

scene.setInterval(function () {
   if (残り秒数が 0) {
     // 繰り返し解除
     // ゲーム本編の処理(エンティティ生成など)
   } else {
     // 残り秒数を表示
     // 残り秒数を1減らす
   }
}, 1000); // 1000ミリ秒(1秒)おきに繰り返し処理

とのことで。

クリックしてからカウントを始めるには、もうちょっとひとひねり必要なのですが
私は以下の方法でつくりました。

クリックできるエンティティを作成
上記の秒数をカウントする変数を操作して、カウントを始めるようにする。
else の内容である、秒を減らす処理もif文で制御。

これで、クリック待ちのウエイトや、開始のカウントダウンのウェイトができました。
公式さんありがとうございました。

スクリプトの勉強せずに作れるのはここまでかな。
基本的な命令文だけでもアイデア次第で色々作れそうなので
もし興味を持ったら、とりあえずチャレンジしてみてね。

拍手[0回]

前回までのあらすじ。

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

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

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

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

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

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

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

if (wawa == 3) {
shot.y += -10;//変数wawaが3の弾は上へ移動
}
if (wawa == 4) {
shot.y += -10;//変数wawaが4の弾は右上へ移動
shot.x += 10;
}

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

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

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

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

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

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

Hopping Witch」も難しいなあ。
シーンを切り替える」あたりかなと思ったけど
私にはちょっと読み解けなかったです。

逆引きじゃないリファレンスで、g.game.pushScene()を検索するもヒットせず。
このリファレンスはどう使うものなのかな。
クリックでゲーム開始とか、ウェイトを入れてとか
わかりやすいサンプルが欲しいよね・・・
単体のサンプルじゃなくて
Hello World」にスタートボタンをを追加するとか
スタートのカウントダウンを追加する、みたいなサンプルが欲しいですね。

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

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

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

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

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

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


拍手[0回]

前回までのあらすじ。

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

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

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

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

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

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

結果


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

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

・・・・・・みあたらなかったw
けど、ゲームアツマールでの背景色を指定するというのがありました。
読んでみたけど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」を差し替えればよいよね。

・・・・・・ダメでしたw


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

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

今日はここまで~。

拍手[0回]

前のページ      次のページ
広告枠
アクセス解析

ATOM  
ATOM 
RSS  
RSS 


ソフトウェア制作講座





Copyright ©   YUWAKA'S SOFT   All Rights Reserved
Design by MMIT / TemplateB3  Powered by NINJA TOOLS
忍者ブログ [PR]