export default async context => {
//http://pixijs.io/examples/#/basics/basic.js
const app = ExpoPixi.application({
context,
});
var container = new PIXI.Container();
app.stage.addChild(container);
var texture = await ExpoPixi.textureAsync(require('../../assets/pixi/bunny.png'));
for (var i = 0; i < 25; i++) {
var bunny = new PIXI.Sprite(texture);
bunny.x = (i % 5) * 30;
bunny.y = Math.floor(i / 5) * 30;
bunny.rotation = Math.random() * (Math.PI * 2);
container.addChild(bunny);
}
var brt = new PIXI.BaseRenderTexture(300, 300, PIXI.SCALE_MODES.LINEAR, 1);
var rt = new PIXI.RenderTexture(brt);
var sprite = new PIXI.Sprite(rt);
sprite.x = 450;
sprite.y = 60;
app.stage.addChild(sprite);
/*
* All the bunnies are added to the container with the addChild method
* when you do this, all the bunnies become children of the container, and when a container moves,
* so do all its children.
* This gives you a lot of flexibility and makes it easier to position elements on the screen
*/
container.x = 100;
container.y = 60;
app.ticker.add(function() {
app.renderer.render(container, rt);
});
};
export default async context => {
//http://pixijs.io/examples/#/basics/basic.js
const app = ExpoPixi.application({
context,
});
app.stage.interactive = true;
var container = new PIXI.Container();
app.stage.addChild(container);
var padding = 100;
var bounds = new PIXI.Rectangle(
-padding,
-padding,
app.renderer.width + padding * 2,
app.renderer.height + padding * 2
);
var maggots = [];
for (var i = 0; i < 20; i++) {
var maggot = await ExpoPixi.spriteAsync(require('../../assets/pixi/maggot.png'));
maggot.anchor.set(0.5);
container.addChild(maggot);
maggot.direction = Math.random() * Math.PI * 2;
maggot.speed = 1;
maggot.turnSpeed = Math.random() - 0.8;
maggot.x = Math.random() * bounds.width;
maggot.y = Math.random() * bounds.height;
maggot.scale.set(1 + Math.random() * 0.3);
maggot.original = new PIXI.Point();
maggot.original.copy(maggot.scale);
maggots.push(maggot);
}
var displacementSprite = await ExpoPixi.spriteAsync(require('../../assets/pixi/displace.png'));
var displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
app.stage.addChild(displacementSprite);
container.filters = [displacementFilter];
displacementFilter.scale.x = 110;
displacementFilter.scale.y = 110;
displacementSprite.anchor.set(0.5);
var ring = await ExpoPixi.spriteAsync(require('../../assets/pixi/ring.png'));
ring.anchor.set(0.5);
ring.visible = false;
app.stage.addChild(ring);
var bg = await ExpoPixi.spriteAsync(require('../../assets/pixi/bkg-grass.jpg'));
bg.width = app.renderer.width;
bg.height = app.renderer.height;
bg.alpha = 0.4;
container.addChild(bg);
app.stage.on('mousemove', onPointerMove).on('touchmove', onPointerMove);
function onPointerMove(eventData) {
ring.visible = true;
displacementSprite.position.set(eventData.data.global.x - 25, eventData.data.global.y);
ring.position.copy(displacementSprite.position);
}
var count = 0;
app.ticker.add(function() {
count += 0.05;
for (var i = 0; i < maggots.length; i++) {
var maggot = maggots[i];
maggot.direction += maggot.turnSpeed * 0.01;
maggot.x += Math.sin(maggot.direction) * maggot.speed;
maggot.y += Math.cos(maggot.direction) * maggot.speed;
maggot.rotation = -maggot.direction - Math.PI / 2;
maggot.scale.x = maggot.original.x + Math.sin(count) * 0.2;
// wrap the maggots around as the crawl
if (maggot.x < bounds.x) {
maggot.x += bounds.width;
} else if (maggot.x > bounds.x + bounds.width) {
maggot.x -= bounds.width;
}
if (maggot.y < bounds.y) {
maggot.y += bounds.height;
} else if (maggot.y > bounds.y + bounds.height) {
maggot.y -= bounds.height;
}
}
});
};
export default async context => {
//http://pixijs.io/examples/#/filters/filter.js
const app = ExpoPixi.application({
context,
});
app.stage.interactive = true;
var bg = await ExpoPixi.spriteAsync(require('../../assets/pixi/BGrotate.jpg'));
bg.anchor.set(0.5);
bg.x = app.renderer.width / 2;
bg.y = app.renderer.height / 2;
var filter = new PIXI.filters.ColorMatrixFilter();
var container = new PIXI.Container();
container.x = app.renderer.width / 2;
container.y = app.renderer.height / 2;
var bgFront = await ExpoPixi.spriteAsync(require('../../assets/pixi/SceneRotate.jpg'));
bgFront.anchor.set(0.5);
container.addChild(bgFront);
var light2 = await ExpoPixi.spriteAsync(require('../../assets/pixi/LightRotate2.png'));
light2.anchor.set(0.5);
container.addChild(light2);
var light1 = await ExpoPixi.spriteAsync(require('../../assets/pixi/LightRotate1.png'));
light1.anchor.set(0.5);
container.addChild(light1);
var panda = await ExpoPixi.spriteAsync(require('../../assets/pixi/panda.png'));
panda.anchor.set(0.5);
container.addChild(panda);
app.stage.addChild(container);
app.stage.filters = [filter];
var count = 0;
var enabled = true;
app.stage.on('pointertap', function() {
enabled = !enabled;
app.stage.filters = enabled ? [filter] : null;
});
var help = new PIXI.Text('Click or tap to turn filters on / off.', {
fontFamily: 'Arial',
fontSize: 12,
fontWeight: 'bold',
fill: 'white',
});
help.y = app.renderer.height - 25;
help.x = 10;
app.stage.addChild(help);
app.ticker.add(function(delta) {
bg.rotation += 0.01;
bgFront.rotation -= 0.01;
light1.rotation += 0.02;
light2.rotation += 0.01;
panda.scale.x = 1 + Math.sin(count) * 0.04;
panda.scale.y = 1 + Math.cos(count) * 0.04;
count += 0.1;
var matrix = filter.matrix;
matrix[1] = Math.sin(count) * 3;
matrix[2] = Math.cos(count);
matrix[3] = Math.cos(count) * 1.5;
matrix[4] = Math.sin(count / 3) * 2;
matrix[5] = Math.sin(count / 2);
matrix[6] = Math.sin(count / 4);
});
};
export default async context => {
// This is demo of pixi-display.js, https://github.com/gameofbombs/pixi-display
// Drag the rabbits to understand what's going on
const app = ExpoPixi.application({
context,
});
//META STUFF, groups exist without stage just fine
// z-index = 0, sorting = true;
var greenGroup = new PIXI.display.Group(0, true);
greenGroup.on('sort', function(sprite) {
//green bunnies go down
sprite.zOrder = -sprite.y;
});
// z-index = 1, sorting = true, we can provide zOrder function directly in constructor
var blueGroup = new PIXI.display.Group(1, function(sprite) {
//blue bunnies go up
sprite.zOrder = +sprite.y;
});
// Drag is the best layer, dragged element is above everything else
var dragGroup = new PIXI.display.Group(2, false);
// Shadows are the lowest
var shadowGroup = new PIXI.display.Group(-1, false);
//specify display list component
app.stage = new PIXI.display.Stage();
app.stage.group.enableSort = true;
//sorry, group cant exist without layer yet :(
app.stage.addChild(new PIXI.display.Layer(greenGroup));
app.stage.addChild(new PIXI.display.Layer(blueGroup));
app.stage.addChild(new PIXI.display.Layer(dragGroup));
app.stage.addChild(new PIXI.display.Layer(shadowGroup));
var blurFilter = new PIXI.filters.BlurFilter();
blurFilter.blur = 0.5;
// create a texture from an image path
var texture_green = await ExpoPixi.textureAsync(require('../../assets/pixi/square_green.png'));
var texture_blue = await ExpoPixi.textureAsync(require('../../assets/pixi/square_blue.png'));
// make obsolete containers. Why do we need them?
// Just to show that we can do everything without caring of actual parent container
var bunniesOdd = new PIXI.Container();
var bunniesEven = new PIXI.Container();
var bunniesBlue = new PIXI.Container();
app.stage.addChild(bunniesOdd);
app.stage.addChild(bunniesBlue);
app.stage.addChild(bunniesEven);
var ind = [];
for (var i = 0; i < 15; i++) {
var bunny = new PIXI.Sprite(texture_green);
bunny.width = 50;
bunny.height = 50;
bunny.position.set(100 + 20 * i, 100 + 20 * i);
bunny.anchor.set(0.5);
// that thing is required
bunny.parentGroup = greenGroup;
if (i % 2 == 0) {
bunniesEven.addChild(bunny);
} else {
bunniesOdd.addChild(bunny);
}
subscribe(bunny);
addShadow(bunny);
}
for (var i = 9; i >= 0; i--) {
var bunny = new PIXI.Sprite(texture_blue);
bunny.width = 50;
bunny.height = 50;
bunny.position.set(400 + 20 * i, 400 - 20 * i);
bunny.anchor.set(0.5);
// that thing is required
bunny.parentGroup = blueGroup;
bunniesBlue.addChild(bunny);
subscribe(bunny);
addShadow(bunny);
}
function subscribe(obj) {
obj.interactive = true;
obj
.on('mousedown', onDragStart)
.on('touchstart', onDragStart)
.on('mouseup', onDragEnd)
.on('mouseupoutside', onDragEnd)
.on('touchend', onDragEnd)
.on('touchendoutside', onDragEnd)
.on('mousemove', onDragMove)
.on('touchmove', onDragMove);
}
function addShadow(obj) {
var gr = new PIXI.Graphics();
gr.beginFill(0x0, 1);
//yes , I know bunny size, I'm sorry for this hack
var scale = 1.1;
gr.drawRect(-25 / 2 * scale, -36 / 2 * scale, 25 * scale, 36 * scale);
gr.endFill();
gr.filters = [blurFilter];
gr.parentGroup = shadowGroup;
obj.addChild(gr);
}
function onDragStart(event) {
if (!this.dragging) {
this.data = event.data;
this.oldGroup = this.parentGroup;
this.parentGroup = dragGroup;
this.dragging = true;
this.scale.x *= 1.1;
this.scale.y *= 1.1;
this.dragPoint = event.data.getLocalPosition(this.parent);
this.dragPoint.x -= this.x;
this.dragPoint.y -= this.y;
}
}
function onDragEnd() {
if (this.dragging) {
this.dragging = false;
this.parentGroup = this.oldGroup;
this.scale.x /= 1.1;
this.scale.y /= 1.1;
// set the interaction data to null
this.data = null;
}
}
function onDragMove() {
if (this.dragging) {
var newPosition = this.data.getLocalPosition(this.parent);
this.x = newPosition.x - this.dragPoint.x;
this.y = newPosition.y - this.dragPoint.y;
}
}
};