![\"Tiny](\"https://peter-hutsul.github.io/h5tiny/examples/res/image2.png\")
\r\n\r\n \r\n
\r\n Examples |\r\n Documentation\r\n
\r\n\r\nIt is a fast, comfortable, lightweight and flexible html5 game framework, you can use for building 2D games and playable ads.\r\nThe first version of this project was based on PIXI library.\r\nThe syntax of application is pretty similar to the Phaser framework.\r\n\r\nUse our plugins to extend Tiny abilities:\r\n\r\n- [three 📦](https://github.com/peter-hutsul/h5tiny/tree/master/plugins/three)\r\n- [particles 🔥](https://github.com/peter-hutsul/h5tiny/tree/master/plugins/particles)\r\n- [sound 🎵](https://github.com/peter-hutsul/h5tiny/tree/master/plugins/sound)\r\n- [create 🛠](https://github.com/peter-hutsul/h5tiny/tree/master/plugins/create)\r\n- [anim 🎬](https://github.com/peter-hutsul/h5tiny/tree/master/plugins/anim)\r\n- [extra ❤️](https://github.com/peter-hutsul/h5tiny/tree/master/plugins/extra)\r\n\r\n### Installation\r\n\r\nInstall via npm:\r\n\r\n```sh\r\n$ npm install h5tiny\r\n```\r\n\r\nUse CDN:\r\n\r\n```html\r\n\r\n```\r\n\r\n### API Documentation\r\n\r\nWork in progress ...\r\n\r\nBut\r\n\r\nSee the sources for details, it's easy !\r\n\r\n### Usages\r\n\r\nBasic Usage:\r\n\r\n```javascript\r\nvar renderer = new Tiny.CanvasRenderer(640, 320);\r\ndocument.body.appendChild(renderer.domElement);\r\n\r\nvar scene = new Tiny.Scene();\r\nvar text = new Tiny.Text(\"Hello World!\");\r\nscene.add(text);\r\nrenderer.render(scene);\r\n\r\n```\r\n\r\nTiny application with basic systems and state manager:\r\n\r\n```javascript\r\nvar renderer = new Tiny.CanvasRenderer(640, 320);\r\ndocument.body.appendChild(renderer.domElement);\r\n\r\nvar scene = new Tiny.Scene();\r\n\r\nvar states = {\r\n preload: function() {\r\n // Tiny.Loader\r\n // this.load.image(\"key\", source);\r\n },\r\n create: function() {\r\n\r\n // var sprite = new Tiny.Sprite(\"key\");\r\n\r\n var text = new Tiny.Text(\"Hello World!\");\r\n this.text = text;\r\n text.x = 200;\r\n text.y = 100;\r\n scene.add(text);\r\n },\r\n update: function(time, delta) {\r\n this.text.rotation += delta * 0.001;\r\n },\r\n render: function() {\r\n renderer.render(scene);\r\n }\r\n}\r\n\r\nnew Tiny.App(states);\r\n\r\n```\r\n\r\nTiny application with class (full example)\r\n\r\n```javascript\r\nimport 'h5tiny';\r\n\r\nclass MyGame extends Tiny.App {\r\n\r\n constructor(width, height) {\r\n\r\n super();\r\n\r\n this.width = width;\r\n this.height = height;\r\n\r\n this.renderer = new Tiny.CanvasRenderer(this.width, this.height);\r\n\r\n /**\r\n * Specify DOM element for Tiny.Input \r\n */\r\n this.inputView = this.renderer.domElement;\r\n\r\n document.body.appendChild(this.renderer.domElement);\r\n\r\n this.scene = new Tiny.Scene();\r\n }\r\n\r\n preload() {\r\n // Tiny.Loader\r\n // this.load.image(\"image1\", source);\r\n // this.load.atlas(\"image2\", source, sourceFrames);\r\n // this.load.spritesheet(\"image3\", source, sourceFrames);\r\n }\r\n\r\n create() {\r\n\r\n // var sprite = new Tiny.Sprite(image1);\r\n // var sprite2 = new Tiny.Sprite(\"image2\", \"frameName\");\r\n // var graphics = new Tiny.Graphics();\r\n // graphics.drawRect(20, 20, 100, 50);\r\n // var container = new Tiny.Object2D();\r\n // container.add(sprite2d);\r\n // container.add(new Tiny.Text(\"In container!\"));\r\n\r\n var text = new Tiny.Text(\"Hello World!\");\r\n this.text = text;\r\n text.x = 200;\r\n text.y = 100;\r\n this.scene.add(text);\r\n\r\n // Tiny.Timer\r\n this.timer.add(1000, function() {\r\n console.log(\"Timer example: one time\");\r\n });\r\n\r\n this.timer.loop(1000, function() {\r\n console.log(\"Timer example: loop\");\r\n })\r\n\r\n // Tiny.Input\r\n this.input.on(\"down\", function(e) {\r\n console.log(\"Down on game\");\r\n });\r\n\r\n this.input.on(\"move\", function(e) {\r\n console.log(\"Mouse move: \" + e.x + \":\" + e.y);\r\n });\r\n\r\n this.input.add(text);\r\n text.input.on(\"click\", function(e) {\r\n console.log(\"Click on text\");\r\n });\r\n\r\n text.input.on(\"down\", function(e) {\r\n console.log(\"Down on text\");\r\n });\r\n\r\n text.input.on(\"up\", function(e) {\r\n console.log(\"Up on text\");\r\n });\r\n\r\n this.tweens.add(text.scale).to({\r\n x: 1.1,\r\n y: 1.1\r\n }, 500).yoyo(true).easing(Tiny.Easing.Sinusoidal.InOut).repeat(Infinity).start();\r\n }\r\n\r\n update(time, delta) {\r\n this.text.rotation += delta * 0.001;\r\n }\r\n\r\n render() {\r\n this.renderer.render(this.scene);\r\n }\r\n\r\n resize(width, height) {\r\n\r\n super.resize(width, height);\r\n\r\n this.renderer.setSize(width, height);\r\n }\r\n\r\n destroy(clearCache) {\r\n\r\n super.destroy(clearCache);\r\n\r\n this.scene.destroy();\r\n this.renderer.destroy(true);\r\n }\r\n\r\n}\r\n\r\nnew MyGame(640, 320);\r\n\r\n```\r\n\r\n### Plugins\r\n\r\nThree.js plugin (three):\r\n\r\n```javascript\r\nimport 'h5tiny';\r\nimport 'h5tiny/plugins/three';\r\n\r\nclass MyGame extends Tiny.App {\r\n\r\n constructor(width, height) {\r\n\r\n super();\r\n\r\n this.width = width;\r\n this.height = height;\r\n\r\n this.renderer = new THREE.WebGLRenderer({\r\n antialias: true\r\n });\r\n\r\n this.renderer.outputEncoding = THREE.sRGBEncoding;\r\n this.renderer.setSize(this.width, this.height);\r\n this.inputView = this.renderer.domElement;\r\n document.body.appendChild(this.renderer.domElement);\r\n\r\n this.scene = new THREE.Scene();\r\n this.camera = new THREE.OrthographicCamera(1, 1, 1, 1, 0.3, 500);\r\n\r\n this.camera.position.set(40, 50, 40);\r\n this.camera.lookAt(0, 0, 0);\r\n this.camera.distance = 4;\r\n\r\n this.screen2d = new Tiny.Screen2D(this.width, this.height);\r\n\r\n this.setupCamera();\r\n }\r\n\r\n preload() {\r\n // Tiny.Loader\r\n // this.load.image(\"image1\", source);\r\n // this.load.atlas(\"image2\", source, sourceFrames);\r\n // this.load.spritesheet(\"image3\", source, sourceFrames);\r\n\r\n // this.load.gltf(\"model\", gltfJson, splitObjects = false );\r\n // this.load.texture3d(\"texture\", imageSrc);\r\n }\r\n\r\n create() {\r\n\r\n var light = new THREE.DirectionalLight(0xffffff, 1);\r\n light.position.set(15, 59, 53);\r\n light.lookAt(0, 0, 0);\r\n this.scene.add(light);\r\n\r\n var text = new Tiny.Text(\"Hello World!\", {\r\n fill: \"#ffffff\"\r\n });\r\n this.text = text;\r\n text.x = 200;\r\n text.y = 100;\r\n this.screen2d.add(text);\r\n\r\n this.tweens.add(text.scale).to({\r\n x: 1.1,\r\n y: 1.1\r\n }, 500).yoyo(true).easing(Tiny.Easing.Sinusoidal.InOut).repeat(Infinity).start();\r\n\r\n var mesh = new THREE.Mesh(new THREE.BoxBufferGeometry(1, 1, 1), new THREE.MeshLambertMaterial({\r\n color: \"#ff4534\"\r\n }));\r\n mesh.material.color.convertSRGBToLinear();\r\n this.scene.add(mesh);\r\n\r\n // var importedScene = this.cache.gltf[\"model\"].scene;\r\n // this.scene.add(importedScene);\r\n\r\n // var importedSceneMesh = this.cache.mesh3d[\"model.meshName\"];\r\n // importedSceneMesh.material.map = this.cache.texture3d[\"texture\"];\r\n // this.scene.add(importedSceneMesh);\r\n }\r\n\r\n update(time, delta) {\r\n this.text.rotation += delta * 0.001;\r\n }\r\n\r\n setupCamera() {\r\n\r\n var aspect = this.width / this.height;\r\n var distance = this.camera.distance;\r\n\r\n if (this.camera) {\r\n if (this.camera.isOrthographicCamera) {\r\n this.camera.left = -distance * aspect;\r\n this.camera.right = distance * aspect;\r\n this.camera.top = distance;\r\n this.camera.bottom = -distance;\r\n } else {\r\n this.camera.fov = distance * 1.2;\r\n this.camera.aspect = aspect;\r\n }\r\n\r\n this.camera.updateProjectionMatrix();\r\n }\r\n }\r\n\r\n setPixelRatio(dpr) {\r\n this.renderer.setPixelRatio(dpr);\r\n this.screen2d.renderer.setPixelRatio(dpr);\r\n }\r\n\r\n render() {\r\n this.renderer.autoClear = true;\r\n this.renderer.render(this.scene, this.camera);\r\n this.renderer.autoClear = false;\r\n this.renderer.render(this.screen2d.scene, this.screen2d.camera);\r\n }\r\n\r\n resize(width, height) {\r\n\r\n super.resize(width, height);\r\n\r\n this.screen2d.setSize(width, height)\r\n this.renderer.setSize(width, height);\r\n this.setupCamera();\r\n }\r\n\r\n destroy(clearCache) {\r\n\r\n super.destroy(clearCache);\r\n\r\n this.screen2d.scene.dispose();\r\n this.scene.dispose();\r\n if (this.renderer.domElement.parentNode) {\r\n this.renderer.domElement.parentNode.removeChild(this.renderer.domElement);\r\n }\r\n\r\n this.renderer.dispose();\r\n this.renderer = undefined;\r\n }\r\n}\r\n\r\nnew MyGame(640, 320);\r\n\r\n```\r\n\r\nParticles plugin (particles)\r\n\r\n```javascript\r\nimport 'h5tiny';\r\nimport 'h5tiny/plugins/particles';\r\n\r\nclass SmokeParticle extends Tiny.Particle {\r\n\r\n constructor(emitter) {\r\n super(emitter);\r\n }\r\n\r\n update(time, delta) {\r\n this.scale.set(Math.min(time / 1000, 0.7));\r\n this.alpha = Math.min(time / 1000, 1)\r\n\r\n this.y -= this.yspeed * delta\r\n this.x += this.xspeed * delta\r\n this.rotation += this.rotationsp\r\n }\r\n\r\n onEmit() {\r\n this.xspeed = Tiny.rnd(-4, 4) * 0.05\r\n this.yspeed = Tiny.rnd(2, 10) * 0.05\r\n this.rotationsp = Math.random() * 0.02 - 0.01\r\n }\r\n\r\n draw(context, resolution) {\r\n context.fillRect(0, 0, 100 * resolution, 100 * resolution)\r\n }\r\n}\r\n\r\nclass MyGame extends Tiny.App {\r\n\r\n constructor(width, height) {\r\n\r\n super();\r\n\r\n this.width = width;\r\n this.height = height;\r\n\r\n this.renderer = new Tiny.CanvasRenderer(this.width, this.height);\r\n\r\n /**\r\n * Specify DOM element for Tiny.Input \r\n */\r\n this.inputView = this.renderer.domElement;\r\n\r\n document.body.appendChild(this.renderer.domElement);\r\n\r\n this.scene = new Tiny.Scene();\r\n }\r\n\r\n preload() {\r\n // Tiny.Loader\r\n // this.load.image(\"image1\", source);\r\n }\r\n\r\n create() {\r\n var emitter = new Tiny.Emitter(300);\r\n emitter.x = 200;\r\n emitter.y = 250;\r\n emitter.width = 40\r\n\r\n emitter.pattern = SmokeParticle;\r\n emitter.fillStyle = \"#666666\";\r\n\r\n emitter.makeParticles();\r\n // emitter.makeParticles(\"image1\");\r\n\r\n emitter.scale.set(0.7);\r\n emitter.flow(1000, 100, 8);\r\n\r\n // Tiny.ParticleSystem\r\n this.particles.add(emitter);\r\n\r\n this.scene.add(emitter);\r\n }\r\n\r\n render() {\r\n this.renderer.render(this.scene);\r\n }\r\n\r\n resize(width, height) {\r\n\r\n super.resize(width, height);\r\n\r\n this.renderer.setSize(width, height);\r\n }\r\n\r\n destroy(clearCache) {\r\n\r\n super.destroy(clearCache);\r\n\r\n this.scene.destroy();\r\n this.renderer.destroy(true);\r\n }\r\n\r\n}\r\n\r\nnew MyGame(640, 320);\r\n\r\n```\r\n\r\n### Demos\r\n\r\nCheck the [examples](https://peter-hutsul.github.io/h5tiny/examples/index.html) to see more\r\n\r\n[![\"Tiny](\"https://peter-hutsul.github.io/h5tiny/examples/res/image.png\")