原カバンは鞄のお店ではありません。

Unityを使ったゲーム制作のあれこれを綴っていきます。

【進捗報告】unity1weekに参加せずに何を作っていたか

f:id:Karvan:20210914203659p:plain

ハッシュタグ

TwitterやらInstagram等でハッシュタグだらけの投稿を見ると自然とそのアカウントをブロックしてしまう皆さんこんにちは。アフィか地球市民的ジジババの腐臭が漂っているので見るに堪えません。

 

unity1week

前回の記事でも紹介しましたがunityroomの方でunity1week開催中で現在は(名目的な)開発期間が終わり評価期間に移行したので投稿作品を遊ぶことができます。

unityroom.com

今現在で200を超える作品が投稿されていますが評価期間中でも投稿は可能で、しかも評価期間は二週間あるで最終的は500近い作品数になると思われます。
昨今ではプロの作品かと思えるような完成度が高いものもあり、その作品の一部がアプリ化したり、switch等で販売されたりして注目度が上がっている当コンテスト、私も参加したかったのですが多忙すぎて手が回らず断念。今回は遊ぶ側に回りたいと思います。

 

何をしていたのか

以前から取り上げていますが集英社のゲーム企画コンテストが今月末の締め切りとなっています。

game-creators.camp

 

また、講談社のゲーム企画コンテストの方も来月末が締め切りなので、それらのデモ版作成に追われており他の事に手が出せない状況となっています。

creatorslab.kodansha.co.jp

 

去年から作り続けている脱出ゲームも開発がストップしており、いい加減そちらの方も仕上げていかないとエターナる(永遠の未完のまま終わる、という意味)心配でも出てきました。

f:id:Karvan:20210914012147g:plain

本当は11月にリリースする予定だったんですがね、到底間に合わない。

 

進捗を並べる

当面の目標は集英社向けのゲーム企画の方ですがこちらは何とかデモ版が完成しそうです。
デモ版と言いつつプレイアブルデモ(体験版)ではなく、動画撮影用のデモ版で実際に遊ぶことはできないんですが、とりあえず最終局面のボス戦までは作成しました。

 

f:id:Karvan:20210914011957g:plain

ボス登場シーンから

 

f:id:Karvan:20210914011851g:plain

攻撃をかわすシーン

 

f:id:Karvan:20210914011925g:plain

倒すところまで

 

これからの予定

そろそろ講談社向けの企画の方にも力を入れないといけません。
こちらはプレイアブルデモを作れそうですが、なんせ締め切りまで時間がないのでやっぱり動画撮影用のデモを作って手一杯になるかもしれません。

f:id:Karvan:20210914012038g:plain

企画書も書かないといけないしなぁ・・・・

【Unity】今更ながらBlend Treeを使う

f:id:Karvan:20210907210733p:plain

後だしジャンケン

辞めろ辞めろと言いながらいざ辞めるとなったら無責任だと文句意を言い、強いメッセージが必要と訴えるのに具体的な内容は口にしない後だしジャンケンが得意な皆さんこんにちは。各自思うところはあると思いますが、感染対策が焦点なのに「学術会議任命拒否問題がー」とか言ってる報道特集はどこを向いて報道しているんだろうと思う。

 

地上波デビュー

前回の記事でもお伝えしましたが、私が以前unityroomに投稿した作品「Supra animus quo」がテレビ朝日の「会心の1ゲー」という番組で取り上げて頂きました。

 

特に盛り上がり処の少ない作品だと思うのですが、MCの方に「面白い」「オシャレ」等々の言葉を掛けていただき感謝しかありません、ありがとうございます。

 

unity1week

この「Supra animus quo」はunity1weekの投稿作品ですが、今週からまたそのunity1weekが開催されています。
今回のお題は「ちゅう」だそうで少し難しいお題かなという気もしますが、最近ではこのunity1weekから「Supra animus quo」のようにテレビに取り上げられる作品が色々と出ているので、今回も数多くの作品が投稿されると思います。

unityroom.comまぁ、私は残念ながら参加できそうにないんですがね。。。

 

