JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://examples.phaser.io/_site/js/phaser.js"></script>
<div id="test"></div>
JavaScript
var game = new Phaser.Game(640, 480, Phaser.AUTO, 'test');
var BasicGame = function(game) {};
BasicGame.Boot = function (game) {
// nothing here
};
BasicGame.Boot.prototype =
{
preload: function() {
game.load.crossOrigin = true;
game.load.image('testpic', 'http://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-256px-SIPI_Jelly_Beans_4.1.07.tiff.jpg');
},
create: function()
{
var displayQuad1 = [{x: 100, y: 100}, {x: 300.243572452, y: 100}, {x: 340, y: 320}, {x: 100, y: 360}];
var UVQuad1 = [{x: 0, y: 0.1}, {x: 0.6, y: 0.5}, {x: 0.5, y: 0.6}, {x: 0.1, y: 0.7}];
var displayQuad2 = [{x: 300.243572452, y: 100}, {x: 540, y: 120}, {x: 560, y: 340}, {x: 340, y: 320}];
var UVQuad2 = [{x: 0.6, y: 0.5}, {x: 1, y: 0.4}, {x: 1, y: 1}, {x: 0.5, y: 0.6}];
this.renderQuad(displayQuad1, UVQuad1);
this.renderQuad(displayQuad2, UVQuad2);
},
update: function()
{
},
render: function()
{
},
log: function()
{
console.log('lalal');
},
deformCoords: function(inputCoords, deformQuad) { // create a deformed set of coordinates from a given quadritlateral
var deformVerts = new PIXI.Float32Array([
deformQuad[0].x,
deformQuad[0].y,
deformQuad[1].x,
deformQuad[1].y,
deformQuad[2].x,
deformQuad[2].y,
deformQuad[0].x,
deformQuad[0].y,
deformQuad[2].x,
deformQuad[2].y,
...