文字送りでハマった。あと変なエラー出てるんだけど……
というわけで愚痴です(黙れ
えー。サムネイルに意味はありません。
意味はありませんが、エリヤさんのトレーニング風景です。
相変わらず三去先生の絵は素晴らしいと思う!輝いてるもん。
それらもお披露目したく、早いとこゲームに仕上げて公開したいんだけど、まぁそんなうまくいくわけはないですやねぃ。
今日も見事にはまりました。
ずばり『文字送り』で……。
エロゲ履修済みの諸氏には見慣れてるだろう、あのテキストが流れるように表示されるあれ。
あれ意外とわたしには難しかったのです。
いやまぁ「簡単じゃん」って仰る貴方はシンプルにわたしより頭いいんだと思うし素直にすごいと思う。皮肉じゃないぞ。
単純に流れるように表示するだけならそうでもないんだけど、再生中にクリックとかタップされたら一気に全表示とか。
もちろん全表示させてるときには処理は停止しないとねーとかもうめちゃ大変でしてね。。。
最初はPromiseとsetTimeoutの組み合わせで「再帰」ってなんやねんとか思いながら特に理解も深めずに「おお動いた。やんややんや。はいつぎつぎー」ってやってたんだけど、それがよくなかったね。
先のこと考えてなかったね。まったくね。
音声の再生と停止の処理を追加追加ーってやる段になってようやくあたくしらくうぇるは現実に目を向けました。
ほら、音声再生中にクリックしたら再生中の声は停止して次のセリフをしゃべらさないといけないやん??
「……PromiseっていうかsetTimeoutどうやって止んのこれ??」
いやさ、clearIntervalとかは知ってるよ。
でもこれとまんねーの。
コンソール見てたら、次のメッセージ表示されて一見止まってるように見えても「おー動いとる動いとる。このテキストって今いったいどこにあるんだろな?」とか鼻ほじったりしつつ見てたんだけど、冷静に考えるとこれよくないよね。
ぜったい後で支障出てくるやつやんねこれ。
ってことで、なんとかできんかなぁってあちこちグーグル先生の力を借りつつやってみたんだけど、これがぜーんぜん笑
笑っちゃうくらいどうにもならなかったんさww
久しぶりに無力感に打ちのめされてついついお酒飲んじゃったくらいよ。うほほ。
それでまぁ、いっそこれ繰り返し処理とか使わずにタイマーだけでなんとかなんねーかなとかやってみたけど、なんとかならなくて。
「どーすっぺーえどーすっぺーえやんやほーれ」って踊ってたら、意外なとこに答えが転がってたわさ。
「CSSのアニメーションでやれるよ」って親切なサイトがあって、そこのを参考にさせてもらいました。
[動くWebデザインアイデア集]さま(https://coco-factory.jp/ugokuweb/move02/8-11/)
ここの「1文字ずつ文字が出現」って記事を参考にさせていただきました
まぁさすがにこれそのままは使ってないけど(これこのままじゃ止まらんしw
でも基本的な骨組みはほぼそのまんまです。
これほとんどJavascriptは使ってなくて、cssのアニメーション属性持ってるクラスを作って、一文字ずつそのクラスを持たせましょうっていうことなのでわたしでもわかりやすい。
あとはanimation-delayで段階的に(1文字ごとに)遅らせていけば何もしなくても1文字ずつ表示されるわよっていう。
天才かと思いました。
だってこれもうこの時点で処理終わってるから、JSの処理がとまんねーとか考えなくていいときたもんだ。
アニメーション止める方法なんて「animation:none」をJSで書いてやればいいだけなので超かんたんです。超こわくない。
「CSSってすごいなぁ弱者の味方だなぁ」って思いました。
BGMがとまらねぇ
ついでにもう一つ、ハマりはしなかったけど時間食ったのがBGMの扱い。
まぁこれは再生だけできてりゃなんとかなるだろって放置してたので予想外に分岐考えるのが面倒くさかった。
そんなに難しい話じゃないんだけど、まぁわたしの場合、一つのテキストに対して立ち絵の挙動とかSEとかBGMとかを設定してて、クリックしたら次のテキストに応じたそれらの設定を全部読み込む感じにしてるわけです(わかりにくい説明
で、面白いことに同じシーンだからBGM同じでいいんだけど、一回クリックするごとに同じ曲がまた最初っから再生される&前の分のバッファが生きてて鳴り続けているというなかなかカオスな重奏になってたのです。
要するにスルーする処理が抜けてたんですね。
あと止める処理も。
スルーするしないは条件分岐でなんとでもなるんだけど(とはいえ条件が複数あったのでこれはこれで混乱もしたんだけど)、停止のほうがそもそも「再生中のバッファはどうやって特定するかいのぅ??」ってとこからはじまったので時間を繰ってしまいましたと。
結論からいうとaudioプリロードしてるんだからそれを見ていけばいいじゃないっていう。
うーん、。じつに簡単ですね。
あ、ちなみにWEB AUDIO APIはやめました。
わたしには難しすぎた。
再生だけならAUDIO要素で十分でした。
で、最後にエラーについて
ずばりこちら
”Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause(). https://goo.gl/LdLk22”
いや知らんし。
たぶんSE鳴らしてるところで引っかかってるエラーなんだと思うんだけど、STOPの処理に心当たりがあまりなく。
一回一周カチカチ進める分には最後まで出ないんだけど、最後まで行ってタイトルに戻って、もっかい始めると2クリック目くらいから出るのよね。
グーグル先生に聞いたら「settimeoutでplayするまでに時間間隔とりな」って書いてあったのだけど、テキストをカチカチやるのにそんな3秒も4秒も毎回かかるかね??って思うとちょっと現実的ではないのかなと。
まぁ優先度は低いのですけど、これもちょっと気にしながらもうちょい頑張りたいと思います。
なんちゅーか。
早いとこシミュレーション的なとこに手を付けたい。
そして調教シーンのイラストをさんきょ先生にお願いしたい。
以上でございます。
お疲れさまでした。
クリエイターの諸兄、あまり根を詰めすぎないように頑張ってくだせぇ。
それでわノシ