アニメーションの切り替え

例えば3DのSTGとかACT等で対面の敵と正面で対峙しつつ横に移動する、といった場面を作る場合、自機は敵と正面を向いたまま敵の周りを公転運動のように移動することになり、敵側も自機の方向を向かせるためにその場で回転させるような動作を行う必要があります。
とはいえ敵側を立ったまま(Idle状態のまま)回転させると違和感しかない絵となってしまいます。

f:id:Karvan:20210907211211g:plain



なので敵側はその場から移動しないにせよ「歩く」ようなアニメーションをさせたいのですが、通常通りアニメーションのステートマシンを利用して「立ち状態」→「歩き状態」にアニメーションを切り替えると、これまた動作が唐突過ぎて微妙な感じ

f:id:Karvan:20210907211255g:plain

そのため、より自然なアニメーションの切り替えを行うためにはステートマシンでなくBlend Treeを使って切り替えを行う事になります。

 

Blend Tree

BlendTreeはアニメーションステートマシーンの中の一つのステートとして作成します。
[Animator]タブのステートマシーン画面の中で右クリックし、メニューの中からCreate State → From New Blend Treeを選択します。

f:id:Karvan:20210907211432p:plain

作成されたBlendTreeをダブルクリックすると、

f:id:Karvan:20210907211457p:plain

BlendTreeの設定画面へ移動します。
今回の場合は「Idle」と「Run」の二つのアニメーションをBlendTreeで切り替えるので、BlendTreeを右クリックしAdd Motionを選択

f:id:Karvan:20210907211519p:plain

「Idle」と「Run」の二つのアニメーションクリップを追加、Inspector上には下図のようにパラメータやアニメーションクリップが表示されます。

f:id:Karvan:20210907211549p:plain

Inspectorからわかるようにここでは[Blend]という値を0~1に変更して0に近いほど「Idle」のアニメーションが、1に近いほど「Run」のアニメーションが強く反映されるようになります。

 

スクリプトを組む

[Blend]の値を指定した時間で0→1、1→0に変更するようスクリプトを組みます。
Easingを考慮するならDotweenのToやiTweenのValueToを使っても良いですが、今回は単純な(Linerな)変更でよいでUpdate関数内でSetFloatをコールして変更するようにしました。

    static readonly int BLEND_KEY = Animator.StringToHash("Blend");
    Animator Animator;
    
    public float BlendTime;    // Idle → Walkの変更時間
    public float IdleTime;     // Walk → Idleの変更時間
    
    private void BlendWalk(float deltaTime, bool isRev)
    {
        float nowBlend = Animator.GetFloat(BLEND_KEY);

        float modBlend = 0.0f;
        if (isRev)
        {
            modBlend = nowBlend - deltaTime / IdleTime;

            if (modBlend < 0.0f)
            {
                modBlend = 0.0f;
            }
        }
        else
        {
            modBlend = nowBlend + deltaTime / BlendTime;

            if (modBlend > 1.0f)
            {
                modBlend = 1.0f;
            }
        }

        Animator.SetFloat(BLEND_KEY, modBlend);
    }

 

ちなみにアニメーションステートマシーンの設定はこんな感じ、[Blend]の値が0.1以上になると最初の「Idle」のステートから「BlendTree」のステートへ、0.1以下になると「BlendTree」から「Idle」へ戻るようになります。

f:id:Karvan:20210907211755p:plain

これで実装は完了したので、実行すれば敵側が自機側の動き合わせて、Idle状態から徐々に歩き出すアニメーションとなり、逆も徐々に動きが止まる動作となります。

f:id:Karvan:20210907211848g:plain

ステートマシンを利用した時と比較するとかなり自然な動作になったと思います。

 

【Unity】立体スライドパズルできるかな(検証編)

f:id:Karvan:20210831202728p:plain

100日後に○○

