RenderTexture now displays correctly in Canvas games.

Stage.display property added. A direct reference to the root Pixi Stage object (very useful for RenderTexture manipulation)

examples/_site/examples.json

@@ -160,6 +160,10 @@
       "file": "graphics.js",
       "title": "graphics"
     },
+    {
+      "file": "pixi+render+texture.js",
+      "title": "pixi render texture"
+    },
     {
       "file": "render+crisp.js",
       "title": "render crisp"

examples/display/pixi render texture.js

@@ -0,0 +1,78 @@
+//	Original version by @author Mat Groves http://matgroves.com/ @Doormat23 from the Pixi.js examples
+//	Ported to Phaser by Richard Davey
+
+var game = new Phaser.Game(800, 600, Phaser.WEBGL, 'phaser-example', { preload: preload, create: create, update: update });
+
+function preload() {
+
+    game.load.image('spin1', 'assets/sprites/spinObj_01.png');
+    game.load.image('spin2', 'assets/sprites/spinObj_02.png');
+    game.load.image('spin3', 'assets/sprites/spinObj_03.png');
+    game.load.image('spin4', 'assets/sprites/spinObj_04.png');
+    game.load.image('spin5', 'assets/sprites/spinObj_05.png');
+    game.load.image('spin6', 'assets/sprites/spinObj_06.png');
+    game.load.image('spin7', 'assets/sprites/spinObj_07.png');
+    game.load.image('spin8', 'assets/sprites/spinObj_08.png');
+
+}
+
+var renderTexture;
+var renderTexture2;
+var currentTexture;
+var outputSprite;
+var stuffContainer;
+var count = 0;
+
+function create() {
+
+	// create two render textures.. these dynamic textures will be used to draw the scene into itself
+	renderTexture = game.add.renderTexture('texture1', 800, 600);
+	renderTexture2 = game.add.renderTexture('textur2e', 800, 600);
+	currentTexture = renderTexture;
+
+	// create a new sprite that uses the render texture we created above
+	outputSprite = game.add.sprite(400, 300, currentTexture);
+
+	// align the sprite
+	outputSprite.anchor.x = 0.5;
+	outputSprite.anchor.y = 0.5;
+
+	stuffContainer = game.add.group();
+	stuffContainer.x = 800/2;
+	stuffContainer.y = 600/2
+
+	// now create some items and randomly position them in the stuff container
+	for (var i = 0; i < 20; i++)
+	{
+		var item = stuffContainer.create(Math.random() * 400 - 200, Math.random() * 400 - 200, game.rnd.pick(game.cache.getImageKeys()));
+		item.anchor.setTo(0.5, 0.5);
+	}
+
+	// used for spinning!
+	count = 0;
+
+}
+
+function update() {
+
+	stuffContainer.addAll('rotation', 0.1);
+
+	count += 0.01;
+
+	// swap the buffers..
+	var temp = renderTexture;
+	renderTexture = renderTexture2;
+	renderTexture2 = temp;
+
+	// set the new texture
+	outputSprite.setTexture(renderTexture);
+
+	// twist this up!
+	stuffContainer.rotation -= 0.01
+	outputSprite.scale.x = outputSprite.scale.y  = 1 + Math.sin(count) * 0.2;
+
+	// render the stage to the texture
+	// the true clears the texture before content is rendered
+	renderTexture2.renderXY(game.stage.display, 0, 0, true);
+
+}

examples/wip/mod.js

@@ -8,6 +8,11 @@ function preload() {
 	game.load.binary('macrocosm', 'assets/audio/protracker/macrocosm.mod', modLoaded, this);
 	game.load.binary('enigma', 'assets/audio/protracker/enigma.mod', modLoaded, this);
 	game.load.binary('elysium', 'assets/audio/protracker/elysium.mod', modLoaded, this);
+	game.load.binary('stardust', 'assets/audio/protracker/sd-ingame1.mod', modLoaded, this);
+	game.load.binary('globaltrash', 'assets/audio/protracker/global_trash_3_v2.mod', modLoaded, this);
+	game.load.image('vu1', 'assets/sprites/flectrum.png');
+	game.load.image('vu2', 'assets/sprites/flectrum2.png');
+	game.load.image('vu3', 'assets/sprites/healthbar.png');
 
 }
 
@@ -21,35 +26,148 @@ function modLoaded(key, data) {
 
 }
 
-var sprite;
+var vu1;
+var vu2;
+var vu3;
+var vu4;
+
 var modsample = new Array();
 var module;
 
+var sample1;
+var sample2;
+var sample3;
+var sample4;
+var sampleName1;
+var sampleName2;
+var sampleName3;
+var sampleName4;
+
+var r1;
+var r2;
+var r3;
+var r4;
+
 function create() {
 
+	// vu1 = game.add.sprite(400, 100, 'vu3');
+	// vu2 = game.add.sprite(400, 150, 'vu3');
+	// vu3 = game.add.sprite(400, 200, 'vu3');
+	// vu4 = game.add.sprite(400, 250, 'vu3');
+
 	module = new Protracker();
- 	module.buffer = game.cache.getBinary('impulse');
+ 	module.buffer = game.cache.getBinary('globaltrash');
     module.parse();
     module.play();
 
+    r1 = new Phaser.Rectangle(400, 100, 100, 32);
+    r2 = new Phaser.Rectangle(400, 150, 100, 32);
+    r3 = new Phaser.Rectangle(400, 200, 100, 32);
+    r4 = new Phaser.Rectangle(400, 250, 100, 32);
+
+    // console.log(module.sample);
+
 }
 
 function update() {
 
-	if (module.channel[0].noteon) {sam1=module.channel[0].sample; modsamples=1;}else{modsamples=0;}
-	if (module.channel[1].noteon) {sam2=module.channel[1].sample; modsamples=1;}else{modsamples=0;}
-	if (module.channel[2].noteon) {sam3=module.channel[2].sample; modsamples=1;}else{modsamples=0;}
-	if (module.channel[3].noteon) {sam4=module.channel[3].sample; modsamples=1;}else{modsamples=0;}
+	sampleName1 = '';
+	sampleName2 = '';
+	sampleName3 = '';
+	sampleName4 = '';
+		
+	sample1 = module.channel[0].sample;
+	sample2 = module.channel[1].sample;
+	sample3 = module.channel[2].sample;
+	sample4 = module.channel[3].sample;
 
-	var posi=module.position;
-	var patt=module.row;
-	var bpm=module.bpm;
-	var spd=module.speed;
-	var modname=module.title;
-	var modauth=module.signature;
+	/*
+		module.sample = array of Objects containing:
+
+		data (Float32Array)
+		finetime
+		length (ms? bytes?)
+		looplength
+		loopstart
+		name
+		volume
+
+arpeggio: 0
+command: 0
+data: 0
+flags: 0
+note: 22
+noteon: 1
+period: 240
+sample: 11
+samplepos: 314.3411880952386
+samplespeed: 0.335118537414966
+semitone: 14
+slidespeed: 0
+slideto: 214
+slidetospeed: 0
+vibratodepth: 0
+vibratopos: 0
+vibratospeed: 0
+vibratowave: 0
+voiceperiod: 240
+volume: 64
+	*/
+
+	if (module.sample[sample1])
+	{
+		sampleName1 = module.sample[sample1].name;
+	}
+
+	if (module.sample[sample2])
+	{
+		sampleName2 = module.sample[sample2].name;
+	}
+
+	if (module.sample[sample3])
+	{
+		sampleName3 = module.sample[sample3].name;
+	}
+
+	if (module.sample[sample4])
+	{
+		sampleName4 = module.sample[sample4].name;
+	}
+
+	// vu1.width = Math.round(module.vu[0] * 400);
+	// vu2.width = Math.round(module.vu[1] * 400);
+	// vu3.width = Math.round(module.vu[2] * 400);
+	// vu4.width = Math.round(module.vu[3] * 400);
+
+	r1.width = Math.round(module.vu[0] * 500);
+	r2.width = Math.round(module.vu[1] * 500);
+	r3.width = Math.round(module.vu[2] * 500);
+	r4.width = Math.round(module.vu[3] * 500);
 
 }
 
 function render() {
 
+	game.debug.renderText('Sample ' + sample1 + ' : ' + sampleName1, 16, 32);
+	game.debug.renderText('Sample ' + sample2 + ' : ' + sampleName2, 16, 64);
+	game.debug.renderText('Sample ' + sample3 + ' : ' + sampleName3, 16, 96);
+	game.debug.renderText('Sample ' + sample4 + ' : ' + sampleName4, 16, 128);
+
+	game.debug.renderText('Position: ' + module.position, 16, 160);
+	game.debug.renderText('Pattern: ' + module.row, 16, 192);
+	game.debug.renderText('BPM: ' + module.bpm, 16, 224);
+	game.debug.renderText('Speed: ' + module.speed, 16, 256);
+	game.debug.renderText('Name: ' + module.title, 16, 288);
+	game.debug.renderText('Author: ' + module.signature, 16, 320);
+
+	game.debug.renderText('vu1: ' + module.vu[0], 16, 352);
+	game.debug.renderText('vu2: ' + module.vu[1], 16, 384);
+	game.debug.renderText('vu3: ' + module.vu[2], 16, 416);
+	game.debug.renderText('vu4: ' + module.vu[3], 16, 448);
+
+	game.debug.renderRectangle(r1);
+	game.debug.renderRectangle(r2);
+	game.debug.renderRectangle(r3);
+	game.debug.renderRectangle(r4);
+
 }

examples/wip/rendertexture1.js

@@ -1,38 +1,76 @@
 
-var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
+var game = new Phaser.Game(800, 600, Phaser.WEBGL, 'phaser-example', { preload: preload, create: create, update: update });
 
 function preload() {
 
-    game.load.spritesheet('veggies', 'assets/sprites/fruitnveg32wh37.png', 32, 32);
+    game.load.image('spin1', 'assets/sprites/spinObj_01.png');
+    game.load.image('spin2', 'assets/sprites/spinObj_02.png');
+    game.load.image('spin3', 'assets/sprites/spinObj_03.png');
+    game.load.image('spin4', 'assets/sprites/spinObj_04.png');
+    game.load.image('spin5', 'assets/sprites/spinObj_05.png');
+    game.load.image('spin6', 'assets/sprites/spinObj_06.png');
+    game.load.image('spin7', 'assets/sprites/spinObj_07.png');
+    game.load.image('spin8', 'assets/sprites/spinObj_08.png');
 
 }
 
-var group;
-var texture;
+var renderTexture;
+var renderTexture2;
+var currentTexture;
+var outputSprite;
+var stuffContainer;
+var count = 0;
 
 function create() {
 
-	group = game.add.group();
-	group.create(0, 0, 'veggies', 0);
-	group.create(32, 0, 'veggies', 1);
-	group.create(0, 32, 'veggies', 2);
-	group.create(32, 32, 'veggies', 3);
-	group.visible = false;
+	// create two render textures.. these dynamic textures will be used to draw the scene into itself
+	renderTexture = game.add.renderTexture('texture1', 800, 600);
+	renderTexture2 = game.add.renderTexture('textur2e', 800, 600);
+	currentTexture = renderTexture;
 
-	texture = game.add.renderTexture('texture', 800, 600);
-	
-	game.add.sprite(0, 0, texture);
+	// create a new sprite that uses the render texture we created above
+	outputSprite = game.add.sprite(400, 300, currentTexture);
+
+	// align the sprite
+	outputSprite.anchor.x = 0.5;
+	outputSprite.anchor.y = 0.5;
+
+	stuffContainer = game.add.group();
+	stuffContainer.x = 800/2;
+	stuffContainer.y = 600/2
+
+	// now create some items and randomly position them in the stuff container
+	for (var i = 0; i < 20; i++)
+	{
+		var item = stuffContainer.create(Math.random() * 400 - 200, Math.random() * 400 - 200, game.rnd.pick(game.cache.getImageKeys()));
+		item.anchor.setTo(0.5, 0.5);
+	}
+
+	// used for spinning!
+	count = 0;
 
 }
 
 function update() {
 
-	var clear = false;
+	stuffContainer.addAll('rotation', 0.1);
 
-	for (var i = 0; i < 60; i++)
-	{
-		clear = (i == 0);
-		texture.renderXY(group, game.world.randomX, game.world.randomY, clear);
-	}
+	count += 0.01;
+
+	// swap the buffers..
+	var temp = renderTexture;
+	renderTexture = renderTexture2;
+	renderTexture2 = temp;
+
+	// set the new texture
+	outputSprite.setTexture(renderTexture);
+
+	// twist this up!
+	stuffContainer.rotation -= 0.01
+	outputSprite.scale.x = outputSprite.scale.y  = 1 + Math.sin(count) * 0.2;
+
+	// render the stage to the texture
+	// the true clears the texture before content is rendered
+	renderTexture2.renderXY(game.stage.display, 0, 0, true);
 
 }

examples/wip/tilemap.js

@@ -65,7 +65,7 @@ function create() {
     layer.resizeWorld();
 
     //coins = 
-    map.createFromObjects(34, 'coin', 0)
+    map.createFromObjects('Object Layer 1', 34, 'coin', 0);
 
     // layer2 = game.add.tilemapLayer(0, 0, 400, 600, null, map, 0);
     // layer.cameraOffset.x = 400;