[RPG] 對話字幕 talk animate with setTimeout

身為 RPG...最重要的就是對話啦～～
然而，對話的表現方式是 一字一字的跑...（拖台錢真好用）
但是～ HTML 主要的用途是 閱讀，一開始的理念就不一樣～

所以想了有點久～就以基本的方式組合 jquery.append 跟 setTimeout 來模擬～

來貼一下當初最早早開發的原型（在 404 page 裡）
http://www.realmofprogrammersgamble.website/404.html
http://www.realmofprogrammersgamble.website/js/anit.js
 很粗糙的手法，直接一個字一個setTimeout append 出來，但因為字數不多且又單純，好像就感覺還好～
function captionEffect(tid, str, isfadeout, dely) {
    anitid = tid;
    anitword = str;
    anitidx = 0;
    if (dely && parseInt(dely) > 10) {
        anitdelay = dely;
    }
    $('#'+anitid).html('');
    if (anitword && anitword.length > 0) {
        for (var i = 0 ; i < anitword.length ; i++) {
            setTimeout(anitappend, anitdelay*i );
        }
        if (isfadeout) {
            setTimeout("anitfadeOut('"+tid+"')", parseInt(anitdelay*anitword.length+1000) );
        }
    }
}
  
function anitappend() {
    $('#'+anitid).append(anitword[anitidx]);
    anitidx++;
}

但是～等到要做完整對話時，問題就開始頭大了Orz...
而且上面的作法其實是有問題的，一是 html 的 setTimeout 很....有問題！～有時候他自己本身執行會lag（網路load圖，或開很多網頁，跑到一半開別的網頁又回來點）...二是同時開 N 個 setTimeout 在那邊等，根本不安心Orz...
只能說 JS 本身沒有 Thread 的概念，很難處理Q_Q...

所以後來又做了一個改良版～ 基礎還是 jquery append 跟 setTimeout...
但只是 在 setTimeout 裡 才跑下一個 setTimeout （有點像遞迴自己call自己到完）... --> 同時間只有一個 setTimeout 在跑～
其一開始的原型大概是 像這樣子@@a （為了做一堆例外和設定，opt 加到整隻都快不認識了XDXD）

function tanittalk(did, w, tw, ms, opt) {
  if (ms && parseInt(ms) > 0) {
    ms = parseInt(ms);
  }  else  {
    ms = 60;
  }
 
  if (tw && tw.length > w.length) {
    var add = tw.substring(w.length, w.length+1);
    var nms = ms;
    if (opt && opt[w.length]) {
     
    }  else  {
      w += add; 
    }
    $('#'+did).append(add);
   
    if (tw.length > w.length) {
      setTimeout("tanittalk('"+did+"', '"+w+"', '"+tw+"', "+ms+")" ,nms);
    }
  }
}

不過就是用 append 時要注意的是～ 當要換行 <br> 時，是要一次 append('<br>')，如果呆呆的一個字一個字的就會 GG...當然同理，有要用到 tag，內碼 等各種 html 格式內容都是這樣～
還有一些跳脫字元，或是 「'」、「"」都是要再例外處理的部份QQ～

補充一下， setTimeout 這東西阿，在正常看的時後是不會出事的，
會出事的情況大多是，當 page  lose focus 時（另開視窗，或是看其他page）
browser 會自動暫停運作，但是 delay的時間並沒有被暫停。
所以～當去別地方看完回來後，會突然發現原本頁面的 setTimeout 一次全跑出來了XD...
因為去別的地方逛完回來，那些delay全都結束了，就不會照心中所想的順序跑出來...

所以若是很要求順序的顯示，就要注意了～

[RPG] 可以轉的轉盤 jquery css3 transform rotate

在第一篇的頁面裡
http://www.realmofprogrammersgamble.website/journal/ch1/jour1.html

這裡的轉盤其實是可以動的～～（有人發現嗎Q_Q...）
不過在其他頁裡是不能動的～我把他設定成，畫面上角色人有在那操作才可以轉阿～
（OS：沒人在那邊也可以轉的話，那是阿飄阿阿阿～～）

做法麻，還是要先切圖QQ...

