made with esnextbin
Last active
August 3, 2016 15:43
-
-
Save voronianski/f6a3a6197346d4168a5fbbc3ef6b0747 to your computer and use it in GitHub Desktop.
esnextbin sketch
This file contains hidden or 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
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>ESNextbin Sketch</title> | |
| <!-- put additional styles and scripts here --> | |
| </head> | |
| <body> | |
| <div id="app"></div> | |
| <!-- put markup and other contents here --> | |
| </body> | |
| </html> |
This file contains hidden or 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
| // Pixi.js basic usage example | |
| // https://github.com/pixijs/pixi.js#basic-usage-example | |
| import Pixi from 'pixi.js'; | |
| // You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` | |
| // which will try to choose the best renderer for the environment you are in. | |
| const renderer = new Pixi.WebGLRenderer(800, 600); | |
| // The renderer will create a canvas element for you that you can then insert into the DOM. | |
| document.getElementById('app').appendChild(renderer.view); | |
| // You need to create a root container that will hold the scene you want to draw. | |
| const stage = new Pixi.Container(); | |
| // Declare a global variable for our sprite so that the animate function can access it. | |
| let bunny = null; | |
| // load the texture we need | |
| Pixi.loader.add('bunny', 'https://dl.dropboxusercontent.com/u/100463011/bunny.png').load((loader, resources) => { | |
| // This creates a texture from a 'bunny.png' image. | |
| bunny = new Pixi.Sprite(resources.bunny.texture); | |
| // Setup the position and scale of the bunny | |
| bunny.position.x = 400; | |
| bunny.position.y = 300; | |
| bunny.scale.x = 2; | |
| bunny.scale.y = 2; | |
| // Add the bunny to the scene we are building. | |
| stage.addChild(bunny); | |
| // kick off the animation loop (defined below) | |
| animate(); | |
| }); | |
| function animate() { | |
| // start the timer for the next animation loop | |
| requestAnimationFrame(animate); | |
| // each frame we spin the bunny around a bit | |
| bunny.rotation += 0.01; | |
| // this is the main render call that makes pixi draw your container and its children. | |
| renderer.render(stage); | |
| } |
This file contains hidden or 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
| { | |
| "name": "esnextbin-sketch", | |
| "version": "0.0.0", | |
| "dependencies": { | |
| "pixi.js": "3.0.11" | |
| } | |
| } |
This file contains hidden or 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
| 'use strict'; | |
| var _pixi = require('pixi.js'); | |
| var _pixi2 = _interopRequireDefault(_pixi); | |
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
| // You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer` | |
| // which will try to choose the best renderer for the environment you are in. | |
| var renderer = new _pixi2.default.WebGLRenderer(800, 600); | |
| // The renderer will create a canvas element for you that you can then insert into the DOM. | |
| // Pixi.js basic usage example | |
| // https://github.com/pixijs/pixi.js#basic-usage-example | |
| document.getElementById('app').appendChild(renderer.view); | |
| // You need to create a root container that will hold the scene you want to draw. | |
| var stage = new _pixi2.default.Container(); | |
| // Declare a global variable for our sprite so that the animate function can access it. | |
| var bunny = null; | |
| // load the texture we need | |
| _pixi2.default.loader.add('bunny', 'https://dl.dropboxusercontent.com/u/100463011/bunny.png').load(function (loader, resources) { | |
| // This creates a texture from a 'bunny.png' image. | |
| bunny = new _pixi2.default.Sprite(resources.bunny.texture); | |
| // Setup the position and scale of the bunny | |
| bunny.position.x = 400; | |
| bunny.position.y = 300; | |
| bunny.scale.x = 2; | |
| bunny.scale.y = 2; | |
| // Add the bunny to the scene we are building. | |
| stage.addChild(bunny); | |
| // kick off the animation loop (defined below) | |
| animate(); | |
| }); | |
| function animate() { | |
| // start the timer for the next animation loop | |
| requestAnimationFrame(animate); | |
| // each frame we spin the bunny around a bit | |
| bunny.rotation += 0.01; | |
| // this is the main render call that makes pixi draw your container and its children. | |
| renderer.render(stage); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment