This repository has been archived by the owner on Jan 16, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 193
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add sortableChildren / zIndex example (#181)
* Add z-index example This example will help others know how to use the zIndex property sprites have, which was quite difficult to find out for myself. * Fix ESLint error Had 2 space tabs instead of 4 space tabs.
- Loading branch information
Showing
3 changed files
with
60 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
const app = new PIXI.Application({ background: '#1099bb' }); | ||
document.body.appendChild(app.view); | ||
|
||
// lets add our container | ||
const container = new PIXI.Container(); | ||
|
||
|
||
// allows for container's children to have a z-Index | ||
// this is very important, without sortable children, Sprite.zIndex doesnt work! | ||
container.sortableChildren = true; | ||
app.stage.addChild(container); | ||
|
||
|
||
// Initiating our monsters/sprites | ||
const blue = PIXI.Sprite.from('examples/assets/helmlok.png'); | ||
const green = PIXI.Sprite.from('examples/assets/flowerTop.png'); | ||
const pink = PIXI.Sprite.from('examples/assets/eggHead.png'); | ||
const skully = PIXI.Sprite.from('examples/assets/skully.png'); | ||
|
||
// looping our sprites to put them in position | ||
const monsters = [blue, green, pink, skully]; | ||
monsters.forEach((sprite, index) => { | ||
sprite.anchor.set(0.5); | ||
sprite.x = 250 + 50 * index + 1; | ||
sprite.y = 250 + 50 * index + 1; | ||
|
||
// allow for our sprites to be interactive (have events such as on mounse over) | ||
sprite.interactive = true; | ||
|
||
// when the mouse in on top of them, increase their z index | ||
// so they come on top of other sprites | ||
sprite.on('pointerover', () => { | ||
this.isOver = true; | ||
if (this.isdown) { | ||
return; | ||
} | ||
sprite.zIndex = 10; | ||
console.log(sprite.zIndex); | ||
}); | ||
|
||
// when the mouse leaves them, reduce their z-index | ||
// so they go back to their original position | ||
sprite.on('pointerout', () => { | ||
this.isOver = false; | ||
if (this.isdown) { | ||
return; | ||
} | ||
sprite.zIndex = 0; | ||
}); | ||
container.addChild(sprite); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters