iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
Modern Web

從零開始打造網頁遊戲-造輪子你也辦的到!系列 第 14

Chapter3 - canvas動畫續篇 加入Z軸也能使2D畫面產生立體的空間感

https://jerry-the-potato.github.io/ChapterX-demo/
https://jerry-the-potato.github.io/MusicPlayer%20v1.1/test.html

相信敏銳的你看過昨天的文章,或多或少猜到了,這兩個應用一個正是Ch1的衍生物、另一個則是以此基礎再擴充的Ch2,顯而易見的也運用到了物件的觀念,不過由於前幾天已經花了不少篇幅解釋物件,暫時就先不急著著墨,給大家多一點沉澱和消化的時間,那麼就來到今天的小主題:空間深度

從2D到3D

實際上再建立canvas物件之初,我們就知道它是專門繪製2D物件的,然而,這並不妨礙我們製作3D效果,請注意,我這邊的用詞是「效果」,也就是說,我們沒必要去追求真正的3D,只想要在2D原有的天然優勢基礎上,透過加入Z軸讓畫面中的空間顯得更立體,如同美術課會學到的多點透視圖,根據數量不同的透視點,在平面的畫作上也能表現出不同的張力。

不過也因為原理涉及空間概念和美術經驗,因此筆者這邊想從程式面片面解釋即可,實作上跟單點透視很像,並且把概念減化成:「離我越近的物體移動越快,離我越遠的物體移動越慢」。

引力效果

那們細心的朋友們應該有在第二個應用中,找到引力效果的選項,在該實驗中,想試圖賦予玩家對畫面的更多控制能力,因此加入引力效果,根據滑鼠相對於畫面的位置,去提供變化,但如果每個圖案都往一樣的地方移動,那顯然是有點無聊呢!因此為了賦予每個圖案不同的效果,需要有一個參照物,這邊可以想像成,這些星星月亮都是從遠方過來,在我面前墜落,那麼,就表示,越早出現的,將會越靠近我,那就不一定要額外用一個Z軸了,或者也可以解讀成:
let zIndex = dT * constant // Z軸的變化和時間成正比

那麼,只要在星星的秋風函式中這麼寫:

if(focusGravity == "gravityOn"){
    this.pointX-= mouseX / WIDTH * (dT / 10);
    this.pointY-= mouseY / HEIGHT * (dT / 10);
}

就能讓星星隨著滑鼠反向移動了,就會有種滑鼠在星空中漫遊的錯覺
或者,在漩渦函式中改寫:

if(focusGravity == "gravityOn"){
    this.pointX-= mouseX / WIDTH * (dT / 10) * Math.cos(revolve);
    this.pointY-= mouseY / HEIGHT * (dT / 10) * Math.sin(revolve);
}

便會使得所有的星星是朝向正中間,而有蜂擁而至的效果了。

連假的最後祝大家中秋佳節愉快!是時候收心,繼續前進嚕


上一篇
Chapter3 - 動感DJ續篇 進一步操作陣列,讓音樂嗨起來
下一篇
Chapter3 今天來學習畫一棵樹(I)學學人家DOM 自己用遞迴做一個樹狀圖結構
系列文
從零開始打造網頁遊戲-造輪子你也辦的到!31

尚未有邦友留言

立即登入留言