例のワニ以降、SNSで「#100日後に○○」とタグが付いた投稿が増えていて安易だなぁと思いつつ「#100日後に退職する47歳」の投稿を楽しみにしている皆さんこんにちは。
IT業界の土方作業を経験した方なら誰しも身に覚えのある話ばかりで、私も興味深く拝見させてもらっています。現場には顔を見せない上役や営業が電話やメールやらでどんどん口を出して混乱している現場を更に混乱させる有様はこの業界のあるあるですね。

 

会心の1ゲー

テレビ朝日で毎週木曜深夜に放送されている「会心の1ゲー」という番組で、私が以前unityroomに投稿した「Supra animus quo」というゲームを遊んでいただけたらしく、その模様が今週分の放送回で放送されるそうです。

 

tver.jp

また、同じくunityroomに投稿した「The two met」も9月分の放送で紹介して頂けるそうで誠にありがたい限りです。
以前よりこの番組ではunityroomの投稿ゲームをいくつか取り上げており、私も小耳にはさんでは内心羨ましく思っていたのですが、まさか二つもピックアップしてもらえるとは夢にも思っていなかったので驚くばかりです。残念ながら私の住んでいる地域では放送されていないのでTVerでの配信待ちになるのですが、配信されたらPCの前で正座して視聴したいと思います。

 

立体スライドパズル

さて、前回はRenderTextureでcameraの映像を表示させた平面を立方体の形状で分割させて、3D空間が分割された(ように見える)画面を作ることまでできました。

後はこれをスライパズルの要領で動かせばパズルの完成だと思っていたのですが・・・

f:id:Karvan:20210824195318g:plain



結果としては思った通りにはいきませんでした。理由は大きく二つほどあって、一つは分割した映像を違う位置へ違う位置へ動かしてみると

f:id:Karvan:20210831203505p:plain

こんな感じになります。3D空間が分割されたというよりは側面に映った映像が分割しているようにしか見えない。


各立方体の初期状態では見えていない面に対しては何も描画しないようにしているのですが、このため立方体の「中に」オブジェクトがあるようには見えず、立方体の「側面に」映っている用しか見ない。

f:id:Karvan:20210831203544p:plain

もちろん位置を動かした時に両面すべて表示させることもできるのですが、そうした場合も問題があって、それがもう一つの問題「ステンシルバッファを利用してマスキングした部分が二つの立方体で重なった場合に描画順を制御できない」という問題。

 

f:id:Karvan:20210831203818g:plain

上の動画を見て一瞬、「ん?」と不思議に思う箇所があると思います。
それもそのはずホール部分が中央下に来た時、上の立方体部分の中に下の立方体の「通常では見えない部分」の映像が見えています。

f:id:Karvan:20210831204105p:plain

この部分

 

これはステンシルバッファに書き込む描画順が「下の立方体→上の立方体」ではなく「上の立方体→下の立方体」となっているため、ステンシルバッファに書き込まれる値が「下の立方体のステンシル値」で上書され、結果として下の映像が映し出されているのだと思います。

調べてみるとunityでは不透明分の描画順はZ方向に厳密にソートされているわけでなくRenderQueueの値も影響するらしいので、厳密に描画順を決定するならこのRenderQueueを変える必要があるらしい。

 

とはいえ、これは静止画でなくパズルとして各立方体の位置を動かす必要があるため、RenderQueueの値で調整するのは難しいと思います。

パズル内の場所によってステンシルバッファに書き込む値を決めて参照時に「Greater/Less」でレンダリングするという手も考えたのですが、そもそもシェーダのステンシル値を動的に変えられるのかも不明で、う~ん、どうしよう。。。と悩んでいる最中です。





 

【Unity】立体スライドパズルできるかな(構想編)

f:id:Karvan:20210824193431p:plain

Oculus Quest 2

ネットの記事に煽られてOculus Quest 2を購入したものの使い道が思い浮かばない皆さんこんにちは。去年購入したPSVRが左側の音声が聞えなくなり、PS-StoreにBeatSaberの追加コンテンツがちっとも追加されない事もあって乗り換えを決めたのですが今のところBeatSaber以外のVRゲームを購入する予定はないし、VRゲームを制作する予定もないのでムフフなビデオを観る以外はただのインテリアになりそうで怖いです。

 

