第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

PIXI 在場景中無限移動精靈(顯示在頂部和隱藏在底部)

PIXI 在場景中無限移動精靈(顯示在頂部和隱藏在底部)

暮色呼如 2023-04-27 15:20:41
有從上到下不斷移動的精靈“綠色塊”并且它有效。是否有可能在頂部顯示像“圍繞”舞臺表演一樣移動的精靈,就像隱藏在底部一樣。我不知道如何調用這種效果,但我的意思是當綠色塊開始向下移動場景邊界時,然后再次開始在頂部顯示它。如何做到這一點,請您展示如何做到這一點?const WIDTH = 500;const HEIGHT = 500;const app = new PIXI.Application({     width: WIDTH,    height: HEIGHT,    backgroundColor: 0x000000 });document.body.appendChild(app.view);const sprite = PIXI.Sprite.from('https://i.ibb.co/b3Sjn6M/greeenblock.png');sprite.width = 100;sprite.height = 100;// Centersprite.anchor.set(0.5);sprite.x = app.screen.width / 2;sprite.y = app.screen.height / 2;app.stage.addChild(sprite);// Listen for animate updateapp.ticker.add((delta) => {    // Move from topto bottom    sprite.position.y += delta * 2;    if (sprite.position.y > HEIGHT + sprite.height / 2) {        sprite.position.y = -sprite.height / 2;    }});<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js"></script>@Blindman67 提供的解決方案(閃爍):const WIDTH = 500;const HEIGHT = 500;const app = new PIXI.Application({     width: WIDTH,    height: HEIGHT,    backgroundColor: 0x000000 });document.body.appendChild(app.view);const sprite = PIXI.Sprite.from('https://i.ibb.co/b3Sjn6M/greeenblock.png');const spriteReverse = PIXI.Sprite.from('https://i.ibb.co/b3Sjn6M/greeenblock.png');sprite.width = 100;sprite.height = 100;spriteReverse.width = 100;spriteReverse.height = 100;// Centersprite.anchor.set(0.5);sprite.x = app.screen.width / 2;sprite.y = app.screen.height / 2;spriteReverse.anchor.set(0.5);spriteReverse.x = app.screen.width / 2;spriteReverse.y = app.screen.height / 2;app.stage.addChild(sprite);app.stage.addChild(spriteReverse);let y = 0;// Euqlidian moduloconst modAbs = (value, modulo) => (value % modulo + modulo) % modulo;// Listen for animate updateapp.ticker.add((delta) => {    // Move from topto bottom    y += delta * 2;    if (y > HEIGHT + sprite.height / 2) {        y = -sprite.height / 2;    }
查看完整描述

2 回答

?
鴻蒙傳說

TA貢獻1865條經驗 獲得超7個贊

如果我理解你的話:你有一個盒子,你希望它從上到下無限循環(huán)移動。一旦它觸及底部,它應該開始顯示在頂部。

我能想到的最簡單的方法是有兩個相同的盒子。兩者都從頂部開始,只有一個向下移動。一旦它到達底部,另一個盒子就可以開始向下移動。當?shù)谝粋€框完全離開屏幕時,您可以重置它的位置。并重復。


查看完整回答
反對 回復 2023-04-27
?
撒科打諢

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 次。


由于您的問題僅表示上下扭曲,因此我認為您不需要額外的代碼。


查看完整回答
反對 回復 2023-04-27
  • 2 回答
  • 0 關注
  • 325 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號