読者です 読者をやめる 読者になる 読者になる

クロスビーツ風ゲームシミュレーター PxB Editor作った

f:id:pentamania:20170315214624g:plain

リズムゲーム「クロスビーツ」チックな譜面を作れるアプリを作ってみました。
windows(64bit)用です。

作った譜面の例など

www.youtube.com

以下、使い方などを雑多に書いていきます。

ダウンロードと起動

以下のURLからzipファイルをダウンロードし、解凍して下さい。 アプリフォルダ内に"pxb-editor-[バージョン番号].exe"があると思いますので実行して起動します。

ダウンロード

はじめに

  1. まず「file」から「new music」を選び、音楽をロードします。
  2. 必要に応じて表の2列目先頭のBPM値(最初は120と書かれている部分)を直します。
  3. 表部分の適当なセルをダブルクリックしてノーツを配置します。(選択状態で何らかの数字を入力するでもOK)
  4. 上部の十字キーみたいなアイコン(もしくはQキー)を押すとシミュレータが起動します。(初回起動はちょっと時間がかかります。)配置した分だけノーツが流れてくるはずです。

判定の調整

  • おそらく音楽と表のゼロ位置がずれていると思うので、右のCONFIGの「offset」値を適当に変えて調整して下さい。
    • 楽曲開始が遅い場合はマイナス側に設定します(逆の場合はプラス値を設定します)
    • 音符アイコン・もしくはRキーを押すと簡易的に再生を行います。音合わせのときはこちらを使うと便利です。
    • 正しくBPM値が設定されていれば192CNTでちょうど一小節になるはずです。192毎にノーツを置くと調整しやすいかもしれません。
  • ノーツの挙動とか種類(フリックとかロング)はノーツを選択し、「NOTE PROPERTY」の表をいじって決めます。
    • 値を変えると「NOTE IMAGE」や表のセルに反映されるので参考にして下さい。
    • 本家と同様にposition, rotation, long end, flick-angleを変えられるほか、スケール・スピード・色味なども原作にない変更も可能。
  • CNT値をクリックすると、以降そこから途中再生を行うようになります。

=== 以降は中級者向けの内容となるので最初は読まなくていいと思います。 ===

BPMチェンジ

BPMのセルに新たに値を書き込むことでそのCNTからBPMが変更されます。

BPMの疑似変化

  • BPM-AMP行に数字を入力すると、そこからその倍率分BPMが変化(例えばBPM150で2を入力した場合、以降300に変化)します。
  • 実際に曲のBPMが変化してなくてもソフランを行わせたい場合に使います。

変拍子設定

  • 表上部の[DIV]を変更すると1小節(192CNT)を何分割するかを指定することが出来ます。なので12分配置などをしたい場合は都度ここを変更します。
  • 譜面の停止・逆走:CNT値を入力するとそのCNTに達するまで譜面を停止・逆走させることができます。
    • 停止区間中(逆走の場合は区間×2の範囲)にノーツを配置するとおかしなことになるので注意。

## その他の機能・知ってると良いこと - Zキーで0CNTにリセットされます。 - ミュート:トラックラベル内のチェックボックスにチェックを入れるとそのトラックのノーツは無視されます。 - ノーツスピードの変更:シミュレータ起動中に上下キーでスピードを変更可能(反応しないときはどこかを一度マウスクリックして下さい)

シミュレーターオプション

  • AUTOPLAYを切るとマウスを使って実際にプレイすることができます(超きつい)
  • MODEをGAMEにするとゲーム前演出、リザルト表示なども行います。(製作中・音出ません)
  • Shift+マウスホイールで表を横にスクロールできます

クイックセーブ・オートセーブ機能

雲アイコンで一時セーブを行うほか、アプリ終了時に自動的に最後の状況がセーブされます。

背景画像の設定

  • メニューの「背景画像を指定」でシミュレータ中の背景を変えることができます。(1024x768にリサイズされて表示されます)
  • 「クリア」でもとのスキン背景にもどります。

DnD読み込み

音源やプロジェクトファイル等をドラッグ・アンド・ドロップしても読み込むことが出来ます。

サンプルのロード

help > 「サンプルを読み込む」 でサンプルが読み込まれます

意見・バグ報告

とりあえずここのコメント欄で。後でフォーム用意するかも。

Photoshopで波形イメージっぽいやつを作る

