Skip to content

Instantly share code, notes, and snippets.

@julianfrank
Created August 22, 2019 08:50
Show Gist options
  • Save julianfrank/bad90e8645da18bf28b1640d1750dfd0 to your computer and use it in GitHub Desktop.
Save julianfrank/bad90e8645da18bf28b1640d1750dfd0 to your computer and use it in GitHub Desktop.
pixijs Vue Component working :)
<template>
<div id="gl">
<div class="columns" style="position:absolute;top:10px;left:10px;z-index:1001;">
<div class="column">
<div class="button" @click="buttonClicked">Hello-{{count.button}}</div>
</div>
<div class="column">{{sysInfo.width}}x{{sysInfo.height}}</div>
<div class="column">{{sysInfo.lastKeyDown}}</div>
<div class="column">{{jfSpriteDir}}</div>
<div class="column">{{drag}}</div>
</div>
</div>
</template>
<script>
//let PIXI;
let glApp;
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
/**
* @example contain(explorer, {x: 28, y: 10, width: 488, height: 480});
* @param sprite PIXI.Sprite
* @param container Object {x,y,width,height}
* @returns String
*/
function contain(sprite, container) {
let collision = undefined;
//Left
if (sprite.x < container.x) {
sprite.x = container.x;
collision = "left";
}
//Top
if (sprite.y < container.y) {
sprite.y = container.y;
collision = "top";
}
//Right
if (sprite.x + sprite.width > container.width) {
sprite.x = container.width - sprite.width;
collision = "right";
}
//Bottom
if (sprite.y + sprite.height > container.height) {
sprite.y = container.height - sprite.height;
collision = "bottom";
}
//Return the `collision` value
return collision;
}
export default {
mounted() {
if (process.client) {
import("pixi.js")
.then(this.bootStrap)
.catch(console.error);
}
window.addEventListener("resize", this.resizeHandler, {
stopPropagation: true
});
document.onkeydown = this.handleKeyDown;
},
data: function() {
return {
count: { button: 0 },
sysInfo: { width: 0, height: 0, lastKeyDown: "" },
jfSprite: {},
jfSpriteDir: 0,
drag: { event: "" }
};
},
computed: {},
methods: {
resizeHandler(e) {
this.sysInfo.width = window.innerWidth;
this.sysInfo.height = window.innerHeight - 55;
glApp.renderer.resize(this.sysInfo.width, this.sysInfo.height);
},
loadProgressHandler(loader, resource) {
console.log(`Loading: ${resource.url} Progress: ${loader.progress}%`);
},
bootStrap(PIXIJS) {
window.PIXI = PIXIJS;
glApp = new PIXI.Application({
antialias: true, // default: false
transparent: false, // default: false
resolution: 1 // default: 1
//resizeTo: document.getElementById("gl")
});
glApp.renderer.backgroundColor = 0xffffff;
glApp.renderer.view.style.position = "absolute";
glApp.renderer.view.style.display = "block";
glApp.renderer.view.style.zIndex = "1000";
glApp.renderer.autoResize = true;
document.getElementById("gl").appendChild(glApp.view);
this.resizeHandler();
//glApp.loader
PIXI.Loader.shared
.on("progress", this.loadProgressHandler)
.add("jficon", "/jficon.png")
.add("bird1","/bird1.json")
.load(this.setupGame);
},
setupGame(loader, resources) {
const jfTexture = PIXI.utils.TextureCache["/jficon.png"];
// This creates a texture from a 'jfSprite.png' image
this.jfSprite = new PIXI.Sprite(jfTexture);
let txs=[]
let sheet = PIXI.Loader.shared.resources["bird1"].spritesheet
let bird1=new PIXI.AnimatedSprite(sheet.animations["fly"])
bird1.anchor.set(0.5)
bird1.position.set(400,100)
bird1.animationSpeed=0.1
bird1.play()
let bird2=new PIXI.AnimatedSprite(sheet.animations["stand"])
bird2.anchor.set(0.5)
bird2.position.set(400,120)
bird2.animationSpeed=0.01
bird2.play()
glApp.stage.addChild(bird1,bird2)
// Setup the position of the jfSprite
this.jfSprite.x = glApp.renderer.width / 2;
this.jfSprite.y = glApp.renderer.height / 2;
// Rotate around the center
this.jfSprite.anchor.x = 0.5;
this.jfSprite.anchor.y = 0.5;
this.jfSprite.interactive = true;
this.jfSprite.buttonMode = true;
this.jfSprite.on("pointertap", e => {
this.drag = { event: e.type };
});
/* .on('pointerup', onButtonUp)
.on('pointerupoutside', onButtonUp)
.on('pointerover', onButtonOver)
.on('pointerout', onButtonOut);*/
this.jfSprite.on("pointerup", function(e) {
this.drag = { event: "pointerup" };
});
this.jfSprite.on("pointerover", function(e) {
this.drag = { event: e.type };
console.log("pointerover");
});
// Add the jfSprite to the scene we are building
glApp.stage.addChild(this.jfSprite);
// Listen for frame updates
glApp.ticker.add(this.jfSpriteAction);
let rectangle = new PIXI.Graphics();
rectangle.lineStyle(4, 0xff3300, 1);
rectangle.beginFill(0x66ccff);
rectangle.drawRect(0, 0, 64, 64);
rectangle.endFill();
rectangle.x = 170;
rectangle.y = 170;
glApp.stage.addChild(rectangle);
let circle = new PIXI.Graphics();
circle.beginFill(0x9966ff);
circle.drawCircle(0, 0, 32);
circle.endFill();
circle.x = 64;
circle.y = 130;
glApp.stage.addChild(circle);
let roundBox = new PIXI.Graphics();
roundBox.lineStyle(4, 0x99ccff, 1);
roundBox.beginFill(0xff9933);
roundBox.drawRoundedRect(0, 0, 84, 36, 10);
roundBox.endFill();
roundBox.x = 48;
roundBox.y = 190;
glApp.stage.addChild(roundBox);
let line = new PIXI.Graphics();
line.lineStyle(4, 0x00ff00, 1);
line.moveTo(0, 0);
line.lineTo(this.sysInfo.width / 4, this.sysInfo.height / 4);
line.x = this.sysInfo.width / 2;
line.y = this.sysInfo.height / 2;
glApp.stage.addChild(line);
let style = new PIXI.TextStyle({
fontFamily: "Arial",
fontSize: 36,
fontStyle: "italic",
fontWeight: "bold",
fill: ["#ffffff", "#00ff99"], // gradient
stroke: "#4a1850",
strokeThickness: 5,
dropShadow: true,
dropShadowColor: "#000000",
dropShadowBlur: 4,
dropShadowAngle: Math.PI / 6,
dropShadowDistance: 6,
wordWrap: true,
wordWrapWidth: 440
});
let message = new PIXI.Text("The End!", style);
message.anchor.set(0.5);
message.position.set(this.sysInfo.width / 2, this.sysInfo.height / 2);
glApp.stage.addChild(message);
var gameScene = glApp.stage;
//Create the health bar
let healthBar = new PIXI.Container();
healthBar.position.set(glApp.stage.width - 170, 44);
gameScene.addChild(healthBar);
//Create the black background rectangle
let innerBar = new PIXI.Graphics();
innerBar.beginFill(0x000000);
innerBar.drawRect(0, 0, 128, 8);
innerBar.endFill();
healthBar.addChild(innerBar);
//Create the front red rectangle
let outerBar = new PIXI.Graphics();
outerBar.beginFill(0xff3300);
outerBar.drawRect(0, 0, 128, 8);
outerBar.endFill();
healthBar.addChild(outerBar);
healthBar.outer = outerBar;
let points = [];
for (let i = 0; i < 20; i++) {
points.push(new PIXI.Point(i * 10, 0));
}
let ropeTex=PIXI.Texture.from("jficon.png")
let rope = new PIXI.SimpleRope(ropeTex, points);
rope.position.set(100,100)
glApp.stage.addChild(rope);
},
jfSpriteAction() {
// each frame we spin the jfSprite around a bit
this.jfSprite.rotation += this.jfSpriteDir;
},
buttonClicked(e) {
e.stopPropagation();
this.count.button++;
},
handleKeyDown(e) {
this.sysInfo.lastKeyDown = { key: e.key, code: e.code };
switch (this.sysInfo.lastKeyDown.code) {
case "ArrowLeft":
this.jfSpriteDir = Math.max(this.jfSpriteDir - 0.1, -4);
break;
case "ArrowRight":
this.jfSpriteDir = Math.min(
this.jfSpriteDir +
(0.01 + ((this.jfSpriteDir < 0 ? -1 : 1) * this.jfSpriteDir) / 2),
4
);
break;
case "ArrowUp":
this.jfSprite.scale.set(2, 2);
break;
case "ArrowDown":
this.jfSprite.scale.set(0.5, 0.5);
break;
default:
console.log(e.key, e);
break;
}
}
}
};
</script>
<style scoped>
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment