上一篇是由已知圖檔產出相關文字
像
黑3白11黑227
白23黑218
白25黑6白1黑209
白35黑206
白36黑205
白38黑203
黑2白37黑202
黑4白37黑200
黑6白36黑199
黑7白36黑198
那接著要做的事情就是
根據這類格式的文字檔(格式可能會略有變動)
反過來產出圖檔
為什麼要這麼做呢?
因為減少點繪的視力負擔跟手的負擔
此外也算是在為以後若可能的話
由程式來產生圖檔鋪路
不然一個人所能負責的圖檔量是很有限的
比較具規模、吸引人的遊戲
幾乎都是處理視覺藝術的團隊人數佔的最多
音樂遊戲我倒不知道
不過音樂遊戲就個人猜想
就算負責視覺的可能比較少
也不會少到哪裡去
極簡略版的仿跳舞機程式圖檔也許還能一人應付
但只要背景稍微豐富或說多變些的就...
不過這程式就算寫出來
上色也是個問題
雖然說上色理論上有PaintsChainer可以用就是了
自動上色的難度就很高了
目前已知的方式大多是計算大量圖檔得出的結果
雖然聽說有種技術能大幅減少訓練電腦所需的原始資料
不過...
最主要的是我不知道那要怎麼做
(猜測不是正常人三萬多塊左右一台電腦能處理的)
再來就算是大幅減少,可能基數還是很大
就像少子化不代表人口少,因為還可能搭配高齡化這樣
最後,電動用的圖檔還是自己上色較好
特別是2D圖檔
因為可以用色版技術
例如有張圖綠色佔多數
那它的綠色可能有十幾種
把那十幾種色碼存起來
替換掉就能夠達到傳統紅白機遊戲2P色的效果
3D模型有光線問題,印象中是用算的
可以看這影片
暫且不提模型的陰影那些
專注於影子上即可!!
不過換個想法就是,若用3D就有可能達到影片般的效果
嗯,剛才提的幾乎都是短時間與長時間內我大概做不到的事情
做不到的事情偶爾妄想下感覺不錯
但要是深陷其中的話可能會感到痛苦!!
「人生就是一團欲望。當欲望得不到滿足便痛苦，
當欲望得到滿足便無聊，人生就像鐘擺一樣在痛苦與無聊之間擺盪。」
──亞瑟‧叔本華
就跟聽數理課的技巧一樣
上一題聽不懂的話就別想了,直接切入下一題狀態
不過要是下一題呈上題的話,確實還是會翹辮子啦!!
這就是為何上課需要預習
預習之後發現有些地方讀不懂,上課再聽才比較會有感覺
嗯,扯遠了
要達到這目標
應該是得用jQuery了
以我的實力還沒辦法在不用jQuery的情況下
直接用javascript讀取文字檔
以前做網頁文字型冒險遊戲(AVG)時
算有成功過
因此建議瀏覽器用Firefox
不然Chrome為內核的瀏覽器
印象中那時預設不支援file:///來開的網頁檔進行文字檔的讀取
這段時間的上班休息時間
我就試著背背看那張圖吧
看能否有所發現!!
像是頭型與頭髮的畫法這樣
(這種圖檔記法,比較不好記眼睛怎麼畫,
雖然眼睛附近應該是相對於臉的其它地方較少空白啦)
這篇大概就這樣
希望不會無疾而終!!
我用想的應該是不難才對
不過不排除實作過程遇到很奇怪的問題
因此時間說是一週或一個月
雖然是寫一週或一個月
但沒放假時進度應該很有限
我工作時間連午休的話,目前一天是佔11個小時
(我們的工作就像是學校一天的課表空了個好長的空堂
不過多數時間要在工作場所待命就是了)
午休會比較有後顧之憂
只有在狀況很好時才會在午休時寫程式
往好的方向想
一天應該還是有兩小時以上能寫程式
雖然工作待命時很難進入思考狀況
但理論上工作待命時是可以思考程式
(雖然思考程式不方便立刻實作是蠻痛苦的事情)
那這篇就此作結
---------4/3,第一步驟網頁程式檔,draw_bitmap_step_1.,html---------https://github.com/y541258/HTML5/blob/master/pixel_art/draw_bitmap_step_1.html這檔案還沒辦法用文字檔與文字
只是塗個8*8大小的黑色方塊
所以才是第一步驟
目前若要改動,大概就需要寫死在程式碼
雖然用文字檔的話
其實也僅是把圖檔內容改寫死在文字檔中
不過這樣至少程式檔不用反覆修改
第一步驟還算順利算是個好消息吧
ImageData物件,三個參數可以完成宣告
1.Uint8ClampedArray
2.寬度
3.高度
Uint8ClampedArray只要輸入長度就可以完成宣告
但長度必須是寬度*高度*4
*4的原因是一個pixel四個陣列元素,分別是RGBA,範圍是0~255
因此網頁檔或說程式碼如下:
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<body>
<canvas id="myCanvas" width="640" height="640"></canvas>
<div id="div_display"></div>
<script>
//參考網頁http://www.w3school.com.cn/tags/canvas_getimagedata.asp
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var uint8ClampedArray = new Uint8ClampedArray(256);
for(i=0;i<256;i+=4)
{
uint8ClampedArray[i+3]=255;
//因為預設值是全部都是0,RGB 000就是黑色
//但Alpha值0是透明,預設會看不見
//所以改成255就是完全不透明
//RGBA,Alpha是第四個,但i是從0開始,所以 紅是i,綠是i+1,藍是i+2,透明度是i+3
}
var draw_imgData = new ImageData(uint8ClampedArray,8,8);
ctx.putImageData(draw_imgData,0,0);
</script>
</body>
</html>
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
程式雖然寫出來了
但發現昨天的程式我寫出來了但是理解錯誤
由於有些累,錯在哪邊改天再想吧!!
先貼範例程式與能順利運作的文字檔
範例檔需要三個才能順利運作https://github.com/y541258/HTML5/blob/master/pixel_art/draw_bitmap_final.htmlhttps://github.com/y541258/HTML5/blob/master/pixel_art/jquery-1.11.1.jshttps://github.com/y541258/HTML5/blob/master/pixel_art/youmu.txt文字檔第一行要標明檔案寬度同時昨天的檔案建議置換成這個比較好用
https://github.com/y541258/HTML5/blob/master/pixel_art/bitmap_remember_run_length_for_draw.html雖然只要把昨天的程式檔黑改成B,白改成W即可
然後在網頁檔不掛在網頁伺服器下執行的話
很可能只能在Firefox瀏覽器底下順利執行---------4/3,成果,draw_bitmap_final.,html---------
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<body>
<canvas id="myCanvas" width="640" height="640"></canvas>
<div id="div_display"></div>
<script src="jquery-1.11.1.js"></script>
<script>
//參考網頁http://www.w3school.com.cn/tags/canvas_getimagedata.asp
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var bitmap_size;
var uint8ClampedArray;
var text_array=[];
var temp_array=[];
var compute_array=[];
var offset=0;
$(document).ready(
function ()
{
$.get('youmu.txt', function(data)
{
text_array.push(data);
text_array=text_array.toString().split('\r\n');
temp_array=text_array[0].split(" ");
bitmap_size=parseInt(temp_array[0]);
uint8ClampedArray = new Uint8ClampedArray(bitmap_size*(text_array.length-1)*4);
for(var i=1;i<text_array.length;i++)
{
temp_array=text_array[i].split(" ");
for(j=0;j<temp_array.length;j+=2)
{
if(temp_array[j]=="B")
{
for(k=0;k<parseInt(temp_array[j+1]);k++)
{
uint8ClampedArray[offset]=0;
uint8ClampedArray[offset+1]=0;
uint8ClampedArray[offset+2]=0;
uint8ClampedArray[offset+3]=255;
offset+=4;
}
}
else if(temp_array[j]=="W")
{
for(k=0;k<parseInt(temp_array[j+1]);k++)
{
uint8ClampedArray[offset]=255;
uint8ClampedArray[offset+1]=255;
uint8ClampedArray[offset+2]=255;
uint8ClampedArray[offset+3]=255;
offset+=4;
}
}
}
}
var draw_imgData = new ImageData(uint8ClampedArray,bitmap_size,text_array.length-1);
ctx.putImageData(draw_imgData,0,0);
},'text');
});
</script>
</body>
</html>
創作內容
4/2,未來一週或一個月要完成的網頁程式(4/3已完成),根據文字檔反繪圖檔(用jQuery)
單機版網頁遊戲系列相關 (21)