立体スライドパズル

従来、スライドパズルと言えば連番の数字だったり、分割された二次元のイラストや図形を正しい位置へ戻すパズルでした。


私も夏休み期間、RenderTextureで表示された映像を使ったスライドパズルを作ってみたのですが 

f:id:Karvan:20210824193556g:plain

その時ふと思ったのです、「立体的(に見える)スライドパズルが作れないか」と。
見えるだけなので、実際の3Dモデルを分割するわけでありません。

例えば下のようなジオラマの3Dモデルがあったとして

f:id:Karvan:20210824193836p:plain

それを写した映像をRenderTextureで平面(Quad)に描画

f:id:Karvan:20210824194124p:plain

その平面の前後に同じようなジオラマの3Dモデルを置いてみると、

f:id:Karvan:20210824194222p:plain

 平面と3Dモデルの境が見えなくなり、ジオラマがそのまま並んでいるように見えます。

 f:id:Karvan:20210824194440p:plain

なのでこの平面を直方体の枠線にそって分割すれば、見た目的に3D空間が分割された直方体が出来そう。

f:id:Karvan:20210824194540p:plain

そしてこれをスライドパズルのルールにそって動かせば「立体スライドパズル」を作る事ができるのではないか。そう考えたわけです。

 

平面の分割とマスキング

RenderTextureで描画された平面を複数の面に分割する手法は以前の記事で紹介しているように、分割面毎にMaterialを用意してそれぞれでTillingとOffsetの設定を行う事で実現する事ができます。詳細は下の記事を参照してください。

【Unity】RenderTextureを使って動くパズルを作る - 原カバンは鞄のお店ではありません。

 

この分割面をステンシルバッファを使用して直方体の枠線内の部分のみを表示させます。ステンシルバッファを使用したマスキングについては以前にもこのブログで取り上げています。

【Unity】ステンシルバッファを使って窓を作る - 原カバンは鞄のお店ではありません。

 

実際に中央下の部分のみを表示する平面を作り、直方体の表面(左右のみ)に形にマスキングするとこんな感じになります。

f:id:Karvan:20210824195043p:plain

後は同じように他の部分も作り、一枚の平面になるように並べます。

 並べる過程をアニメーションにしてみましたが、どうでしょう?空間が分割されているように見えますかね?

f:id:Karvan:20210824195318g:plain

 

一応この状態でジオラマ内と映像内とで列車のモデルを同期して動かしてみると、空間が続いている(ジオラマと平面の境目が分からない)ように見えるので構想通り上手くいっていると思います。

 f:id:Karvan:20210824195412g:plain

 

スライドパズル化は次回

 ここまで作成した段階でタイムオーバーとなったので、これをスライドパズルにするのは次回となります。
実際のところ分割面の設定と配置はちょっと面倒で時間が掛かるので手軽に「やって見てください」とは言えません。
設定がちょっとでもずれると一枚絵に見えないし、ジオラマとの境目も目立ってしまい成り立たなくなるので。

 

この為、今のところ上手くいっている個所もパズルとして配置の場所を動かすと立体的に見えなくなるのではないか、という不安もあります。
成功しても失敗しても記事として纏めるとは思いますが・・・

 

【超小ネタ】Scaleの値をマイナスにするとどうなるか知ってる?

f:id:Karvan:20210817212136p:plain

真夏の長雨

「だからお前ら外に出るなって言ってるだろう!」と天が怒っているかのような季節にそぐわぬ長雨で折角の夏季休暇を殆ど部屋の中で過ごした皆さんこんにちは。私は5月に注文した新PCが丁度納品されて来たのでセットアップやら旧PCからのデータ以降やら色んな会員サービスの新PCからのログイン&二段階認証やらで右往左往していました。「このアカウントに新しい場所からログインしようとしています・・・」という文面を読むのはもう飽きました。セキュリティ上、仕方がないのは分かりますが面倒くさ過ぎ。

 