然後疊前景（就是那個人）
還得要有一個 點擊區

總合起來起來的html 就是～～
<!-- 轉盤圖-->
<img src="/imgs/egg/egg_t0.png" id="img_t" class="timg" style="left:72%; top: 65%" >
<!-- 前景-->
<img src="/imgs/egg/egg_a0.png" style="width: 100%; height: auto; position: absolute; top: 36px; left:0;" >
<!-- 點擊觸發區域--> 
<div id="clk1" class="imgclick" style="left:72%; top: 65%;"></div>


js 在 init 時加入 click event～ 透過 jquery css 操作 css3 transform
    $( "#clk1" ).css('width', $('#img_t').width());
    $( "#clk1" ).css('height', $('#img_t').height());
    $( "#clk1" ).click(function() {
        img_t_deg += 5;
        imgtrotate(img_t_deg);
    });

function imgtrotate(degrees) {
    $('#img_t').css({
  '-webkit-transform' : 'rotate('+degrees+'deg)',
     '-moz-transform' : 'rotate('+degrees+'deg)', 
      '-ms-transform' : 'rotate('+degrees+'deg)', 
       '-o-transform' : 'rotate('+degrees+'deg)', 
          'transform' : 'rotate('+degrees+'deg)', 
               'zoom' : 1
    });
}

就可以得到這樣的效果～

其中大概有幾點就是，因為 jquery 的 animate 不支援 transform，所以想要做到平滑的轉動是有難度的～ 也許要額外搞一個可以動態產生的 css animate class 出來，但是就又會延申出 remove class/add class 的問題 （因為他是由 click 驅動，人在亂點時，很難跟他說只可以點幾下，不可以double click/balabla...），總之這部份等之後有想到再來實作看看好了～

[RPG] 有飄的煙 css3 animate

話說為了做網站，忙了好一陣子Q_Q...底層和走向現在是稍微好用了一點，總算可以來做點筆記了Orz...

一開始把首頁分享給朋友看，就有人說，那個煙怎麼不會動，轉盤不能轉...
然後為了阿宅的名譽，也要給他搞出來XD...

http://www.realmofprogrammersgamble.website/journal/ch1/jour1.html

煙的作法，簡單的說就是有底圖，上面再貼一張會飄的圖
切圖的時後，就是底圖：

再切純煙的圖：（底是透明色）

再幫純煙的圖 上透明(opacity) 並加上  css 動畫(smoke)
<img src="/imgs/egg/egg_s0.png" id="img_s" class="timg smoke" style="left: 3%; top: -8%; margin-top: 36px;" style="opacity: 0.2;">

.smoke {
  -webkit-animation-name: smoke;
  animation-name: smoke;
  -webkit-animation-duration: 5s ;
  animation-duration: 5s;
  -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
  animation-iteration-count: infinite; /*infinite*/
}

@-webkit-keyframes smoke {
  from {
   
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(0.99, 0, 0);
    transform: translate3d(0.99, 0, 0);
    opacity: 0.3;
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(0.99, 0, 0);
    transform: translate3d(0.99, 0, 0);
    opacity: 0.5;
  }
  50% {
    opacity: 0.7;
    -webkit-transform: scale3d(.99, .99, .99);
    transform: scale3d(.99, .99, .99);
  }
}

@keyframes smoke {
  from {
   
  }
 
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(0.99, 0, 0);
    transform: translate3d(0.99, 0, 0);
    opacity: 0.3;
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(0.99, 0, 0);
    transform: translate3d(0.99, 0, 0);
    opacity: 0.5;
  }
  50% {
    opacity: 0.7;
    -webkit-transform: scale3d(.99, .99, .99);
    transform: scale3d(.99, .99, .99);
  }
}

其原型是根據
http://daneden.github.io/animate.css/
一個搖的很慢的，形變有在調整一下的 shake...

但其實這裡面最難的是，怎麼把圖片對準Orz...
還有解決在不同尺寸的 browser，手機還轉來轉去的鬼問題～
這部份以後有空再來吐口水好了XD...

google cloud 帳單

貼一下 第一次整個月的 google cloud 帳單～
還好～跟預想的差不多XD....