Bevy 0.6 に対応2022/01/13

Rust + Bevyで作成したゲーム「くるんくる~ぱ」を、Bevy 0.6に対応させました。

ブラウザ等、環境によっては動かないかもしれません。

開発プロジェクト(GitHub

ガイドに従えば0.6への移行自体はそんなに難しくはありませんが、0.5で作成した前回の記事で挙げられた点が結構改修されていますので、その辺りを主に並べてみます。


スプライトを半透明にする

SpriteSheetBundleと同じような感じで、SpriteBundleでもカラーのパラメータがSpriteに含まれるようになった。
これで透明度を変えるときでも、Assets<ColorMaterial>を持ち歩かなくて済む。

スプライトの加算合成

AlphaModeなんてのがあったから、これは?と思って見てみたが、どうも2Dのスプライトに使うものでもないらしい。そもそも、ブレンドモードに加算合成が無い……

需要はありそうなもんだが、何か見落としているのだろうか?

テキスト描画

Text2dBundleTransformが、テキストの拡大率や回転角に影響するように変更された。
紹介ページでは、サイズを変えたきゃ「フォントサイズ」を変えることを勧められているけど。

Web対応

標準でWeb対応されて、特にプラグインを入れることなくコマンドオプションだけでWeb用にコンパイルできる。
そのためなのか、それとは別の話なのかはわからないが、Web版のテストにはwasm-server-runnerを使うようになっている。

いくつか注意点があって、wasm-server-runnerではこちらの用意したhtmlを介さないからなのかWindowDescriptorでcanvasを設定すると動かなかった。少なくともデバッグビルドでは設定を外す必要がある。

また同様に、小細工ができないので音が鳴らない。

wasm-server-runnerの設定かなんかでやりようがあるのかもしれないが、致命的な問題でもなかったのでほっといている。

最後に

コンパイル・デバッグの方法の変更でちょっと手間取ったりもしましたが、プログラム自体のBeby0.6への対応は難しくありませんでした。カプセル化されたクラスで変更点を吸収してしまうようなオブジェクト指向型のエンジンに比べると、修正箇所が多いような気もしますが。

スプライトの半透明(カラー)設定なんかは、0.6ですっきりした形になって扱いやすくなりました。むしろ、0.6を待ってからゲームを作り始めていればあんな苦労は……



Rust + Bevyでゲーム作成2021/12/22

何か必要に迫られてというわけではないけれど、
 Rustあたりは触っておいた方が良いかなと、
 ゲームエンジンBevyを使用してミニゲームを作ってみました。

くるんくる~ぱ

くるくるアクションパズル くるんくる~ぱ

ブラウザ等、環境によっては動かないかもしれません。

開発プロジェクト(GitHub


Bevyの基本的な使い方は紹介ページもありますし日本語でもいろいろな所で解説されていますが、実際にゲームを作るとなるとそれ以外にも必要な事が出てきたり様々な問題にぶつかったりもします。
今回の経験から、そういった点をいくつか挙げてみます。


スプライトを半透明にする

 アルファ値(を含めたカラー)を設定するには、ColorMaterialのcolor:Colorを変更する。
 同じ大きさのスプライトを複数まとめたSpriteSheetBundleを使った場合にはTextureAtlasSpriteを持ってきて、そのメンバのcolorを変更すれば良い。
 ただし SpriteBundleでは materialがHandle<ColorMaterial>なので、ResMut<Assets<ColorMaterial>も持ってきてそこからget_mutでColorMaterialを取り出す必要がある。
 SpriteBundleSpriteSheetBundleも似たようなものだと思うのだが、何でやり方が異なるのだろうか?

ちなみにSpriteBundleでもスプライト作成時に設定するのなら、ResMut<Assets<ColorMaterial>>にaddする前に変更してしまえば良い。


スプライトの加算合成

 加算合成を含めた描画モードの変更の仕方だが、結局わからなかった。
 このゲームでは省いても何とかなったけど、エフェクトなど他のゲームではよく使われる手法なのでやり方がわからないと困りそう。


テキスト描画

 テキストの描画はText2dBundleでエンティティを生成

は良いとして、
transformのscaleを変更しても、拡大率が変わらなかった。
何か使い方を間違えているのか、そういうものなのか……


場面の切替え

 タイトル画面からゲームへなど場面を設定して移行する機能で、他のエンジンでは"シーン"などと呼ばれることもあるが、Bevyでは"State"となっている。
 SystemSetで各Stateごとにシステムを登録することによって、動作を切り替えることができるようになっている。

切り替え時には画面も変わるということでそのStateで生成したエンティティなんかを削除してまっさらにして欲しいものだが、それは自前で行う必要がある。
 エンティティをすべてクリアするとか、ある時点の状態に戻すとかそういう機能があれば便利なのだが、そんなのは見つからなかったのでこのゲームでは

State開始時に存在しているエンティティのidを記録しておいて、終了時にそれ以外のエンティティを全部削除

するようにしている。あまりカタギじゃないやり方なので真似しない方が良いかも。
 そのState中で作られるエンティティに目印としての構造体を insertしておくという手もあるが、面倒だし付け忘れても動作はしてしまうのが怖いところ。

また、あるStateから同じStateに直接切り替えることはできない。
 GAME OVERの後、同じゲームStateを最初からやり直したかったのだが、一旦ダミーのStateに切り替えてからすぐにゲームのStateに戻すようにしている。めんどくさいことに。

あとフレーム処理絡みで問題があるのだが、それは次の項で。


フレーム処理

 1秒間に60回とか30回とか、決まった間隔で処理を行う機能。
 ここにあるように、フレーム処理させたいシステムの前に  .with_run_criteria(FixedTimestep::step( 間隔 ))
を差し込むだけ。簡単。

なのだが
 一つ問題があって、これを差し込んだ後のシステムは Stateを無視して実行される(っぽい)。
 他のStateの実行中に、そのStateの初期化部分も通らず繰り返し部分が実行されてしまうので当然エラーになる(むしろエラーで止まってくれて助かった)。

そのために、with_run_criteriaにchainで

 現在そのStateの実行中か

という判定を挟んで対処している。なんなんだ一体。


Web対応

 チートブックには2つのやり方が示されているが、bevy_webgl2_app_templateを使う方を選択。Webに対応するというよりは、Webに対応されたひな型を元にプロジェクトを作るという感じ。

ただ、ブラウザで実行させてみるとちょっと画面が荒い。なぜかサイズが1.2倍に拡大されている。どこかに設定でもあるのかと探してみたが見つからなかったので、プログラム側で対処してみた。

具体的には、

・ウィンドウ生成時のサイズを1.2分の1
 ・カメラのスケールを1.2に
 ・マウスカーソルの座標を1.2倍に

の3ヵ所。


オーディオ再生

 WebではBevyの標準のサウンドシステムは使えないらしいので、ここに従ってbevy_kira_audioを組み込んでみた。
 featuresに"mp3"を含めるとコンパイルエラーが出るけど、どうせoggしか使っていないので他は削除して対処。

ブラウザで実行してみると音が出ない。どうも、Webページではユーザーのアクションがあるまで音を鳴らしてはいけないという規則のせいらしい。
 画面をクリックしても音は出なかったが、おそらくクリック前にオーディオの初期化をしているとかそんな感じなんだろう。よくわからないが。

よくわからないまま、Googleのページのコードをhtmlに張り付けて、無事に音が出るようになった。


この記事について

 いろいろと問題点やその対処法を挙げてみましたが、いかんせんRust・Bevyの初心者が見よう見まねとその場しのぎでゲームを作っただけなので、もっとシンプルでスタンダードな手法があるとか、そもそも何か勘違いしているとか怪しい点もあるかと思います。

この記事はこれからBevyで何かを作ろうとする方ではなく、よくBevyをわかっている方に初心者がつまずく点ということで参考にしてもらえるとありがたいです。




P/ECE ゲームとアプリ2021/09/10

大昔に作ったP/ECEのゲームとアプリ。
なぜだかまだ需要があるらしいので、ここに並べておきます。



反射パズル  いしかり mini

いしかり mini

ダウンロード(Ishikari.zip:42.4KB)

開発プロジェクト(GitHub)



アクションパズル  くるんく・るっぱ

くるんく・るっぱ

ダウンロード(Ruppa.zip:27.6KB)



3Dドライブゲーム  ドライブ風

ドライブ風

ダウンロード(DriveF.zip:29.7KB)



アクションパズル  しかくーる

しかくーる

ダウンロード(Shikaku.zip:31.4KB)



パズルゲーム  よこぎろ

よこぎろ

ダウンロード(Yokogiro.zip:28.2KB)



格闘カードゲーム  よむやも

よむやも

ダウンロード(YomYamo.zip:48.9KB)



パズルゲーム  はんてーな

はんてーな

ダウンロード(Hantena.zip:20.2KB)



パズルゲーム  くるんくる

くるんくる

ダウンロード(Kurun.zip:11.3KB)



占い?  今日の運勢

今日の運勢

ダウンロード(Fortune.zip:7.75KB)




「みんなで いしかり」でのアツマールAPIの使い方2019/11/25

反射パズル みんなで いしかりでは、ユーザーがオリジナルステージを作成・公開することができます。
ステージデータの管理などアツマールAPIの機能を使っているのですが、その具体的な方法を以下に挙げてみます。


1.ステージデータの取得
公開されたステージでのデータは、制作したユーザーの共有セーブに保存されています。
それらの取得のために必要な共有セーブを持つユーザーのリストは、ランキング機能であるスコアボードを利用しています。

こういう場合ユーザー情報APIで最近プレイしたユーザーの情報を取得して使うのが一般的なようですが、このゲームでのステージエディットは少しハードルが高いこともありステージを公開しているユーザーが押し出されてしまう可能性があります。
ステージを公開した時だけプレイヤー間通信の有効化を行うという手もありますが、一旦公開したステージを非公開にして共有データが無くなる可能性も考慮して、スコアボードを使うことにしました。

ステージ作成側は、
・ステージ公開時
・起動時
にスコアボードに日にちをスコアとして登録します。起動時にも登録しているのは、新しいステージを作成しなくても埋もれてしまわないようにするためです。

そして作成ステージをプレイする側は、scroreboards.getRecordsでユーザーのリストを取得します。
日にち(1970/1/1からの日数)をスコアとしているので新しいほど上位にきますが、リストにさえ入っていれば順位は処理に関係ありません。


2.作成したステージをTwitterで紹介
APIの使い方自体は、特に変わったことはありません。
screenshot.setTweetMessageで、クエリ文字列を設定して、screenshot.displayModalでユーザーがツイート、
そのリンクで起動した側はquery[key]でステージ情報を得る
という処理になっています。

クエリ文字列には、ステージのデータと作成したユーザーの情報が丸々入っています。
ステージ情報をデータベース等で一括管理していれば通し番号でもやり取りすれば良いのですが、データ自体が個々のユーザーの共有セーブにあり変更されたり無くなったりすることもあるので、パラメータの文字列だけでステージを再現できるようにしました。


3.ステージ作者情報の表示
そういうAPIがあったので、せっかくだから使ってみました。
ステージを作ってくださったユーザー様の宣伝に、少しでもなってくれればというところでもあります。


4.できなかったこと
ユーザーシグナルあたりを使って、オリジナルステージを遊んだ人の数やクリアした人の数を制作者に伝えるようにしてみたかったのですが、取りこぼしがあったり制作者が定期的に起動する必要があったりするのであきらめました。値が不正確では、あまり意味もありませんので。

何かしらのフィードバックがあった方がステージの作り甲斐もあるのですが、そこはTwitterでのステージ紹介を使ってなんとか……



「みんなで いしかり」 エディットモードの詳しい説明2019/11/23

RPGアツマールで発表した


オリジナルステージ作成のための、エディットモードの詳しい説明です。


はじめにタイトル画面で「ステージ作成」を選ぶと、ステージ選択画面に移行します。

自作ステージ選択

最初はまだ作成されたステージが無いので、光線発射台だけのブランクステージが並んでいます。先頭のステージだけが選択可能なのでタップすると、テストプレイ画面になります。
ここでは作成されたステージのクリア確認や公開の設定等を行うのですが、まずはそのステージを作るために右上の「エディット」ボタンを押してステージエディット画面に移ってください。


エディット画面

右側に4色それぞれの石が並んでいます。これらの石をドラッグ&ドロップで左側のステージ上に配置して、オリジナルステージを作っていきます。
一旦ステージ上に置いた石も同様に動かすことができます。また、ステージ外に置くと消去されます。

ステージ上・右側どちらの石もタップで、反射板の向きそして反射板無しを切り替えます。

光線発射台も石と同じようにドラッグ&ドロップで動かすことができます。ただし、画面外に置いても消去されることはありません。
また、タップすると光線発射の向きが変わります。


オリジナルステージが完成したら、「プレイ」ボタンでテストプレイ画面に戻ってください。
ここでは通常のゲームプレイ同様に、ステージを楽しむことができます。

みんなでいしかり テストプレイ画面

作成されたステージを解いて、クリア可能であることを確認してください。
一度クリアが確認されれば、「メニュー」から「ステージを公開する」や「Twitterで紹介」で、ステージを他のユーザーに公開することができます。

ステージを修正したい場合は「エディット」ボタンで再びエディットモードに移ってください。
石の配置を変えたりするとまたクリア確認が必要になりますが、以下のような解き方が変わらないような変更の場合はクリア状態が維持されます。
・反射板の向きを変える
・別の色の石に替える
・反射板の無い石をある石に替える
・反射板の無い石を取り除く


・補足
エディットモード時の「メニュー」→「ステージチェック」で、現状のステージがクリア可能かどうかチェックすることができます。あくまでクリア可能かどうかのチェックで、解答を教えてくれるわけではありません。

この機能を利用して、まず適当に石を配置してクリア可能であることをチェック。そしてテストプレイで挑戦してみる、というように手軽に新しいステージで楽しむことができます。

自分で解くことができたら少し体裁を整えて、ぜひ他のユーザーに公開してみてください。