夏季休暇中の作業

そんなこんなでバタバタしていましが一応時間だけはたっぷりあったので、夏季休暇中は集英社のゲーム企画コンテストに応募する用のゲーム作成に勤しんでいました。
ゲーム作成といってもプレイ動画を撮る為のデモ版なので実際に遊ぶことは出来ませんが

f:id:Karvan:20210817212258g:plain

これで4分の1ぐらいでしょうか。締め切りが9/30なのでそれまでに完成できるよう頑張ります。

 

超小ネタ

上記のデモゲームを作っているときに気づいたのですが3Dモデルのtransformのscale値をマイナスにするとどうなるか知ってますか?

 

f:id:Karvan:20210817212436p:plain

それぞれの方向で反転します。

これが何に使えるのかなぁ、と考えたのですが"間違い探し"ぐらいでしょうか。

f:id:Karvan:20210817212545p:plain

これをオリジナルとして、オブジェクトを全てX方向反転するとこんな感じ。

f:id:Karvan:20210817212700p:plain

オブジェクトを全てZ方向反転するとこんな感じ。

f:id:Karvan:20210817212832p:plain

オリジナルと並べると間違い探しゲームになります。

 

あとは・・・鏡を作ると時にRenderTextureを使うかと思いますが、そのままだと左右反転しないので鏡のモデル自体をX方向反転する必要があります。

f:id:Karvan:20210817213132g:plain

これぐらいかな?







 

【Unity】アセット紹介:Volumetric Fog & Mist2を使ってフォグエフェクトを作る

f:id:Karvan:20210803171946p:plain

突然の知らせ

5月に注文して9月中旬頃に納入される予定だったPCが今月に入って突然「今週届きます」の知らせが届いてちょっと焦っている皆さんこんにちは。現在使っているPCの中を全然整理できてないので暫くは二台運用する事になりそう。とりあえずサイドテーブルを購入しました。

 

Volumetric Fog & Mist2

UnityではFogエフェクトを使いたい場合、Lightingの設定から簡単につけることができますが、これはカメラからの距離に応じてオブジェクトに色を重ねるエフェクトなので存在感のあるFog(霧)を作るのはなかなか難しいです。
今回紹介する「Volumetric Fog & Mist2」はそんなリアルで現実感のあるFogを簡単に作ることができるエフェクトアセットです。

これはカメラエフェクトのアセットなのでシーン内に実際のFogが作られるわけでなく、カメラの映像にFogのエフェクトを掛けて使用するアセットであることに注意が必要です。
シーン内で複数台のカメラを切り替えて使いたい場合などは各カメラそれぞれにFogエフェクトを設定する必要がありますし、逆に複数台のカメラの映像を重ねて使っている場合はどのカメラにFogエフェクトを設定すべきが考慮する必要があります。

 

導入は簡単

前述の注意点を除けば導入はすごく単純でFogエフェクトを設定したカメラに「VolumetricFog&Mist」のコンポーネントをアタッチするだけです。

Fog設定の細かい設定はProfileが何種類か用意されているので、その中から好みの設定を選択して使うこともできます。

 

f:id:Karvan:20210803172242p:plain

VolumetricFogの設定前

 

f:id:Karvan:20210803172313p:plain

VolumetricFogの設定直後

前述のようにこのアセットはカメラエフェクトのアセットなので、上の図のような画面はSceneタブ画面でなくGameタブ画面で確認することが来ます。(Sceneタブ画面ではFogは表示されない)

 

Fog Area

上の図では霧の向こうに建物が見えるのでどこまでも霧が掛かっているように思えますが、実際は「VolumetricFog」コンポーネントで設定された領域内だけにFogエフェクトが掛けられている状態となっています。よって、そのエリアから離れた場所(建物の手前)ではFogエフェクトは一切かかっていません。

 

f:id:Karvan:20210803172434p:plain

建物の手前のエリアはこんな感じ

この為、例えば建物の周りにFogを発生させたい(Fogエフェクトを掛けたい)場合は、「Fog Area」の設定で「Center」の座標に建物座標を指定するか、「Follow GameObject」に建物のオブジェクトを指定する事になります。

