2018年3月25日日曜日

JavaScript の話

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

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

詳細は以下


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


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

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

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

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





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

animation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
html
head
 <title>0060</title> <!-- -->
  
 <script>
  var img_2a = new Image();  <!-- 画像ｵﾌﾞｼﾞｪｸﾄ作成 -->
  img_2a.src = "xxxx-2-2_a.jpg";  <!-- 最初の静止画 -->
  var img_2b = new Image();
  img_2b.src = "xxxx-2-2_b.jpg";  <!-- ﾋﾟｽﾄﾝ -->
  var img_2c1 = new Image();
  img_2c1.src = "xxxx-2-2_c1.jpg"; <!-- ｽﾋﾟｰﾄﾞｱｯﾌﾟ後 -->
  var img_2c2 = new Image();
  img_2c2.src = "xxxx-2-2_c2.jpg"; <!-- 上の次 -->
  var img_2c3 = new Image();
  img_2c3.src = "xxxx-2-2_c3.jpg"; <!-- ﾌｨﾆｯｼｭ -->
  var img_2d = new Image();
  img_2d.src = "xxxx-2-2_d.jpg";  <!-- ﾌｨﾆｯｼｭ後の静止画 -->
   
  function mouse_click(){
   count = 0;
   scene++;
  }
   
  function draw2a(){
   count++;
   if (count == 15) count = 0;
    
   ctx.drawImage(img_2a,0,0);
  }
   
  function draw2b(){
   count++;
   if (count == 15) count = 0;
    
   ctx.drawImage(img_2b,0+900*count,0, 900,640, 0,0, 900,640);
  }
   
  function draw2c1(){
   count++;
   if (count == 15) count = 0;
    
   ctx.drawImage(img_2c1,0+900*count,0, 900,640, 0,0, 900,640);
  }
   
  function draw2c2(){
   count++;
   if (count == 15) count = 0;
    
   ctx.drawImage(img_2c2,0+900*count,0, 900,640, 0,0, 900,640);
  }
   
  function draw2c3(){
   if (count <= 15){
   cnt++;
    if(cnt == 2){
     count++;
     ctx.drawImage(img_2c3,0+900*count,0, 900,640, 0,0, 900,640);
     cnt=0;
    }
   }
   if (count >= 16 && count <= 59){
    count++;
    ctx.drawImage(img_2c3,0+900*count,0, 900,640, 0,0, 900,640);
   }
    
   if (count == 60) { <!-- 60ms後に最後の静止画に移る -->
    ctx.drawImage(img_2d,0,0);
   }
  }
 </script>
/head
 
body onload="init()"
 <canvas height="640" id="cv" width="900"></canvas>
 <script>
  var count = -1;
  var scene = 0;
  var ctx = document.getElementById("cv").getContext("2d");
  var cnt = 0;
   
  function init(){
    
   document.addEventListener('click', mouse_click);
    
   switch (scene) {
    case 0: draw2a();
      setTimeout("init()",60);
      break;
       
    case 1: draw2b();
      setTimeout("init()",65);
 
      break; //42
       
    case 2: draw2c1();
      setTimeout("init()",42);
 
      break;
       
    case 3: draw2c2();
      setTimeout("init()",42);
 
      break;
       
    case 4: draw2c3();
      setTimeout("init()",60);
      break;
       
    default:scene=0;
      break;
   }
  }
 </script>
/body
/html

時刻:
ラベル: