本節(jié)是本教程的最后一節(jié),本節(jié)主要內(nèi)容是帶大家使用Hype的物理量功能,對部分元素賦予物理量,完成游戲的開發(fā)制作,然后再進(jìn)行一些網(wǎng)頁的相關(guān)優(yōu)化設(shè)置,提高游戲體驗。
前章節(jié)回顧:使用Hype物理引擎制作一個網(wǎng)頁小游戲(二)
一、施加物理量
在Hype中,默認(rèn)新建的每個元素的物理量都是“停用?不施加物理量”,如下圖1。
圖1:默認(rèn)元素物理量
因此大家需要手動去對某些特定元素施加特定的物理量,大家跟著小編來分析一波。由于小球是需要元素碰撞提供彈力的,因此對某些元素是需要施加物理量,提供彈力的,其中需要提供彈力的元素有:上下左右四個矩形墻壁、左右兩個能夠翹起和釋放的矩形、上方橫向移動的矩形障礙。
因此,需要選中上述說到的這些元素,然后在“物理量檢查器”中,設(shè)置元素物理量為“靜態(tài)?互相影響,沒有移動”,然后更重要的是設(shè)置退還系數(shù),這其實就是元素的彈性系數(shù),這里小編給的系數(shù)值是0.58,如下圖2,畢竟彈性太大小球反彈速度就會很快,游戲難度就很大了,給一個適當(dāng)?shù)膹椥韵禂?shù)還是很重要的。
圖2:施加物理量和退還系數(shù)
下面對圓形小球施加一個物理量,具體如下圖3。元素物理量選擇為“動態(tài)?全物理量主體”,代表小球是會受到重力、摩擦力、彈力等物理量的影響,并因此產(chǎn)生移動。
其中,密度設(shè)置為1.0,密度系數(shù)影響的是小球的質(zhì)量,即受到的重力,這里設(shè)置1.0,使用正常的重力即可;退還系數(shù)0.58,和其他的元素相同;摩擦力設(shè)置為0.0,取消摩擦力的影響,防止小球因為摩擦力出現(xiàn)意想不到的詭異移動曲線;空氣阻力設(shè)置為0.1,因為實際上空氣的確存在著阻力,加上空氣阻力會讓游戲體驗更好一點;如果設(shè)備支持重力感應(yīng),還可以額外勾選上“通過設(shè)置傾斜控制重力”選項。
圖3:對小球施加物理量
二、網(wǎng)頁優(yōu)化設(shè)置
完成上述步驟后,游戲就可以正常運行起來了,但是因為移動設(shè)備的不同,游戲體驗可能有差異,因此還需要對不同的設(shè)備做一些相關(guān)的優(yōu)化設(shè)置。首先:在“文稿檢查器”中,點擊“編輯頭HTML”,如下圖4。
圖4:編輯頭HTML
第二步:然后往打開的文件中,加入圖5紅框的代碼,這行代碼是為了使網(wǎng)頁兼容移動設(shè)備的不同寬度,同時限制網(wǎng)頁不可被縮放和放大,優(yōu)化游戲的體驗。
圖5:往頭文件中加入代碼
第三步:打開“場景檢查器”,然后在“場景加載時”,再添加一個操作,操作選擇“運行JavaScript”,函數(shù)選擇新函數(shù),然后命名為“preventScroll”,如下圖6。
圖6:場景加載時運行JavaScript
第四步:這時Hype會為大家打開新函數(shù)的編寫界面,在該函數(shù)中加入下圖紅框的代碼即可,這一段代碼是為了阻止瀏覽器的默認(rèn)事件,比如右鍵可以復(fù)制文字等瀏覽器自帶的屬性功能,這些功能可能會影響到游戲的游玩體驗,因此需要進(jìn)行禁用。
圖7:編寫JavaScript代碼
好了,到了這里本教程就算是正式完成了,大家趕快動起手來,實現(xiàn)自己的一個小游戲吧!