f:id:Karvan:20210803172515p:plain

 

この「Fog Area」の設定で建物のオブジェクトを指定すると

f:id:Karvan:20210803172552p:plain

こんな感じに変わります。

 

Fog Geometory

上の図では建物の周りにFogが掛かっているのを確認できますが、Fogに厚みを感じません。
Fog事態の大きさ等の設定を変えるには「Fog Geometory」の項目を変更します。

f:id:Karvan:20210803172703p:plain

初期の「Fog Geometory」設定

 

厚みを変えるには「Hight」の項目を大きくします。また、Fogの領域の広さやFogの強さは「Density」や「Noise Strength」の項目を変更します。

f:id:Karvan:20210803172727p:plain

変更後の「Fog Geometory」設定。このように設定を変えると

f:id:Karvan:20210803172825p:plain

全体的にFogが掛かった状態になりました。

 

これに「Fog Color」の指定でFogに砂漠のような色を付けてみると

f:id:Karvan:20210803172909p:plain

砂煙で覆われたかのような画面を作ることが出来ます。

 

Dynamic Fog

ここまでの設定を行った状態でカメラ位置を最初の遠景の位置に戻してみると

f:id:Karvan:20210803173156p:plain

こんな感じに変わってる。建物の周りにFogが掛かっているのは確認できますが、そこまでの領域にはFogがなくて少し寂しい感じがします。

新しいFogを追加したい場合は、カメラに「Dynamic Fog」コンポーネントを追加して新しいFogを表示します。

 

f:id:Karvan:20210803173248p:plain

この「Dynamic Fog」で建物までの間のFogエフェクトを追加して、最後にカメラを遠景の位置から建物まで移動させて見ると

f:id:Karvan:20210803173331g:plain

結構いい感じにFogエフェクトが掛かったゲーム画面が出来たと思います。

 

 

 

来週は夏休み期間につき更新はお休みです。

【備忘録】UnityアセットのKoreographerで音ゲーを作る

f:id:Karvan:20210727220033p:plain

小学生理論

取りあえず自分の周りの不都合な出来事はオリンピックの所為にしとけば良いと思っている皆さんこんにちは。きっと私の給料が上がらないも彼女ができないのも四連休後の月曜日がひどく憂鬱なのもオリンピックの所為に違いありません。まぁ、でも「オリンピックは開催されるのにロックフェスは~、子供の運動会は~、週末の飲み会は~」とか言っている割に平然と繁華街に出かけて夏休みの旅行プランとか計画している人は記憶障害か何かだと思います。自分以外の誰かが我慢して閉じこもれば良いって事なんでしょうね。

 

Koreographerというアセット

Unityのアセットで「Koreographer」という結構高額なアセットがあります。これは音楽と同期してイベントを発行してくれる、というアセットで、このブログでもずっと以前に取り上げています。

www.karvan1230.com

イベントの設定は音源の波形が表示された専用のエディタを使用するのですが、こちらは音源のBPMに合わせたグリッド線に沿って設定するので、一定のリズムでイベント発行させたい場合にはかなり使い勝手が良いものとなっています。

 

f:id:Karvan:20210727220308p:plain

白い線がグリッドで1ビートの間隔を表しています。上の図では4ビート(1小節)単位に太い線が引かれています。

逆に時間を指定してのイベント発行(曲開始から〇秒後にイベント発行等)には対応していないので、一般的なノーツが振ってくるような音ゲーを作ろうとした場合、画面をタップして欲しいタイミング=音が鳴るタイミングは設定できても、そこから〇秒前に遡ったノーツを生成するタイミングを設定するのには非常に不向きです。

 

以前、このアセットを使用したゲームを制作した時にはBPMから1ビートの時間を計算し、そこから逆算してイベント発行タイミングを設定していたので一曲分フルで設定しようとするとかなり面倒で手間のかかる作業でした。

 

