从不同的数组添加重复的图块 PIXI.js
Adding duplicate tiles from different arrays PIXI.js
我正在尝试创建一个老虎机游戏;我有一些图像放入数组中
var createSlots = function(){
//setup images as tilingSprites
var slot1 = new PIXI.extras.TilingSprite(t1, 200, 200);
var slot2 = new PIXI.extras.TilingSprite(t2, 200, 200);
var slot3 = new PIXI.extras.TilingSprite(t3, 200, 200);
var slot4 = new PIXI.extras.TilingSprite(t4, 200, 200);
var slot5 = new PIXI.extras.TilingSprite(t5, 200, 200);
var slot6 = new PIXI.extras.TilingSprite(t6, 200, 200);
var slot7 = new PIXI.extras.TilingSprite(t7, 200, 200);
var slot8 = new PIXI.extras.TilingSprite(t8, 200, 200);
var slot9 = new PIXI.extras.TilingSprite(t9, 200, 200);
var slot10 = new PIXI.extras.TilingSprite(t10, 200, 200);
//push slots into array; images, sprites etc.
mainSlotArr.push(slot1, slot2, slot3, slot4, slot5, slot6, slot7, slot8, slot9, slot10);
};
目前我有 2 个功能(一旦我开始工作,就会将它们组合在一起)
创建卷轴1 和创建卷轴2
他们所做的是复制mainSlotArray使用洗牌函数然后填充到 2 列(卷轴)(目前 createReels2 只做一个卷轴)然后,它从它使用的数组中删除数组元素
我遇到的问题是,无论在createReels2中使用什么图像图块,如果它们在createReels1函数中使用,就会消失,例如,如果在createReels2和createReels1中使用image1.png那么它在前2个卷轴中是不可见的
创建下面的卷轴函数(很多硬编码!
var createReels1 = function(){
slotArr1 = mainSlotArr.slice();
shuffle(slotArr1);
var counter = 0;
var num = 0
for(var i = 0; i <2; i++){
var slotContainer = new PIXI.Container();
slotContainer.width = 100;
slotContainer.height = 400;
slotContainer.y = 100;
slotContainer.x = i*130;
stage.addChild(slotContainer);
slotContainerArr.push(slotContainer);
for(var j = 0; j < 3; j++){
var slot = slotArr1[j];
var toDel = slotArr1.indexOf(slot);
slot.scale.y = slot.scale.x = .5;
console.log(slot);
var nextY = j*(slot.height/2);
slot.y = nextY;
slotContainerArr[i].addChild(slot);
slotArr1.splice(toDel, 1);//remove from array
}
}
}
var createReels2 = function(){
slotArr2 = mainSlotArr.slice();
shuffle(slotArr2);
var counter = 0;
var num = 0
for(var i = 0; i <1; i++){
var slotContainer = new PIXI.Container();
slotContainer.width = 100;
slotContainer.height = 400;
slotContainer.y = 100;
slotContainer.x = 260;
stage.addChild(slotContainer);
slotContainerArr.push(slotContainer);
for(var j = 0; j < 3; j++){
var slot = slotArr2[j];
var toDel = slotArr2.indexOf(slot);
slot.scale.y = slot.scale.x = .5;
var nextY = j*(slot.height/2);
slot.y = nextY;
slotContainerArr[2].addChild(slot);
slotArr2.splice(toDel, 1);//remove from array
}
}
}
如果我正确理解了代码,请快速检查:
精灵只能有一个父级。如果检查 Sprite 对象,它实际上具有父属性。所以 slotArr1 和 slotArr2 具有相同的精灵,这一事实不会改变你切片的 id。然后,当您将它们分配给不同的容器时,它们会从一个容器移动到另一个容器。你当然可以重复使用纹理,但一个精灵只能在父级上拥有。
相关文章:
- 如何在pixi.js多边形上放置纹理
- Pixi.js Retina显示画布的大小增加了一倍
- 从不同的数组添加重复的图块 PIXI.js
- pixi-js:拖放圆形
- PIXI.js渲染不起作用
- 计算Pixi.js中精灵纹理的分辨率
- 扩展 pixi.js在构造函数中对访问父的属性进行精灵化
- 在容器中关联精灵 - Pixi.js
- 在 pixi.js 中渲染来自 box2dweb 的旋转矩形
- 缩放到 PIXI.js中的特定点
- Pixi.js从动画gif文件生成精灵表动画或影片剪辑
- 如何使用来自PIXI.extras.TilingSprite的Pixi JS中的继承方法“生成纹理”
- Pixi.js中的自定义字体
- Pixi.js / WebGL方法,用于将数据模型坐标转换为画布像素坐标
- 在Pixi.js中绘制一条线的动画
- 使用带Typescript的PIXI.js制作圆形动画
- 滚动/缩放pixi.js画布
- Pixi.js绘制下落的正方形
- pixi.js枢轴影响对象位置
- Pixi.js中的文本出现重叠