正式名称は分かりませんが、音楽系ソフトとかで、 音圧レベル?をビジュアライズして波っぽくしたエフェクトがありますね。

f:id:pentamania:20160404010437p:plain

この絵の紫色の波のようなやつです。 ちょっと面白いエフェクトだと思ったので作り方をメモっておきます。

手順

  • 透明~[好きな色]~透明 のグラデーションを用意
  • 「フィルタ」 -> 「変形(distort)」 -> 「波形(wave)」を選択
  • 設定ウィンドウが出ると思います。設定値等はお好みで(低めに設定したほうがそれっぽいかも)
  • エッジを効かせたいなら「フィルタ」 -> 「シャープ(Sharpen)」 -> 「スマートシャープ(Smart sharpen)」で調整

「フィルタ」 -> 「ノイズ(Noise)」や、「フィルタ」 -> 「テクスチャ(Texture)」->「粒状(grain)」などをするとノイズっぽくなっていいと思います。

f:id:pentamania:20160404011217j:plain

参考サイト

http://liginc.co.jp/designer/archives/3110

ボクの名前を呼ぶときは、初めと終わりにカワイイをつけてください.js

某アイドルのマスターでシンデレラな感じの音ゲーをやってたらなんか自分の名前を呼ぶときは前と後ろに「カワイイ」をつけろとか言ってくるアイドルが出てきた。

そこで、正規表現でそのアイドルの名前をマッチして前後に「カワイイ」を書き加えるコードを書いてみた。

var input = "輿水幸子はゲーム『アイドルマスターシンデレラガールズ』に登場する自称・カワイイボクっ娘アイドルである",
     output = null;

    var str = input,  // 入力受け取り
        pf = "カワイイ*", //前に付け加える文字列
        sf = "*カワイイ", //後ろに付け加える文字列
        // マッチする名前を拾う
        n = str.match(/さちこ|サチコ|さち子|幸子|輿水幸子|こしみずさちこ|コシミズサチコ|さっちん|さっちゃん|さっちー/mg);

    var u, i, l;
    // 名前が見つかったら
    if (n){
        //名前の前後にそれぞれ”カワイイ”をつける
        for (i=0, l=n.length; i<l; i++) {
            //すでに整形済みの名前はスルー
            u = new RegExp(n[i]+'(?!'+sf+')');
            // 入れ替え
            str = str.replace(u, pf+n[i]+sf);
        }
        // 出力
        output = str;
        console.log(output); //"カワイイ*輿水幸子*カワイイはゲーム『アイドルマスターシンデレラガールズ』に登場する自称・カワイイボクっ娘アイドルである"
    }

使用例

ブックマークレット

javascript:(function(){var c="color:#FFE5FF;background:#b6c2e9;font-size:.6px;vertical-align:middle;",d=document.body.innerHTML,_p="%E3%82%AB%E3%83%AF%E3%82%A4%E3%82%A4%EF%BC%8A",_s="%EF%BC%8A%E3%82%AB%E3%83%AF%E3%82%A4%E3%82%A4",p="<span style="+c+">"+_p+"</span>",s="<span style="+c+">"+_s+"</span>",n=d.match(/%E3%81%95%E3%81%A1%E3%81%93|%E3%82%B5%E3%83%81%E3%82%B3|%E3%81%95%E3%81%A1%E5%AD%90|%E5%B9%B8%E5%AD%90|%E8%BC%BF%E6%B0%B4%E5%B9%B8%E5%AD%90|%E3%81%93%E3%81%97%E3%81%BF%E3%81%9A%E3%81%95%E3%81%A1%E3%81%93|%E3%82%B3%E3%82%B7%E3%83%9F%E3%82%BA%E3%82%B5%E3%83%81%E3%82%B3|%E3%81%95%E3%81%A3%E3%81%A1%E3%82%93|%E3%81%95%E3%81%A3%E3%81%A1%E3%82%83%E3%82%93|%E3%81%95%E3%81%A3%E3%81%A1%E3%83%BC/mg),u,i,l;if(n){for(i=0,l=n.length;i<l;i++){u=new RegExp(n[i]+'(?!'+s+')');d=d.replace(u,p+n[i]+s);}document.body.innerHTML=d;}})();

上の文字列をURL欄に張って実行します。

実行すると… f:id:pentamania:20151110074012p:plain