今回はその手間を省いて「画面をタップして欲しいタイミング=音が鳴るタイミング」を設定するだけで〇秒前に遡ったノーツを生成するタイミングを計る手順を確立したので、(忘れないように)備忘録として記事に書きたいと思います。Koreographerとか興味ない方はごめんなさい。

 

事前処理

結論から先に書くと、「Update内でノーツを生成するタイミングを計る」という事になるのですが、これを行うために事前の処理が必要となります。

 

f:id:Karvan:20210727220534p:plain

上の図の赤い線の箇所が「画面をタップして欲しいタイミング」でイベント発行時の引数にはInt型の値を設定しています。

これらのイベントの設定は楽曲毎にKoreographerで作成されるKoreographerphyというコンポーネント内にイベント毎にKoreographyEventクラスとして情報が保持されているので、Start関数等の初期処理でこのKoreographyEventクラスを全てList等に取得しておきます

f:id:Karvan:20210727220635p:plain

 

Updateでの処理

KoreographyEventクラスにはイベントの発行位置をStartSampleプロパティに保持しています

これは上のエディタ画面の「Start Sample Location」の値で「曲開始からの時間」にサンプリングレート(KoreographyのSampleRateプロパティ)を掛け合わせた値を示しています。(以降、サンプルタイムと呼ぶ)

f:id:Karvan:20210727220831p:plain

 

この仕様に合わせて、ノーツを生成する為のオフセット時間にサンプリングレートを掛けた値をオフセット値として求めて

f:id:Karvan:20210727220906p:plain

Update内で現在のサンプルタイムにオフセット値を加算した値とKoreographyEventクラスのStartSampleプロパティを比較することでノーツを生成するタイミングをチェックします。

f:id:Karvan:20210727221012p:plain

説明はちょっと分かりづらいですが、ソースを見れば単純なロジックで実装できることが分かると思います。

 

使用例

Koreographerには上記の手法で作成された音ゲーがサンプルとして付属していますが、見栄え的には出来が良くないので自前で作ってみました。
飛んでいる鳥の前に障害物が出現、それを避ける場所にターゲットが表示されるのでノーツがそこへ移動したら画面をタップして鳥を移動させます。

f:id:Karvan:20210727221124g:plain

gifファイルで音が出せないので、右横の〇が色が変わるタイミングが「音が鳴るタイミング」だと思ってください。
ノーツが移動するタイミイグ = 〇の色が変わるタイミングになっていると思います。

 

やっぱり面倒くさいな・・・・

◇プライバシーポリシー

●個人情報の利用目的

当ブログでは、メールでのお問い合わせ、メールマガジンへの登録などの際に、名前(ハンドルネーム)、メールアドレス等の個人情報をご登録いただく場合がございます。

これらの個人情報は質問に対する回答や必要な情報を電子メールなどをでご連絡する場合に利用させていただくものであり、個人情報をご提供いただく際の目的以外では利用いたしません。

●個人情報の第三者への開示

当サイトでは、個人情報は適切に管理し、以下に該当する場合を除いて第三者に開示することはありません。

・本人のご了解がある場合
・法令等への協力のため、開示が必要となる場合

個人情報の開示、訂正、追加、削除、利用停止
ご本人からの個人データの開示、訂正、追加、削除、利用停止のご希望の場合には、ご本人であることを確認させていただいた上、速やかに対応させていただきます。

アクセス解析ツールについて

当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。

このGoogleアナリティクスはトラフィックデータの収集のためにCookieを使用しています。このトラフィックデータは匿名で収集されており、個人を特定するものではありません。
この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。

●免責事項

当サイトからリンクやバナーなどによって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任を負いません。

当サイトのコンテンツ・情報につきまして、可能な限り正確な情報を掲載するよう努めておりますが、誤情報が入り込んだり、情報が古くなっていることもございます。

当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。

●プライバシーポリシーの変更について

当サイトは、個人情報に関して適用される日本の法令を遵守するとともに、本ポリシーの内容を適宜見直しその改善に努めます。

修正された最新のプライバシーポリシーは常に本ページにて開示されます。