2018年3月25日日曜日

JavaScript の話

ゲーム作成とは関係ないけどjsの勉強をした。
と言っても理由は18禁。

エロスはいつでも原動力となるものだ。

詳細は以下


そろそろ2周年だかもう2周年だかを迎えるDMMのゲームがある。
よくエロシーンが動いてる広告のアレです。
エロシーン動くってエロいわ(語彙力
ってことで少し前からチマチマやってた。
で、最近気付いたんだけど右クリックで画像を保存できる。
アニメーションの部分はGIFとかじゃなくて、映画のフィルムみたいに縦長の画像に各シーンを並べてるようだ。
分かりにくいので下図参照。


こんな感じで640×900の画像が15枚連なってる。
何で数字が横向きなのかと言うと、横長の画像が縦に90度回転された状態で並んでいたから。
保存してみればわかる。
で、ソースの動きを見てみたら900,1800,2700...と変動する部分が。
察せると思うけど、要は表示する領域をズラしてアニメーションさせてるように見せていた。
画像枚数を減らす為なのだろうか、意図はよく分からない。
ちなみに音声は保存出来ません。たぶん。
とにかくアニメーションだけなら自分でも作れるじゃん、糞文字幕要らねぇんだよ!って思って作ってみたのがこちら

ガックガクですね!
お使いのブラウザは正常です。
60msで切り替えてるんだけど、どう見ても描写が間に合ってない。
数字にしたら分かりやすいけど、保存した画像でやったときはアニメーション抜けてるのかと疑ったわ。
原因はコードの
ctx.rotate(-Math.PI / 2); 
の部分。
ctxを-Math.PI / 2 = -90°回転させる処理だけど、どうやらここの処理に時間が掛かっているらしい。
まぁ縦14400pxにまで伸びた画像でやればそうなるわな。
と言うことで修正したバージョンがこちら

うん、動きますね。早すぎて追えない。
ソースコードは右クリから各自確認して下さい。
Q.さて回転する部分が無くなりました、どうやったでしょう?
A.元の画像を回転させた。
いやもうこれが手っ取り早かった許して。

数字じゃなくてエロアニメが動くのを見たい?
神姫プロジェクトで検索検索ゥ!!





最後に。
左クリックで次のシーンに移行する処理を追加したソースコード全文載せておきます。
headとかhtml,bodyが消えるから<>が外れてるのは許して。
各シーンを保存してソースのファイル名の部分直したhtmlを同じディレクトリに置いたら、ゲーム立ち上げなくてもアニメーションだけは見れるようになるよ。
あくまでオフラインで楽しむように。ぶっこ抜いた画像の転載ダメ絶対。

html
head
 0060 
 
 
/head

body onload="init()"
 
 
/body
/html