2 回答

TA貢獻1865條經驗 獲得超7個贊
如果我理解你的話:你有一個盒子,你希望它從上到下無限循環(huán)移動。一旦它觸及底部,它應該開始顯示在頂部。
我能想到的最簡單的方法是有兩個相同的盒子。兩者都從頂部開始,只有一個向下移動。一旦它到達底部,另一個盒子就可以開始向下移動。當?shù)谝粋€框完全離開屏幕時,您可以重置它的位置。并重復。

TA貢獻1934條經驗 獲得超2個贊
%
余數(shù)運算符
這可以使用余數(shù)運算符來完成%
例如,如果屏幕為 1000 像素寬,而坐標為 1500,則表示對象繞屏幕彎曲了 1.5 倍,使用余數(shù)運算符1500 % 1000 = 500
。
如果只是朝正方向移動,那么這就是所需要的(除了彈出)
?x?=?x?%?screenWidth;? ?//?and/or?for?y ?y?=?y?%?screenHeight;
負空間
但是,如果對象向另一個方向移動,則會出現(xiàn)問題,因為余數(shù)運算會保留數(shù)字的符號-1500 % 1000 === -500
,更糟糕的是,如果您Math.abs
對結果使用,您仍然會得到錯誤的值,Math.abs(-1200 % 1000) === 200
該值應該是 800
您可以使用稍微復雜一點的函數(shù)來解決這個問題。您可以將它添加到Math
對象或使用如下的獨立函數(shù)。
?const?modAbs?=?(value,?modulo)?=>?(value?%?modulo?+?modulo)?%?modulo;
使用上述函數(shù),負值可以正確地移動到正空間中。
所以如果你有一個坐標 x, y 讓它扭曲屏幕
x?=?modAbs(x,?screenWidth); y?=?modAbs(y,?screenHeight);
這接縫很容易,但不幸的是還有一些問題需要克服。
彈出
使用上面的函數(shù)在屏幕上變形不考慮精靈的大小,并且因為當精靈穿過運動場邊緣時你只渲染一個副本,它不會出現(xiàn)在另一邊,直到坐標穿過邊緣。
這會導致精靈根據移動方向和精靈原點的位置彈出或彈出。
有兩種解決方法。
擴大比賽場地
如果您使游戲區(qū)域比視圖(可視區(qū)域)大 2 倍于 sprite 的大小,并使用更大的游戲區(qū)域進行變形,則精靈在完全從視圖中消失之前不會變形。這可以防止變形時丑陋的東西突然出現(xiàn)和突然出現(xiàn),并且最適合 NPC 類型的精靈。對于玩家(專注的)精靈,這不是一個好的選擇,因為精靈在穿過屏幕邊緣時不會完全可見。
渲染額外的副本。
為了讓精靈始終完全可見,您需要在它穿過屏幕時多次渲染它。示例偽代碼
// use modulo to warp
?x = modAbs(x, screenWidth);
?// check if sprite overlaps the screen edge
?if (x + spriteWidth > screenWidth) {? ?// is crossing then
? ? ? drawSprite(x - screenWidth, // ...? ?draw a copy at opposite edge.
如果您只是在頂部和底部(或左側和右側)之間變形,這就是所需要的。
如果你在所有方向上變形,你將需要渲染 sprite 最多 4 次。穿過上下或左右時兩次。如果在拐角處穿過 4 次。
由于您的問題僅表示上下扭曲,因此我認為您不需要額外的代碼。
添加回答
舉報