詳細は以下のような感じ

javascript:(function(){
        var c ="color:#FFE5FF;background:#b6c2e9;font-size:12px;vertical-align:middle;",
            d = document.body.innerHTML,
            _p = "カワイイ*",
            _s = "*カワイイ",
            p = "<span style="+c+">"+_p+"</span>",
            s = "<span style="+c+">"+_s+"</span>",
            n = d.match(/さちこ|サチコ|さち子|幸子|輿水幸子|こしみずさちこ|コシミズサチコ|さっちん|さっちゃん|さっちー/mg),
            u, i, l;
        if (n){
            for (i=0, l=n.length; i<l; i++) {
                u = new RegExp(n[i]+'(?!'+s+')');
                d = d.replace(u, p+n[i]+s);
            }
            document.body.innerHTML = d;
        }
})();

変数_pと_sの値を変えれば別の言葉を付け加えることもできます。

サーバー環境でenchant.jsのサウンドの挙動が変わって右往左往した話

実行環境の違いでenchant.jsが挙動が変わって苦労したときの記録です。

enchant.jsのバージョンは0.8.0でした。

 

作ったenchant.js製ゲームの動作チェックのため、ファイルをサーバーにあげてテストしてみたところ、

どうもローカルでの動作と違う・・・というかタイトル画面でフリーズしてしまいました。

サーバーの問題かと最初は思って、別のサーバーに上げてみたりするも結果は変わらず。

サウンド関係がおかしいのでは、と睨み、サウンド周りを色々いじってみたら、

どうやらenchant.js本体に問題があるようでした。

 

原因その1:enchant.jsのバージョンが古かった

よくよくコンソールを見たら

'webkitAudioContext' is deprecated. Please use 'AudioContext' instead.

と怒られていました。

そしてenchant.jsがストップしてしまっていたようです。

こんな表示はローカルでは見なかったのに...と思いつつ、

調べてみたらv0.8.1以上では修正されているようなので、最新版を見ながら該当箇所だけ修正。

しかし上記の表示は出なくなったものの、動作がおかしいのは変わらず。

 

その後console.logでサウンドファイルのロード状態をチェックしてみたり、

コンソールに出てくるエラーをググってたりと、色々やっているうちにもう一つの原因がつかめてきました。

 

原因その2:WebAudioSoundで動作しているのに、コードがDOMSoundにしか対応していなかった

oekakiprog.hateblo.jp

こちらのエントリで触れられているように、enchant.jsは環境によってサウンドデータの出力方法を変えています。

そしてローカルではDOMSoundだったのが、どうやらサーバー環境ではWebAudioSoundが選ばれていたようでした。

(さきほどのAudioContextがどうのこうの~という表示にここで納得)

(そういえばWebAudioに対応していないIE11ではちゃんと動いてました)

上記リンク先にもあるように、DOMSoundとWebAudioSoundではコードの作法が若干異なるので、書き方を工夫しないといけません。

ここを直すことでようやくちゃんと動作するようになりました。

 

「ローカルではDOMSoundで動いていたのに、なぜサーバー環境ではWebAudioSoundで動くのか?」

という謎については結局良くわからなかったです・・・。

2015-07-19 追記

webAudioはローカルで動かそうとするとクロスオリジンポリシー云々でエラーとなるからでした。

enchant.jsはwebAudioが使えない環境ではDOMsoundにフォールバックをするようになっています。

サウンドの扱いは色々難しい・・・。

インフィニティジーンのPROGRESSIVE UFO(グルコスのshadow)のアレをCanvasで再現してみた

http://www47.atpages.jp/ptmania/works/shadow

http://www47.atpages.jp/ptmania/works/shadow※音の鳴る要素があります。

タイトーの「スペースインベーダーインフィニティジーン」というゲームでPROGRESSIVE UFOという敵が使ってくる特徴的な攻撃(同じタイトーの「グルーヴコースター」でも同様の演出が見れます)をHTML5Canvasを使って再現してみました。
画面下あたりの"PLAY/STOP SOUND"を押すとアレをします。

 

元ネタのプレイ動画↓


SPACE INVADERS IG St.4-3 PROGRESSIVE UFO戦 ニコニコ動画|nicotter

 

 

これ考えた人たぶん天才なんじゃないかと思います。

 

最近はこういうプログラミングを使った表現で遊んでいる感じです。