├── .gitignore ├── LICENSE ├── README.md ├── doc.md ├── example ├── first │ ├── Move.js │ ├── a.png │ ├── dist │ │ └── bundle.js │ ├── index.html │ └── index.js ├── input │ ├── InputManager.js │ ├── dist │ │ └── bundle.js │ ├── index.html │ ├── index.js │ └── index1.js ├── rotation │ ├── Rotation.js │ ├── a.png │ ├── dist │ │ └── bundle.js │ ├── index.html │ └── index.js ├── tb │ ├── components │ │ ├── Circle.js │ │ ├── Dot.js │ │ ├── Energy.js │ │ ├── Fish.js │ │ └── More.js │ ├── dist │ │ └── bundle.js │ ├── index.html │ └── index.js ├── text │ ├── dist │ │ └── bundle.js │ ├── index.html │ └── index.js └── touch │ ├── TouchManager.js │ ├── dist │ └── bundle.js │ ├── index.html │ └── index.js ├── package-lock.json ├── package.json ├── src ├── .gitkeep ├── Engine.js ├── base-game-object │ ├── Input.js │ └── Touch.js ├── base │ ├── Camera.js │ ├── Canvas.js │ ├── Component.js │ ├── Frame.js │ ├── GameObject.js │ ├── Input.js │ ├── Scene.js │ ├── types.js │ └── types │ │ ├── Rect.js │ │ └── Vector2.js ├── components │ ├── Img.js │ ├── Input.js │ ├── Renderer.js │ ├── Text.js │ ├── Touch.js │ ├── Transform.js │ └── components.js └── utils │ ├── store.js │ └── tools.js └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | 61 | .DS_Store 62 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 明非 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # thallo 2 | 3 | ## 简介 4 | 一个基于Canvas的组件化游戏框架。 5 | 6 | ## demo 7 | 8 | - [first](https://fanmingfei.github.io/thallo/example/first/) 9 | - [rotation](https://fanmingfei.github.io/thallo/example/rotation/) 10 | - [input](https://fanmingfei.github.io/thallo/example/input/) 11 | - [text](https://fanmingfei.github.io/thallo/example/text/) 12 | - [touch](https://fanmingfei.github.io/thallo/example/touch/) 13 | - [简单模仿淘宝造物节](https://fanmingfei.github.io/thallo/example/tb/) [淘宝造物节](http://c.b1yt.com/h.kKLunM?cv=OKLDZzXw9nG&sm=c4250e) 14 | 15 | ## 工作原理 16 | 17 | ![](http://p4.qhimg.com/t01aee1d92f40e1cb81.jpg) 18 | 19 | - Canvas 显示相机内容，相机需要放到游戏场景内 20 | - 创建游戏对象后将游戏对象添加到场景 21 | - 游戏对象可以添加组件（component），控制对象的属性（图片、动画、文字、位置） 22 | 23 | ![](http://p3.qhimg.com/t0196cc1a97bf0dd10d.jpg) 24 | 25 | - 创建“场景” 26 | - 创建“相机”，并将场景传递给相机 27 | - 创建“Canvas”，并将“相机”传递给Canvas 28 | - 创建“敌人”，“玩家”两个游戏对象 29 | - 创建“状态”、“键盘操作”、“镜头跟随”脚本 30 | - 给“敌人”绑定“状态”脚本 31 | - 给“玩家”绑定“状态”、“键盘操作”、“镜头跟随”组件 32 | - 将“敌人”，“玩家”添加到“场景” 33 | 34 | 当然，你需要给他们设置图片，这样才能在游戏视图中显示出来。 35 | 36 | -------------------------------------------------------------------------------- /doc.md: -------------------------------------------------------------------------------- 1 | # Thallo 2 | 3 | ## GameObject 游戏内对象的父类 4 | 5 | ### scene 6 | 游戏场景，可将游戏内的其他对象放到游戏场景内。 7 | 8 | ### canvas 9 | 画布，独立于场景之外，显示在屏幕上，可用于按钮等 10 | 11 | ### camera 12 | 摄像机，摄像机的拍摄到的内容将会显示在屏幕上。 13 | 14 | ### customObject 15 | 自定义游戏对象，可挂载多个组件 16 | 17 | ### Object 18 | static distroy({name}) 19 | static find({name}) 20 | 21 | construct({name, gameObject, components}) 22 | 23 | find({name}) 24 | addComponent(component) 25 | removeComponent(component) 26 | getComponent(component) 27 | setActive(flag) 28 | distroy() 29 | 30 | 31 | ## Component 可以挂载到游戏对象上 32 | 33 | ### transform 34 | 位置大小 35 | 36 | ### text 37 | 文字 38 | 39 | ### animation 40 | 动画 41 | 42 | ### animator 43 | 动画管理器 44 | 45 | ### image 46 | 图片 47 | 48 | ### music 49 | 音乐 50 | 51 | ### customComponent 52 | 自定义组件，可以自己创建组件，控制对象属性、修改对象上的组件等 53 | 54 | ### component 55 | start() 56 | preUpdate() 57 | update() 58 | lateUpdate() 59 | distroy() 60 | 61 | ## DataTypes 62 | 63 | ### Vector2 二维坐标向量 64 | static minus() 多个Vector相减 65 | static add()。 相加 66 | x 67 | y 68 | 69 | ### Rect 矩形 70 | x 71 | y 72 | width 73 | height 74 | 75 | 76 | 77 | ## 游戏组件依赖 78 | Canvas > Scene > Camera > GameObjects 79 | 80 | Canvas 显示一个 Camera 的内容 81 | 82 | Camera 需要一个 Scene 83 | 84 | 85 | -------------------------------------------------------------------------------- /example/first/Move.js: -------------------------------------------------------------------------------- 1 | import { Component, types } from '../../src/Engine.js'; 2 | // 取出自己想要的类 3 | // fetch needing class. 4 | // const { Component, types: { Vector2 } } = Engine; 5 | const { Vector2 } = types; 6 | // 继承 Component 并且 export 7 | // extend Component and export it 8 | export default class Move extends Component { 9 | constructor({ 10 | targetObject, 11 | }) { 12 | super({ 13 | targetObject 14 | }); 15 | } 16 | update(e) { 17 | 18 | // 随着时间做圆周运动 19 | // Do circle active with time. 20 | const r = 100; 21 | const x = r * Math.sin(0.5 * Math.PI * e.time) + 120, 22 | y = -r * Math.cos(0.5 * Math.PI * e.time) + 150; 23 | // 设置位置 24 | // set position 25 | this.targetObject.transform.position = new Vector2({ x: x, y: y }); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /example/first/a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fanmingfei/thallo/355baf6d50a883c7bf46f03395c6ec1296c07527/example/first/a.png -------------------------------------------------------------------------------- /example/first/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | First 7 | 8 | 9 | 10 | 11 |

12 | 13 | 新建一个Move组件，组件的update会根据当前进入场景的时间设置脚本所绑定的对象的位置，进行圆周运行。 14 | 将这个组件绑定到游戏对象上。 15 |

16 | 17 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /example/first/index.js: -------------------------------------------------------------------------------- 1 | import { GameObject, Camera, Canvas, Scene, types, components } from '../../src/Engine.js'; 2 | import Move from './Move.js'; 3 | const { Img } = components; 4 | const { Vector2, Rect} = types; 5 | 6 | 7 | const canvas = document.getElementById("canvas"); 8 | 9 | // 创建一个场景 10 | // Create a scene 11 | const scene = new Scene({ width: 400, height: 800 }); 12 | 13 | // 创建一个 相机 14 | // Create a camera 15 | const camera = new Camera({ 16 | name: "camera", 17 | transform: { 18 | rect: new Rect({ x: 0, y: 0, width: 400, height: 800 }), 19 | position: new Vector2({ x: 200, y: 400 }), 20 | // anchor: new Vector2({ x: 400, y: 200 }) // !!! default is the middle of rect, 默认锚点在相机的中心点 21 | }, 22 | scene // need a scene to show, 需要一个场景，相机将会显示这个场景的内容 23 | }); 24 | 25 | // 创建将相机设置给 canvas, canvas将显示这个相机的内容 26 | // Create canvas and set camera to the canvas, canvas will display the camera view. 27 | const canvasObj = new Canvas({ canvas: canvas, width: 400, height: 800, camera }); 28 | 29 | // 创建第一个游戏对象 30 | // create the first game object 31 | const firstGameObject = new GameObject({ 32 | name: "firstGameObject", 33 | transform: { 34 | rect: new Rect({ x: 0, y: 0, width: 30, height: 30 }), 35 | }, 36 | components: [ 37 | { 38 | component: Img, 39 | arguments: { 40 | rect: new Rect({ 41 | x: 0, 42 | y: 0, 43 | width: 30, 44 | height: 30 45 | }), 46 | url: 'https://fanmingfei.github.io/thallo/example/first/a.png' 47 | } 48 | }, 49 | { 50 | component: Move, 51 | arguments: {} 52 | } 53 | ] 54 | }); 55 | 56 | 57 | // 将游戏对象添加到场景，当相机能看到对象的时候，对象将会显示在canvas上 58 | // add the game object to scene, when the camera see the game object, the object will show on the canvas. 59 | scene.addGameObjects(firstGameObject); 60 | 61 | 62 | // 也可以使用以下方式添加组件 63 | // You can add Component use following way. 64 | 65 | // gameObject.addComponent(Component)(arguments); 66 | 67 | // 给对象添加一个图片，图片需要设置width 和 height 68 | // mount a Img component, need pass a Rect with width and height 69 | 70 | /* 71 | firstGameObject.addComponent(Img)({ 72 | rect: new Rect({ 73 | x: 0, 74 | y: 0, 75 | width: 30, 76 | height: 30 77 | }), 78 | url: 'https://fanmingfei.github.io/thallo/example/first/a.png' 79 | }); 80 | */ 81 | 82 | 83 | // 给游戏对象添加新的组件，第二个参数是要给组件传递到参数，但是我们写的 Move 组件不需要参数 84 | // add new component to game object, the twice argument is the component needing, but the Move component don't need argument. 85 | 86 | // firstGameObject.addComponent(Move)(); 87 | 88 | 89 | -------------------------------------------------------------------------------- /example/input/InputManager.js: -------------------------------------------------------------------------------- 1 | import { GameObject, Component, keyCode, Input, types, findGameObject } from '../../src/Engine.js'; 2 | 3 | // 取出自己想要的类 4 | // fetch needing class. 5 | // const { Component, types: { Vector2 } } = Engine; 6 | const { Vector2 } = types; 7 | 8 | // 继承 Component 并且 export 9 | // extend Component and export it 10 | export default class InputManager extends Component { 11 | constructor({ targetObject, dir, speed }) { 12 | super({ 13 | targetObject 14 | }); 15 | this.speed = 50; 16 | } 17 | update(e) { 18 | 19 | this.input = findGameObject({name: 'input'}).input; 20 | const conditions = { 21 | [keyCode.W]: new Vector2({x: 0, y: -this.speed * e.deltaTime}), 22 | [keyCode.S]: new Vector2({x: 0, y: this.speed * e.deltaTime}), 23 | [keyCode.A]: new Vector2({x: -this.speed * e.deltaTime, y: 0}), 24 | [keyCode.D]: new Vector2({x: this.speed * e.deltaTime, y: 0}) 25 | }; 26 | for (let condition in conditions) { 27 | if (this.input.getKey(condition)) { 28 | this.move(conditions[condition]); 29 | } 30 | } 31 | 32 | if (this.input.getKeyDown(keyCode.J)) { 33 | this.targetObject.transform.rotation = 45 + this.targetObject.transform.rotation; 34 | } 35 | if (this.input.getKeyUp(keyCode.J)) { 36 | this.targetObject.transform.rotation = 45 + this.targetObject.transform.rotation; 37 | } 38 | } 39 | move(direction){ 40 | const position = this.targetObject.transform.position; 41 | this.targetObject.transform.position = Vector2.add(position, direction); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /example/input/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Input 7 | 8 | 9 | 10 | 11 | 按 W S A D 可以控制游戏对象移动，按住 J 旋转 45°
12 | push W S A D can control the game object move, push J can rotate 45°. 13 |
14 | 15 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /example/input/index.js: -------------------------------------------------------------------------------- 1 | import { GameObject, Camera, Canvas, Scene, types, components, Input } from '../../src/Engine.js'; 2 | import InputManager from './InputManager.js'; 3 | 4 | const { Img } = components; 5 | const { Vector2, Rect} = types; 6 | 7 | 8 | const canvas = document.getElementById("canvas"); 9 | 10 | // 创建一个场景 11 | // Create a scene 12 | const scene = new Scene({ width: 400, height: 800 }); 13 | 14 | // 创建一个 相机 15 | // Create a camera 16 | const camera = new Camera({ 17 | name: "camera", 18 | transform: { 19 | rect: new Rect({ x: 0, y: 0, width: 400, height: 800 }), 20 | position: new Vector2({ x: 200, y: 400 }), 21 | // anchor: new Vector2({ x: 400, y: 200 }) // !!! default is the middle of rect, 默认锚点在相机的中心点 22 | }, 23 | scene // need a scene to show, 需要一个场景，相机将会显示这个场景的内容 24 | }); 25 | 26 | // 创建将相机设置给 canvas, canvas将显示这个相机的内容 27 | // Create canvas and set camera to the canvas, canvas will display the camera view. 28 | const canvasObj = new Canvas({ canvas: canvas, width: 400, height: 800, camera }); 29 | 30 | // 创建第一个游戏对象 31 | // create the first game object 32 | const firstGameObject = new GameObject({ 33 | name: "firstGameObject", 34 | transform: { 35 | rect: new Rect({ x: 0, y: 0, width: 100, height: 100 }), 36 | position: new Vector2({x:180,y:200}), 37 | // rotation: 45 38 | }, 39 | components: [ 40 | { 41 | component: Img, 42 | arguments: { 43 | rect: new Rect({ 44 | x: 0, 45 | y: 0, 46 | width: 100, 47 | height: 100 48 | }), 49 | url: 'https://fanmingfei.github.io/thallo/example/first/a.png' 50 | } 51 | }, 52 | { 53 | component: InputManager, 54 | arguments: { 55 | dir: -1, 56 | speed: 50 57 | } 58 | } 59 | ] 60 | }); 61 | 62 | const input = new Input({canvas: canvasObj}); 63 | 64 | scene.addGameObjects(input, firstGameObject); 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /example/input/index1.js: -------------------------------------------------------------------------------- 1 | import { GameObject, Camera, Canvas, Scene, types, components } from '../../src/Engine.js'; 2 | import InputManager from './InputManager.js'; 3 | const { Img } = components; 4 | const { Vector2, Rect} = types; 5 | 6 | 7 | const canvas = document.getElementById("canvas"); 8 | 9 | // 创建一个场景 10 | // Create a scene 11 | const scene = new Scene({ width: 400, height: 800 }); 12 | 13 | // 创建一个 相机 14 | // Create a camera 15 | const camera = new Camera({ 16 | name: "camera", 17 | transform: { 18 | rect: new Rect({ x: 0, y: 0, width: 400, height: 800 }), 19 | position: new Vector2({ x: 200, y: 400 }), 20 | // anchor: new Vector2({ x: 400, y: 200 }) // !!! default is the middle of rect, 默认锚点在相机的中心点 21 | }, 22 | scene // need a scene to show, 需要一个场景，相机将会显示这个场景的内容 23 | }); 24 | 25 | // 创建将相机设置给 canvas, canvas将显示这个相机的内容 26 | // Create canvas and set camera to the canvas, canvas will display the camera view. 27 | const canvasObj = new Canvas({ canvas: canvas, width: 400, height: 800, camera }); 28 | 29 | // 创建第一个游戏对象 30 | // create the first game object 31 | const firstGameObject = new GameObject({ 32 | name: "firstGameObject", 33 | transform: { 34 | rect: new Rect({ x: 0, y: 0, width: 100, height: 100 }), 35 | position: new Vector2({x:180,y:200}), 36 | rotation: 45 37 | }, 38 | components: [ 39 | { 40 | component: Img, 41 | arguments: { 42 | rect: new Rect({ 43 | x: 0, 44 | y: 0, 45 | width: 100, 46 | height: 100 47 | }), 48 | url: 'https://fanmingfei.github.io/thallo/example/first/a.png' 49 | } 50 | }, 51 | { 52 | component: InputManager, 53 | arguments: { 54 | dir: -1, 55 | speed: 50 56 | } 57 | } 58 | ] 59 | }); 60 | 61 | const input = new 62 | 63 | scene.addGameObjects(firstGameObject); 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /example/rotation/Rotation.js: -------------------------------------------------------------------------------- 1 | import { Component } from '../../src/Engine.js'; 2 | 3 | // 继承 Component 并且 export 4 | // extend Component and export it 5 | export default class Move extends Component { 6 | constructor({ targetObject, dir, speed }) { 7 | super({ 8 | targetObject 9 | }); 10 | this.dir = dir; 11 | this.speed = speed; 12 | } 13 | update(e) { 14 | this.targetObject.transform.rotation = this.targetObject.transform.rotation + (e.deltaTime * this.speed * this.dir); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /example/rotation/a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fanmingfei/thallo/355baf6d50a883c7bf46f03395c6ec1296c07527/example/rotation/a.png -------------------------------------------------------------------------------- /example/rotation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Rotation 7 | 8 | 9 | 10 | 11 | 12 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /example/rotation/index.js: -------------------------------------------------------------------------------- 1 | import { GameObject, Camera, Canvas, Scene, types, components } from '../../src/Engine.js'; 2 | import Rotation from './Rotation.js'; 3 | const { Img } = components; 4 | const { Vector2, Rect} = types; 5 | 6 | 7 | const canvas = document.getElementById("canvas"); 8 | 9 | // 创建一个场景 10 | // Create a scene 11 | const scene = new Scene({ width: 400, height: 800 }); 12 | 13 | // 创建一个 相机 14 | // Create a camera 15 | const camera = new Camera({ 16 | name: "camera", 17 | transform: { 18 | rect: new Rect({ x: 0, y: 0, width: 400, height: 800 }), 19 | position: new Vector2({ x: 200, y: 400 }), 20 | // anchor: new Vector2({ x: 400, y: 200 }) // !!! default is the middle of rect, 默认锚点在相机的中心点 21 | }, 22 | scene // need a scene to show, 需要一个场景，相机将会显示这个场景的内容 23 | }); 24 | 25 | // 创建将相机设置给 canvas, canvas将显示这个相机的内容 26 | // Create canvas and set camera to the canvas, canvas will display the camera view. 27 | const canvasObj = new Canvas({ canvas: canvas, width: 400, height: 800, camera }); 28 | 29 | // 创建第一个游戏对象 30 | // create the first game object 31 | const firstGameObject = new GameObject({ 32 | name: "firstGameObject", 33 | transform: { 34 | rect: new Rect({ x: 0, y: 0, width: 100, height: 100 }), 35 | position: new Vector2({x:180,y:200}), 36 | rotation: 45 37 | }, 38 | components: [ 39 | { 40 | component: Img, 41 | arguments: { 42 | rect: new Rect({ 43 | x: 0, 44 | y: 0, 45 | width: 100, 46 | height: 100 47 | }), 48 | url: 'https://fanmingfei.github.io/thallo/example/first/a.png' 49 | } 50 | }, 51 | { 52 | component: Rotation, 53 | arguments: { 54 | dir: -1, 55 | speed: 50 56 | } 57 | } 58 | ] 59 | }); 60 | // 创建第二个游戏对象 61 | // create the second game object 62 | const secondGameObject = new GameObject({ 63 | name: "firstGameObject", 64 | transform: { 65 | rect: new Rect({ x: 0, y: 0, width: 100, height: 100 }), 66 | position: new Vector2({x:180,y:300}), 67 | rotation: 45 68 | }, 69 | components: [ 70 | { 71 | component: Img, 72 | arguments: { 73 | rect: new Rect({ 74 | x: 0, 75 | y: 0, 76 | width: 100, 77 | height: 100 78 | }), 79 | url: 'https://fanmingfei.github.io/thallo/example/first/a.png' 80 | } 81 | }, 82 | { 83 | component: Rotation, 84 | arguments: { 85 | dir: 1, 86 | speed: 110 87 | } 88 | } 89 | ] 90 | }); 91 | 92 | // 创建第三个游戏对象 93 | // create the third game object 94 | const thirdGameObject = new GameObject({ 95 | name: "thirdGameObject", 96 | transform: { 97 | rect: new Rect({ x: 0, y: 0, width: 100, height: 100 }), 98 | position: new Vector2({x:260,y:300}), 99 | anchor: new Vector2({x:0,y:0}), 100 | rotation: 45 101 | }, 102 | components: [ 103 | { 104 | component: Img, 105 | arguments: { 106 | rect: new Rect({ 107 | x: 0, 108 | y: 0, 109 | width: 100, 110 | height: 100 111 | }), 112 | url: 'https://fanmingfei.github.io/thallo/example/first/a.png' 113 | } 114 | }, 115 | { 116 | component: Rotation, 117 | arguments: { 118 | dir: 1, 119 | speed: 210 120 | } 121 | } 122 | ] 123 | }); 124 | 125 | scene.addGameObjects(firstGameObject, secondGameObject, thirdGameObject); 126 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /example/tb/components/Circle.js: -------------------------------------------------------------------------------- 1 | import { Component } from '../../../src/Engine.js'; 2 | 3 | // 继承 Component 并且 export 4 | // extend Component and export it 5 | export default class Circle extends Component { 6 | constructor({ targetObject }) { 7 | super({ 8 | targetObject 9 | }); 10 | this.targetObject.active = false 11 | } 12 | update(e) { 13 | if (this.targetObject.active) 14 | this.targetObject.transform.rotation = this.targetObject.transform.rotation + 4; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /example/tb/components/Dot.js: -------------------------------------------------------------------------------- 1 | import { Component, findGameObject } from '../../../src/Engine.js'; 2 | import Energy from './Energy'; 3 | // 继承 Component 并且 export 4 | // extend Component and export it 5 | export default class Dot extends Component { 6 | constructor({ targetObject }) { 7 | super({ 8 | targetObject 9 | }); 10 | this.touch = null; 11 | } 12 | preUpdate(e) { 13 | if (!this.touch) { 14 | this.touch = findGameObject({name: 'touch'}).touch; 15 | } 16 | if (this.touch.getTouchStart(this.targetObject)) { 17 | this.targetObject.active = false; 18 | findGameObject({name: 'circle'}).active = true; 19 | findGameObject({name: 'energy'}).getComponent(Energy).setEnergy(300) 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /example/tb/components/Energy.js: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | components, 4 | types 5 | } from '../../../src/Engine.js'; 6 | const {Rect} = types; 7 | const {Text} = components; 8 | export default class Energy extends Component { 9 | constructor({targetObject}) { 10 | super({targetObject}); 11 | this.num = 0; 12 | this.targetNum = 0; 13 | } 14 | setEnergy(num) { 15 | this.targetNum = num; 16 | } 17 | update() { 18 | if (this.num < this.targetNum) { 19 | this.num += 5; 20 | this.targetObject.getComponent(Text).text = this.num; 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /example/tb/components/Fish.js: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | types 4 | } from '../../../src/Engine.js'; 5 | const {Rect} = types; 6 | 7 | export default class Fish extends Component { 8 | constructor({ 9 | targetObject, 10 | width, 11 | height 12 | }) { 13 | super({ 14 | targetObject 15 | }) 16 | this.url = ''; 17 | 18 | this.imageWidth = width; 19 | this.imageHeight = height; 20 | 21 | this.width = 750; 22 | this.height = 410; 23 | this.imageList = []; 24 | this.images = []; 25 | this.image = new Image(); 26 | this.rect = new Rect({ 27 | x: 0, 28 | y: 0, 29 | width: width, 30 | height: height * 0.2608 31 | }); 32 | this.i = 0; 33 | this.init(); 34 | } 35 | update(e) { 36 | this.setImg() 37 | this.i = Math.floor(e.time / 0.1) % 16; 38 | // console.log(this.i) 39 | } 40 | init() { 41 | this.url = 'https://gw.alicdn.com/mt/TB1rFX6SXXXXXbCXpXXXXXXXXXX-1504-1648.jpg?v=1499321313957'; 42 | this.splitImg().then(()=>{ 43 | this.url = 'https://gw.alicdn.com/mt/TB1_zmaSXXXXXcLXXXXXXXXXXXX-1504-1648.jpg?v=1499321313947'; 44 | this.splitImg(); 45 | }) 46 | } 47 | splitImg() { 48 | return new Promise(resolve=>{ 49 | 50 | const width = this.width; 51 | const height = this.height; 52 | const gap = 2; 53 | const canvas = document.createElement('canvas'); 54 | const ctx = canvas.getContext('2d'); 55 | canvas.width = width; 56 | canvas.height = height; 57 | 58 | const image = new Image(); 59 | image.crossOrigin = 'anonymous'; 60 | image.src = this.url; 61 | image.onload = () => { 62 | for (let j = 0; j < 4; j++) { 63 | for (let i = 0; i < 2; i++) { 64 | let sx = i * gap + i * width; 65 | let sy = j * gap + j * height; 66 | ctx.clearRect(0, 0, width, height); 67 | ctx.drawImage(image, sx, sy, width, height, 0, 0, width, height); 68 | // this.imageList.push(); 69 | // this.image.src = canvas.toDataURL('image/png'); 70 | let img = new Image(); 71 | img.src= canvas.toDataURL('image/png'); 72 | this.images.push(img); 73 | } 74 | } 75 | resolve(); 76 | } 77 | }) 78 | } 79 | setImg() { 80 | if (this.images.length == 0) return; 81 | this.targetObject.renderer.pushImages({ 82 | rect: this.rect, 83 | image: this.images[this.i] 84 | }); 85 | } 86 | 87 | } -------------------------------------------------------------------------------- /example/tb/components/More.js: -------------------------------------------------------------------------------- 1 | import { Component, findGameObject } from '../../../src/Engine.js'; 2 | 3 | // 继承 Component 并且 export 4 | // extend Component and export it 5 | export default class More extends Component { 6 | constructor({ targetObject }) { 7 | super({ 8 | targetObject 9 | }); 10 | } 11 | update(e) { 12 | if (!this.touch) { 13 | this.touch = findGameObject({name: 'touch'}).touch; 14 | } 15 | if (this.touch.getTouchStart(this.targetObject)) { 16 | alert('就这一页哦') 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /example/tb/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | First 7 | 8 | 17 | 18 | 19 | 20 | 21 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /example/tb/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | GameObject, 3 | Camera, 4 | Canvas, 5 | Scene, 6 | types, 7 | Touch, 8 | components 9 | } from '../../src/Engine'; 10 | import Fish from './components/Fish'; 11 | import Energy from './components/Energy'; 12 | import Circle from './components/Circle'; 13 | import Dot from './components/Dot'; 14 | import More from './components/More'; 15 | 16 | 17 | const { 18 | Img, 19 | Text 20 | } = components; 21 | const { 22 | Vector2, 23 | Rect 24 | } = types; 25 | 26 | 27 | const width = window.innerWidth; 28 | const height = window.innerHeight; 29 | 30 | const canvas = document.getElementById("canvas"); 31 | canvas.width = width; 32 | canvas.height = height; 33 | // 创建一个场景 34 | // Create a scene 35 | const scene = new Scene({ 36 | width: width, 37 | height: height 38 | }); 39 | 40 | // 创建一个 相机 41 | // Create a camera 42 | const camera = new Camera({ 43 | name: "camera", 44 | transform: { 45 | rect: new Rect({ 46 | x: 0, 47 | y: 0, 48 | width: width, 49 | height: height 50 | }), 51 | position: new Vector2({ 52 | x: width / 2, 53 | y: height / 2 54 | }), 55 | // anchor: new Vector2({ x: width, y: 200 }) // !!! default is the middle of rect, 默认锚点在相机的中心点 56 | }, 57 | scene // need a scene to show, 需要一个场景，相机将会显示这个场景的内容 58 | }); 59 | 60 | // 创建将相机设置给 canvas, canvas将显示这个相机的内容 61 | // Create canvas and set camera to the canvas, canvas will display the camera view. 62 | const canvasObj = new Canvas({ 63 | canvas: canvas, 64 | width: width, 65 | height: height, 66 | camera 67 | }); 68 | 69 | 70 | const touch = new Touch({canvas: canvasObj}); 71 | 72 | 73 | // 创建一个背景 74 | const background = new GameObject({ 75 | name: 'background', 76 | transform: { 77 | position: new Vector2({ 78 | x: 0, 79 | y: 0 80 | }), 81 | rect: new Rect({ 82 | x: 0, 83 | y: 0, 84 | width: width, 85 | height: height 86 | }), 87 | anchor: new Vector2({ 88 | x: 0, 89 | y: 0 90 | }), 91 | }, 92 | components: [{ 93 | component: Img, 94 | arguments: { 95 | rect: new Rect({ 96 | x: 0, 97 | y: 0, 98 | width: width, 99 | height: height 100 | }), 101 | url: 'https://gw.alicdn.com/mt/TB1JGScSXXXXXcyXXXXXXXXXXXX-750-1334.jpg?v=1499321313869' 102 | } 103 | }] 104 | }) 105 | 106 | const fish = new GameObject({ 107 | name: 'fish', 108 | transform: { 109 | position: new Vector2({ 110 | x: 0, 111 | y: height * 0.584 112 | }), 113 | rect: new Rect({ 114 | x: 0, 115 | y: 0, 116 | width: width, 117 | height: height 118 | }), 119 | anchor: new Vector2({ 120 | x: 0, 121 | y: 0, 122 | 123 | }) 124 | }, 125 | components: [{ 126 | component: Fish, 127 | arguments: { 128 | width: width, 129 | height: height 130 | } 131 | }] 132 | }) 133 | 134 | const energy = new GameObject({ 135 | name: 'energy', 136 | transform: { 137 | position: new Vector2({ 138 | x: width / 2, 139 | y: height * 0.2333 140 | }), 141 | rect: new Rect({ 142 | x: 0, 143 | y: 0, 144 | width: width, 145 | height: 60 146 | }), 147 | // anchor: new Vector2({x:0,y:0}) 148 | }, 149 | components: [{ 150 | component: Text, 151 | arguments: { 152 | text: '0', 153 | font: '50px futura', 154 | color: '#ddd', 155 | textAlign: 'center', 156 | position: new Vector2({ 157 | x: width / 2, 158 | y: 0 159 | }) 160 | } 161 | }, { 162 | component: Energy 163 | }] 164 | }) 165 | 166 | const canUse = new GameObject({ 167 | name: 'canUse', 168 | transform: { 169 | position: new Vector2({ 170 | x: width / 2, 171 | y: height * 0.16 172 | }), 173 | rect: new Rect({ 174 | x: 0, 175 | y: 0, 176 | width: 136, 177 | height: 18 178 | }), 179 | 180 | }, 181 | components: [{ 182 | component: Img, 183 | arguments: { 184 | rect: new Rect({ 185 | x: 0, 186 | y: 0, 187 | width: 136, 188 | height: 18 189 | }), 190 | url: 'http://p8.qhimg.com/t01894b72700fb00c8a.png' 191 | } 192 | }] 193 | }) 194 | 195 | const dot = new GameObject({ 196 | name: 'dot', 197 | transform: { 198 | position: new Vector2({ 199 | x: width * 0.33, 200 | y: height * 0.45 201 | }), 202 | rect: new Rect({ 203 | x:0, 204 | y:0, 205 | width: 40, 206 | height: 40 207 | }) 208 | }, 209 | components: [{ 210 | component: Img, 211 | arguments: { 212 | rect: new Rect({ 213 | x:0, 214 | y:0, 215 | width: 40, 216 | height: 40 217 | }), 218 | url: 'http://p6.qhimg.com/t013c40a2dc6d75615f.png' 219 | } 220 | }, { 221 | component: Text, 222 | arguments: { 223 | position: new Vector2({ 224 | x: 7, 225 | y: 14 226 | }), 227 | rect: new Rect({ 228 | x: 0, 229 | y: 0, 230 | width: 40, 231 | height: 40 232 | }), 233 | text: '+300', 234 | color: '#fff', 235 | font: '8px sans-serif' 236 | } 237 | }, { 238 | component: Dot 239 | }] 240 | }) 241 | 242 | const circle = new GameObject({ 243 | name: 'circle', 244 | transform: { 245 | position: new Vector2({ 246 | x: width * 0.33, 247 | y: height * 0.45 248 | }), 249 | anchor: new Vector2({ 250 | x: 85/2, 251 | y: 85/2, 252 | }) 253 | }, 254 | components: [{ 255 | component: Img, 256 | arguments: { 257 | rect: new Rect({ 258 | x:0, 259 | y:0, 260 | width: 85, 261 | height: 85 262 | }), 263 | url: 'http://p3.qhimg.com/t0157b0ad49e0be86fe.png' 264 | } 265 | }, { 266 | component: Circle 267 | }] 268 | }); 269 | 270 | 271 | 272 | const more = new GameObject({ 273 | name: 'more', 274 | transform: { 275 | position: new Vector2({ 276 | x: width * 0.5, 277 | y: height * 0.92 278 | }), 279 | rect: new Rect({ 280 | width: 230, 281 | height: 45 282 | }), 283 | anchor: new Vector2({ 284 | x: 230/2, 285 | y: 45/2, 286 | }) 287 | }, 288 | components: [{ 289 | component: Img, 290 | arguments: { 291 | rect: new Rect({ 292 | x:0, 293 | y:0, 294 | width: 230, 295 | height: 45 296 | }), 297 | url: 'http://p8.qhimg.com/t018b0bc7ac8ea50039.png' 298 | } 299 | }, { 300 | component: More 301 | }] 302 | }); 303 | 304 | scene.addGameObjects(touch, background, fish, energy, canUse, dot, circle, more); -------------------------------------------------------------------------------- /example/text/dist/bundle.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // The module cache 3 | /******/ var installedModules = {}; 4 | /******/ 5 | /******/ // The require function 6 | /******/ function __webpack_require__(moduleId) { 7 | /******/ 8 | /******/ // Check if module is in cache 9 | /******/ if(installedModules[moduleId]) { 10 | /******/ return installedModules[moduleId].exports; 11 | /******/ } 12 | /******/ // Create a new module (and put it into the cache) 13 | /******/ var module = installedModules[moduleId] = { 14 | /******/ i: moduleId, 15 | /******/ l: false, 16 | /******/ exports: {} 17 | /******/ }; 18 | /******/ 19 | /******/ // Execute the module function 20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 21 | /******/ 22 | /******/ // Flag the module as loaded 23 | /******/ module.l = true; 24 | /******/ 25 | /******/ // Return the exports of the module 26 | /******/ return module.exports; 27 | /******/ } 28 | /******/ 29 | /******/ 30 | /******/ // expose the modules object (__webpack_modules__) 31 | /******/ __webpack_require__.m = modules; 32 | /******/ 33 | /******/ // expose the module cache 34 | /******/ __webpack_require__.c = installedModules; 35 | /******/ 36 | /******/ // define getter function for harmony exports 37 | /******/ __webpack_require__.d = function(exports, name, getter) { 38 | /******/ if(!__webpack_require__.o(exports, name)) { 39 | /******/ Object.defineProperty(exports, name, { 40 | /******/ configurable: false, 41 | /******/ enumerable: true, 42 | /******/ get: getter 43 | /******/ }); 44 | /******/ } 45 | /******/ }; 46 | /******/ 47 | /******/ // getDefaultExport function for compatibility with non-harmony modules 48 | /******/ __webpack_require__.n = function(module) { 49 | /******/ var getter = module && module.__esModule ? 50 | /******/ function getDefault() { return module['default']; } : 51 | /******/ function getModuleExports() { return module; }; 52 | /******/ __webpack_require__.d(getter, 'a', getter); 53 | /******/ return getter; 54 | /******/ }; 55 | /******/ 56 | /******/ // Object.prototype.hasOwnProperty.call 57 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 58 | /******/ 59 | /******/ // __webpack_public_path__ 60 | /******/ __webpack_require__.p = ""; 61 | /******/ 62 | /******/ // Load entry module and return exports 63 | /******/ return __webpack_require__(__webpack_require__.s = 9); 64 | /******/ }) 65 | /************************************************************************/ 66 | /******/ ([ 67 | /* 0 */ 68 | /***/ (function(module, exports, __webpack_require__) { 69 | 70 | "use strict"; 71 | 72 | 73 | Object.defineProperty(exports, "__esModule", { 74 | value: true 75 | }); 76 | exports.Rect = exports.Vector2 = undefined; 77 | 78 | var _Vector = __webpack_require__(13); 79 | 80 | var _Vector2 = _interopRequireDefault(_Vector); 81 | 82 | var _Rect = __webpack_require__(14); 83 | 84 | var _Rect2 = _interopRequireDefault(_Rect); 85 | 86 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 87 | 88 | exports.Vector2 = _Vector2.default; 89 | exports.Rect = _Rect2.default; 90 | exports.default = { 91 | Vector2: _Vector2.default, 92 | Rect: _Rect2.default 93 | }; 94 | 95 | /***/ }), 96 | /* 1 */ 97 | /***/ (function(module, exports, __webpack_require__) { 98 | 99 | "use strict"; 100 | 101 | 102 | Object.defineProperty(exports, "__esModule", { 103 | value: true 104 | }); 105 | 106 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 107 | 108 | var _store = __webpack_require__(2); 109 | 110 | var _store2 = _interopRequireDefault(_store); 111 | 112 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 113 | 114 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 115 | 116 | var Component = function () { 117 | function Component(_ref) { 118 | var targetObject = _ref.targetObject; 119 | 120 | _classCallCheck(this, Component); 121 | 122 | this.targetObject = targetObject; 123 | this.active = true; 124 | } 125 | 126 | _createClass(Component, [{ 127 | key: 'start', 128 | value: function start() {} 129 | }, { 130 | key: 'preUpdate', 131 | value: function preUpdate() {} 132 | }, { 133 | key: 'update', 134 | value: function update() {} 135 | }, { 136 | key: 'lateUpdate', 137 | value: function lateUpdate() {} 138 | }, { 139 | key: 'setActive', 140 | value: function setActive(flag) { 141 | this.active = flag; 142 | } 143 | }, { 144 | key: 'distroy', 145 | value: function distroy() { 146 | (0, _store2.default)(targetObject.scene)('component').remove(this); 147 | } 148 | }]); 149 | 150 | return Component; 151 | }(); 152 | 153 | exports.default = Component; 154 | 155 | /***/ }), 156 | /* 2 */ 157 | /***/ (function(module, exports, __webpack_require__) { 158 | 159 | "use strict"; 160 | 161 | 162 | Object.defineProperty(exports, "__esModule", { 163 | value: true 164 | }); 165 | 166 | var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); 167 | 168 | exports.default = store; 169 | var cache = new Map(); 170 | function store(id) { 171 | if (!cache.has(id)) { 172 | cache.set(id, new Map()); 173 | } 174 | return function (name) { 175 | if (!cache.get(id).has(name)) { 176 | cache.get(id).set(name, []); 177 | } 178 | var store = cache.get(id).get(name); 179 | return { 180 | push: function push() { 181 | store.push.apply(store, arguments); 182 | }, 183 | remove: function remove() { 184 | for (var _len = arguments.length, objs = Array(_len), _key = 0; _key < _len; _key++) { 185 | objs[_key] = arguments[_key]; 186 | } 187 | 188 | var _iteratorNormalCompletion = true; 189 | var _didIteratorError = false; 190 | var _iteratorError = undefined; 191 | 192 | try { 193 | for (var _iterator = objs[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { 194 | obj = _step.value; 195 | 196 | var index = store.findIndex(function (o) { 197 | return o == obj; 198 | }); 199 | index !== -1 && store.splice(index, 1); 200 | } 201 | } catch (err) { 202 | _didIteratorError = true; 203 | _iteratorError = err; 204 | } finally { 205 | try { 206 | if (!_iteratorNormalCompletion && _iterator.return) { 207 | _iterator.return(); 208 | } 209 | } finally { 210 | if (_didIteratorError) { 211 | throw _iteratorError; 212 | } 213 | } 214 | } 215 | }, 216 | getAll: function getAll() { 217 | return store; 218 | }, 219 | clear: function clear() { 220 | store.clear(); 221 | } 222 | }; 223 | }; 224 | }; 225 | 226 | var findGameObject = exports.findGameObject = function findGameObject(_ref) { 227 | var name = _ref.name; 228 | var _iteratorNormalCompletion2 = true; 229 | var _didIteratorError2 = false; 230 | var _iteratorError2 = undefined; 231 | 232 | try { 233 | for (var _iterator2 = cache[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) { 234 | var _ref2 = _step2.value; 235 | 236 | var _ref3 = _slicedToArray(_ref2, 2); 237 | 238 | var key = _ref3[0]; 239 | var value = _ref3[1]; 240 | 241 | return value.get('gameObject').find(function (go) { 242 | return go.name == name; 243 | }); 244 | } 245 | } catch (err) { 246 | _didIteratorError2 = true; 247 | _iteratorError2 = err; 248 | } finally { 249 | try { 250 | if (!_iteratorNormalCompletion2 && _iterator2.return) { 251 | _iterator2.return(); 252 | } 253 | } finally { 254 | if (_didIteratorError2) { 255 | throw _iteratorError2; 256 | } 257 | } 258 | } 259 | }; 260 | 261 | /***/ }), 262 | /* 3 */ 263 | /***/ (function(module, exports, __webpack_require__) { 264 | 265 | "use strict"; 266 | 267 | 268 | Object.defineProperty(exports, "__esModule", { 269 | value: true 270 | }); 271 | 272 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 273 | 274 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 275 | 276 | var _components = __webpack_require__(4); 277 | 278 | var _Input = __webpack_require__(5); 279 | 280 | var _Input2 = _interopRequireDefault(_Input); 281 | 282 | var _Touch = __webpack_require__(6); 283 | 284 | var _Touch2 = _interopRequireDefault(_Touch); 285 | 286 | var _store = __webpack_require__(2); 287 | 288 | var _store2 = _interopRequireDefault(_store); 289 | 290 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 291 | 292 | function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } 293 | 294 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 295 | 296 | var GameObject = function () { 297 | function GameObject(_ref) { 298 | var name = _ref.name, 299 | _ref$transform = _ref.transform, 300 | transform = _ref$transform === undefined ? undefined : _ref$transform, 301 | _ref$components = _ref.components, 302 | components = _ref$components === undefined ? [] : _ref$components; 303 | 304 | _classCallCheck(this, GameObject); 305 | 306 | this.name = name; 307 | this.childs = []; 308 | this.parent = undefined; 309 | this.components = []; 310 | this.active = true; 311 | this.scene = undefined; 312 | this.transform = this.addComponent(_components.Transform)(transform); 313 | this.renderer = this.addComponent(_components.Renderer)(); 314 | var _iteratorNormalCompletion = true; 315 | var _didIteratorError = false; 316 | var _iteratorError = undefined; 317 | 318 | try { 319 | for (var _iterator = components[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { 320 | var component = _step.value; 321 | 322 | this.addComponent(component.component)(component.arguments); 323 | } 324 | } catch (err) { 325 | _didIteratorError = true; 326 | _iteratorError = err; 327 | } finally { 328 | try { 329 | if (!_iteratorNormalCompletion && _iterator.return) { 330 | _iterator.return(); 331 | } 332 | } finally { 333 | if (_didIteratorError) { 334 | throw _iteratorError; 335 | } 336 | } 337 | } 338 | } 339 | 340 | _createClass(GameObject, [{ 341 | key: 'find', 342 | value: function find(_ref2) { 343 | var name = _ref2.name; 344 | 345 | var obj = this.childs.find(function (obj) { 346 | return obj.name == name; 347 | }); 348 | if (!obj) { 349 | var _iteratorNormalCompletion2 = true; 350 | var _didIteratorError2 = false; 351 | var _iteratorError2 = undefined; 352 | 353 | try { 354 | for (var _iterator2 = this.childs[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) { 355 | var child = _step2.value; 356 | 357 | obj = child.find({ 358 | name: name 359 | }); 360 | if (obj) break; 361 | } 362 | } catch (err) { 363 | _didIteratorError2 = true; 364 | _iteratorError2 = err; 365 | } finally { 366 | try { 367 | if (!_iteratorNormalCompletion2 && _iterator2.return) { 368 | _iterator2.return(); 369 | } 370 | } finally { 371 | if (_didIteratorError2) { 372 | throw _iteratorError2; 373 | } 374 | } 375 | } 376 | } 377 | return obj; 378 | } 379 | }, { 380 | key: 'addComponent', 381 | value: function addComponent(Component) { 382 | var _this = this; 383 | 384 | return function () { 385 | var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; 386 | 387 | var arg = _extends({ 388 | targetObject: _this 389 | }, obj); 390 | var component = new Component(arg); 391 | if (component instanceof _Input2.default) { 392 | _this.input = component; 393 | } 394 | if (component instanceof _Touch2.default) { 395 | _this.touch = component; 396 | } 397 | if (_this.componentsStore) { 398 | _this.componentsStore.push(component); 399 | } 400 | _this.components.push(component); 401 | component.start(); 402 | return component; 403 | }; 404 | } 405 | }, { 406 | key: 'removeComponent', 407 | value: function removeComponent(Component) { 408 | var index = this.components.findIndex(function (c) { 409 | return c instanceof Component; 410 | }); 411 | index !== -1 && this.component.splice(index, 1); 412 | } 413 | }, { 414 | key: 'getComponent', 415 | value: function getComponent(Component) { 416 | return this.components.find(function (c) { 417 | return c instanceof Component; 418 | }); 419 | } 420 | }, { 421 | key: 'setActive', 422 | value: function setActive(flag) { 423 | this.active = flag; 424 | } 425 | }, { 426 | key: 'setScene', 427 | value: function setScene(_ref3) { 428 | var _componentsStore; 429 | 430 | var scene = _ref3.scene; 431 | 432 | this.scene = scene; 433 | this.componentsStore = (0, _store2.default)(scene)('component'); 434 | (_componentsStore = this.componentsStore).push.apply(_componentsStore, _toConsumableArray(this.components)); 435 | } 436 | }, { 437 | key: 'distroy', 438 | value: function distroy() { 439 | var _iteratorNormalCompletion3 = true; 440 | var _didIteratorError3 = false; 441 | var _iteratorError3 = undefined; 442 | 443 | try { 444 | for (var _iterator3 = this.components[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) { 445 | var component = _step3.value; 446 | 447 | component.distory(); 448 | } 449 | } catch (err) { 450 | _didIteratorError3 = true; 451 | _iteratorError3 = err; 452 | } finally { 453 | try { 454 | if (!_iteratorNormalCompletion3 && _iterator3.return) { 455 | _iterator3.return(); 456 | } 457 | } finally { 458 | if (_didIteratorError3) { 459 | throw _iteratorError3; 460 | } 461 | } 462 | } 463 | 464 | this.active = false; 465 | } 466 | }]); 467 | 468 | return GameObject; 469 | }(); 470 | 471 | exports.default = GameObject; 472 | 473 | /***/ }), 474 | /* 4 */ 475 | /***/ (function(module, exports, __webpack_require__) { 476 | 477 | "use strict"; 478 | 479 | 480 | Object.defineProperty(exports, "__esModule", { 481 | value: true 482 | }); 483 | exports.Text = exports.Renderer = exports.Transform = exports.Img = undefined; 484 | 485 | var _Img = __webpack_require__(12); 486 | 487 | var _Img2 = _interopRequireDefault(_Img); 488 | 489 | var _Transform = __webpack_require__(15); 490 | 491 | var _Transform2 = _interopRequireDefault(_Transform); 492 | 493 | var _Renderer = __webpack_require__(16); 494 | 495 | var _Renderer2 = _interopRequireDefault(_Renderer); 496 | 497 | var _Text = __webpack_require__(17); 498 | 499 | var _Text2 = _interopRequireDefault(_Text); 500 | 501 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 502 | 503 | exports.Img = _Img2.default; 504 | exports.Transform = _Transform2.default; 505 | exports.Renderer = _Renderer2.default; 506 | exports.Text = _Text2.default; 507 | exports.default = { 508 | Img: _Img2.default, 509 | Transform: _Transform2.default, 510 | Renderer: _Renderer2.default, 511 | Text: _Text2.default 512 | }; 513 | 514 | /***/ }), 515 | /* 5 */ 516 | /***/ (function(module, exports, __webpack_require__) { 517 | 518 | "use strict"; 519 | 520 | 521 | Object.defineProperty(exports, "__esModule", { 522 | value: true 523 | }); 524 | 525 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 526 | 527 | var _Component2 = __webpack_require__(1); 528 | 529 | var _Component3 = _interopRequireDefault(_Component2); 530 | 531 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 532 | 533 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 534 | 535 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 536 | 537 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 538 | 539 | var Input = function (_Component) { 540 | _inherits(Input, _Component); 541 | 542 | function Input(_ref) { 543 | var targetObject = _ref.targetObject, 544 | canvas = _ref.canvas; 545 | 546 | _classCallCheck(this, Input); 547 | 548 | var _this = _possibleConstructorReturn(this, (Input.__proto__ || Object.getPrototypeOf(Input)).call(this, { targetObject: targetObject })); 549 | 550 | _this.canvas = canvas; 551 | _this.currentKeyList = []; 552 | _this.currentFrameDown = []; 553 | _this.currentFrameUp = []; 554 | _this.addEventListener(); 555 | return _this; 556 | } 557 | 558 | _createClass(Input, [{ 559 | key: 'getKeyDown', 560 | value: function getKeyDown(keyCode) { 561 | if (this.currentFrameDown.indexOf(keyCode) != -1) { 562 | return true; 563 | } 564 | return false; 565 | } 566 | }, { 567 | key: 'getKeyUp', 568 | value: function getKeyUp(keyCode) { 569 | if (this.currentFrameUp.indexOf(keyCode) != -1) { 570 | return true; 571 | } 572 | return false; 573 | } 574 | }, { 575 | key: 'getKey', 576 | value: function getKey(keyCode) { 577 | keyCode = +keyCode; 578 | if (this.currentKeyList.indexOf(keyCode) != -1 && this.currentFrameDown.indexOf(keyCode) == -1 && this.currentFrameUp.indexOf(keyCode) == -1) { 579 | return true; 580 | } 581 | return false; 582 | } 583 | }, { 584 | key: 'setKeyDown', 585 | value: function setKeyDown(keyCode) { 586 | if (this.currentKeyList.indexOf(keyCode) != -1) { 587 | return; 588 | } 589 | this.currentKeyList.push(keyCode); 590 | this.currentFrameDown.push(keyCode); 591 | } 592 | }, { 593 | key: 'setKeyUp', 594 | value: function setKeyUp(keyCode) { 595 | var index = this.currentKeyList.findIndex(function (c) { 596 | return c == keyCode; 597 | }); 598 | if (index != -1) { 599 | this.currentKeyList.splice(index, 1); 600 | } 601 | this.currentFrameUp.push(keyCode); 602 | } 603 | }, { 604 | key: 'lateUpdate', 605 | value: function lateUpdate() { 606 | this.clearInput(); 607 | } 608 | }, { 609 | key: 'clearInput', 610 | value: function clearInput() { 611 | this.currentFrameDown = []; 612 | this.currentFrameUp = []; 613 | } 614 | }, { 615 | key: 'addEventListener', 616 | value: function addEventListener() { 617 | var _this2 = this; 618 | 619 | document.addEventListener('keydown', function (e) { 620 | _this2.setKeyDown(e.keyCode); 621 | }); 622 | document.addEventListener('keyup', function (e) { 623 | _this2.setKeyUp(e.keyCode); 624 | }); 625 | } 626 | }]); 627 | 628 | return Input; 629 | }(_Component3.default); 630 | 631 | exports.default = Input; 632 | 633 | /***/ }), 634 | /* 6 */ 635 | /***/ (function(module, exports, __webpack_require__) { 636 | 637 | "use strict"; 638 | 639 | 640 | Object.defineProperty(exports, "__esModule", { 641 | value: true 642 | }); 643 | 644 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 645 | 646 | var _types = __webpack_require__(0); 647 | 648 | var _tools = __webpack_require__(7); 649 | 650 | var _Component2 = __webpack_require__(1); 651 | 652 | var _Component3 = _interopRequireDefault(_Component2); 653 | 654 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 655 | 656 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 657 | 658 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 659 | 660 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 661 | 662 | var Touch = function (_Component) { 663 | _inherits(Touch, _Component); 664 | 665 | function Touch(_ref) { 666 | var targetObject = _ref.targetObject, 667 | canvas = _ref.canvas; 668 | 669 | _classCallCheck(this, Touch); 670 | 671 | var _this = _possibleConstructorReturn(this, (Touch.__proto__ || Object.getPrototypeOf(Touch)).call(this, { targetObject: targetObject })); 672 | 673 | _this.canvas = canvas; 674 | _this.touchStartList = new Map(); 675 | _this.touchList = new Map(); 676 | _this.touchEndList = new Map(); 677 | _this.addEventListener(); 678 | return _this; 679 | } 680 | 681 | _createClass(Touch, [{ 682 | key: 'getTouchStart', 683 | value: function getTouchStart(gameObject) { 684 | if (!gameObject) { 685 | return this.touchStartList.size > 0; 686 | } 687 | 688 | var _iteratorNormalCompletion = true; 689 | var _didIteratorError = false; 690 | var _iteratorError = undefined; 691 | 692 | try { 693 | for (var _iterator = this.touchStartList.values()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { 694 | var touch = _step.value; 695 | 696 | var coll = (0, _tools.isPointCollsion)(new _types.Vector2({ 697 | x: touch.pageX - this.canvas.canvas.offsetLeft, 698 | y: touch.pageY - this.canvas.canvas.offsetTop 699 | }), gameObject); 700 | if (coll) { 701 | return true; 702 | }; 703 | } 704 | } catch (err) { 705 | _didIteratorError = true; 706 | _iteratorError = err; 707 | } finally { 708 | try { 709 | if (!_iteratorNormalCompletion && _iterator.return) { 710 | _iterator.return(); 711 | } 712 | } finally { 713 | if (_didIteratorError) { 714 | throw _iteratorError; 715 | } 716 | } 717 | } 718 | 719 | return false; 720 | } 721 | }, { 722 | key: 'getTouchEnd', 723 | value: function getTouchEnd(gameObject) { 724 | var _iteratorNormalCompletion2 = true; 725 | var _didIteratorError2 = false; 726 | var _iteratorError2 = undefined; 727 | 728 | try { 729 | for (var _iterator2 = this.touchEndList.values()[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) { 730 | var touch = _step2.value; 731 | 732 | var coll = (0, _tools.isPointCollsion)(new _types.Vector2({ 733 | x: touch.pageX - this.canvas.canvas.offsetLeft, 734 | y: touch.pageY - this.canvas.canvas.offsetTop 735 | }), gameObject); 736 | if (coll) { 737 | return true; 738 | }; 739 | } 740 | } catch (err) { 741 | _didIteratorError2 = true; 742 | _iteratorError2 = err; 743 | } finally { 744 | try { 745 | if (!_iteratorNormalCompletion2 && _iterator2.return) { 746 | _iterator2.return(); 747 | } 748 | } finally { 749 | if (_didIteratorError2) { 750 | throw _iteratorError2; 751 | } 752 | } 753 | } 754 | 755 | return false; 756 | } 757 | }, { 758 | key: 'setTouchStart', 759 | value: function setTouchStart(touches) { 760 | var _iteratorNormalCompletion3 = true; 761 | var _didIteratorError3 = false; 762 | var _iteratorError3 = undefined; 763 | 764 | try { 765 | for (var _iterator3 = touches[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) { 766 | var touch = _step3.value; 767 | 768 | 769 | this.touchList.set(touch.identifier, touch); 770 | this.touchStartList.set(touch.identifier, touch); 771 | } 772 | } catch (err) { 773 | _didIteratorError3 = true; 774 | _iteratorError3 = err; 775 | } finally { 776 | try { 777 | if (!_iteratorNormalCompletion3 && _iterator3.return) { 778 | _iterator3.return(); 779 | } 780 | } finally { 781 | if (_didIteratorError3) { 782 | throw _iteratorError3; 783 | } 784 | } 785 | } 786 | } 787 | }, { 788 | key: 'setTouchEnd', 789 | value: function setTouchEnd(touches) { 790 | var _iteratorNormalCompletion4 = true; 791 | var _didIteratorError4 = false; 792 | var _iteratorError4 = undefined; 793 | 794 | try { 795 | for (var _iterator4 = touches[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) { 796 | var touch = _step4.value; 797 | 798 | this.touchList.delete(touch.identifier); 799 | this.touchEndList.set(touch.identifier, touch); 800 | } 801 | } catch (err) { 802 | _didIteratorError4 = true; 803 | _iteratorError4 = err; 804 | } finally { 805 | try { 806 | if (!_iteratorNormalCompletion4 && _iterator4.return) { 807 | _iterator4.return(); 808 | } 809 | } finally { 810 | if (_didIteratorError4) { 811 | throw _iteratorError4; 812 | } 813 | } 814 | } 815 | } 816 | }, { 817 | key: 'lateUpdate', 818 | value: function lateUpdate() { 819 | this.clearTouch(); 820 | } 821 | }, { 822 | key: 'clearTouch', 823 | value: function clearTouch() { 824 | this.touchStartList.clear(); 825 | this.touchEndList.clear(); 826 | } 827 | }, { 828 | key: 'addEventListener', 829 | value: function addEventListener() { 830 | var _this2 = this; 831 | 832 | this.canvas.canvas.addEventListener('touchstart', function (e) { 833 | e.preventDefault(); 834 | e.stopPropagation(); 835 | _this2.setTouchStart(e.touches); 836 | }); 837 | this.canvas.canvas.addEventListener('touchend', function (e) { 838 | _this2.setTouchEnd(e.changedTouches); 839 | }); 840 | this.canvas.canvas.addEventListener('touchcancel', function (e) { 841 | _this2.setTouchEnd(e.touches); 842 | }); 843 | } 844 | }]); 845 | 846 | return Touch; 847 | }(_Component3.default); 848 | 849 | exports.default = Touch; 850 | 851 | /***/ }), 852 | /* 7 */ 853 | /***/ (function(module, exports, __webpack_require__) { 854 | 855 | "use strict"; 856 | 857 | 858 | Object.defineProperty(exports, "__esModule", { 859 | value: true 860 | }); 861 | exports.isCollsion = isCollsion; 862 | exports.isPointCollsion = isPointCollsion; 863 | exports.isPointRectCollsion = isPointRectCollsion; 864 | 865 | var _types = __webpack_require__(0); 866 | 867 | function isCollsion(gameObject1, gameObject2) { 868 | var transform1 = gameObject1.transform; 869 | var transform2 = gameObject2.transform; 870 | 871 | var w1 = transform1.rect.width; 872 | var w2 = transform2.rect.width; 873 | var h1 = transform1.rect.height; 874 | var h2 = transform2.rect.height; 875 | 876 | var x1y1 = _types.Vector2.minus(transform1.position, transform1.anchor); 877 | var x2y2 = _types.Vector2.minus(transform2.position, transform2.anchor); 878 | 879 | var x1 = x1y1.x; 880 | var x2 = x2y2.x; 881 | var y1 = x1y1.y; 882 | var y2 = x2y2.y; 883 | 884 | if (x1 >= x2 && x1 >= x2 + w2) { 885 | return false; 886 | } else if (x1 <= x2 && x1 + w1 <= x2) { 887 | return false; 888 | } else if (y1 >= y2 && y1 >= y2 + h2) { 889 | return false; 890 | } else if (y1 <= y2 && y1 + h1 <= y2) { 891 | return false; 892 | } 893 | return true; 894 | } 895 | 896 | function isPointCollsion(point, gameObject) { 897 | var x1 = point.x; 898 | var y1 = point.y; 899 | 900 | var x2y2 = _types.Vector2.minus(gameObject.transform.position, gameObject.transform.anchor); 901 | var x2 = x2y2.x; 902 | var y2 = x2y2.y; 903 | var w = gameObject.transform.rect.width; 904 | var h = gameObject.transform.rect.height; 905 | 906 | if (x1 >= x2 && x1 <= x2 + w && y1 >= y2 && y1 <= y2 + h) { 907 | return true; 908 | } 909 | return false; 910 | } 911 | 912 | function isPointRectCollsion(point, rect) { 913 | var x1 = point.x; 914 | var y1 = point.y; 915 | var x2 = rect.x; 916 | var y2 = rect.y; 917 | var w = rect.width; 918 | var h = rect.height; 919 | 920 | if (x1 >= x2 && x1 <= x2 + w && y1 >= y2 && y1 <= y2 + h) { 921 | return true; 922 | } 923 | return false; 924 | } 925 | 926 | /***/ }), 927 | /* 8 */ 928 | /***/ (function(module, exports, __webpack_require__) { 929 | 930 | "use strict"; 931 | 932 | 933 | Object.defineProperty(exports, "__esModule", { 934 | value: true 935 | }); 936 | 937 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 938 | 939 | var _tools = __webpack_require__(7); 940 | 941 | var _GameObject2 = __webpack_require__(3); 942 | 943 | var _GameObject3 = _interopRequireDefault(_GameObject2); 944 | 945 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 946 | 947 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 948 | 949 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 950 | 951 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 952 | 953 | var Camera = function (_GameObject) { 954 | _inherits(Camera, _GameObject); 955 | 956 | function Camera(_ref) { 957 | var name = _ref.name, 958 | _ref$transform = _ref.transform, 959 | transform = _ref$transform === undefined ? undefined : _ref$transform, 960 | _ref$components = _ref.components, 961 | components = _ref$components === undefined ? [] : _ref$components, 962 | scene = _ref.scene; 963 | 964 | _classCallCheck(this, Camera); 965 | 966 | var _this = _possibleConstructorReturn(this, (Camera.__proto__ || Object.getPrototypeOf(Camera)).call(this, { 967 | name: name, 968 | transform: transform, 969 | components: components 970 | })); 971 | 972 | _this.scene = scene; 973 | return _this; 974 | } 975 | 976 | // 获取当前相机可见的gameObject 977 | 978 | 979 | _createClass(Camera, [{ 980 | key: 'getVisibleGameObjects', 981 | value: function getVisibleGameObjects() { 982 | var _this2 = this; 983 | 984 | var visibleGameObject = this.scene.gameObjects.reduce(function (prev, gameObject) { 985 | if (gameObject.active && (0, _tools.isCollsion)(_this2, gameObject)) { 986 | prev.push(gameObject); 987 | } else { 988 | return prev; 989 | } 990 | return prev; 991 | }, []); 992 | return visibleGameObject; 993 | } 994 | }, { 995 | key: 'isGameObjectVisible', 996 | value: function isGameObjectVisible(gameObject) { 997 | if (gameObject.active && (0, _tools.isCollsion)(this, gameObject)) { 998 | return true; 999 | } else { 1000 | return false; 1001 | } 1002 | } 1003 | }, { 1004 | key: 'worldToScreen', 1005 | value: function worldToScreen(_ref2) { 1006 | var position = _ref2.position; 1007 | 1008 | var x1y1 = Vector2.minus(this.transform.position, this.transform.anchor); 1009 | return Vector2.minus(position, x1y1); 1010 | } 1011 | }, { 1012 | key: 'screenToWorld', 1013 | value: function screenToWorld(_ref3) { 1014 | var position = _ref3.position; 1015 | 1016 | var x1y1 = Vector2.minus(this.transform.position, this.transform.anchor); 1017 | return Vector2.add(position, x1y1); 1018 | } 1019 | }]); 1020 | 1021 | return Camera; 1022 | }(_GameObject3.default); 1023 | 1024 | exports.default = Camera; 1025 | 1026 | /***/ }), 1027 | /* 9 */ 1028 | /***/ (function(module, exports, __webpack_require__) { 1029 | 1030 | "use strict"; 1031 | 1032 | 1033 | var _Engine = __webpack_require__(10); 1034 | 1035 | function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } 1036 | 1037 | var Text = _Engine.components.Text; 1038 | var Vector2 = _Engine.types.Vector2, 1039 | Rect = _Engine.types.Rect; 1040 | 1041 | 1042 | var canvas = document.getElementById("canvas"); 1043 | 1044 | // 创建一个场景 1045 | // Create a scene 1046 | var scene = new _Engine.Scene({ width: 400, height: 800 }); 1047 | 1048 | // 创建一个 相机 1049 | // Create a camera 1050 | var camera = new _Engine.Camera({ 1051 | name: "camera", 1052 | transform: { 1053 | rect: new Rect({ x: 0, y: 0, width: 400, height: 800 }), 1054 | position: new Vector2({ x: 200, y: 400 }) 1055 | // anchor: new Vector2({ x: 400, y: 200 }) // !!! default is the middle of rect, 默认锚点在相机的中心点 1056 | }, 1057 | scene: scene // need a scene to show, 需要一个场景，相机将会显示这个场景的内容 1058 | }); 1059 | 1060 | // 创建将相机设置给 canvas, canvas将显示这个相机的内容 1061 | // Create canvas and set camera to the canvas, canvas will display the camera view. 1062 | var canvasObj = new _Engine.Canvas({ canvas: canvas, width: 400, height: 800, camera: camera }); 1063 | 1064 | // 创建游戏对象 1065 | // create the game object 1066 | var getRandom = function getRandom() { 1067 | var min = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; 1068 | var max = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10; 1069 | return Math.floor(min + Math.random() * (max - min + 1)); 1070 | }; 1071 | var texts = ['工作使我快乐', '我热爱工作', '你看他是不是傻', '快和牛魔王一起出来看上帝', 'b(￣▽￣)d', '快来用这个游戏引擎', '这个没有物理引擎？', '好厉害！', '这是个无聊的DEMO']; 1072 | var objects = texts.map(function (text) { 1073 | return new _Engine.GameObject({ 1074 | name: "text", 1075 | transform: { 1076 | rect: new Rect({ x: 0, y: 0, width: 400, height: 800 }), 1077 | anchor: new Rect({ x: 0, y: 0 }) 1078 | }, 1079 | components: [{ 1080 | component: Text, 1081 | arguments: { 1082 | text: text, 1083 | font: getRandom(0, 30) + 'px sans-serif', 1084 | color: "rgb(" + getRandom(0, 255) + "," + getRandom(0, 255) + "," + getRandom(0, 255) + ")", 1085 | // color: 'red', 1086 | position: new Vector2({ x: getRandom(0, 200), y: getRandom(0, 750) }) 1087 | } 1088 | }] 1089 | }); 1090 | }); 1091 | 1092 | scene.addGameObjects.apply(scene, _toConsumableArray(objects)); 1093 | 1094 | /***/ }), 1095 | /* 10 */ 1096 | /***/ (function(module, exports, __webpack_require__) { 1097 | 1098 | "use strict"; 1099 | 1100 | 1101 | Object.defineProperty(exports, "__esModule", { 1102 | value: true 1103 | }); 1104 | exports.findGameObject = exports.Touch = exports.keyCode = exports.Input = exports.components = exports.Component = exports.types = exports.Camera = exports.Scene = exports.Canvas = exports.GameObject = undefined; 1105 | 1106 | var _Input2 = __webpack_require__(11); 1107 | 1108 | Object.defineProperty(exports, 'keyCode', { 1109 | enumerable: true, 1110 | get: function get() { 1111 | return _Input2.keyCode; 1112 | } 1113 | }); 1114 | 1115 | var _store = __webpack_require__(2); 1116 | 1117 | Object.defineProperty(exports, 'findGameObject', { 1118 | enumerable: true, 1119 | get: function get() { 1120 | return _store.findGameObject; 1121 | } 1122 | }); 1123 | 1124 | var _GameObject2 = __webpack_require__(3); 1125 | 1126 | var _GameObject3 = _interopRequireDefault(_GameObject2); 1127 | 1128 | var _Canvas2 = __webpack_require__(18); 1129 | 1130 | var _Canvas3 = _interopRequireDefault(_Canvas2); 1131 | 1132 | var _Scene2 = __webpack_require__(19); 1133 | 1134 | var _Scene3 = _interopRequireDefault(_Scene2); 1135 | 1136 | var _Camera2 = __webpack_require__(8); 1137 | 1138 | var _Camera3 = _interopRequireDefault(_Camera2); 1139 | 1140 | var _types2 = __webpack_require__(0); 1141 | 1142 | var _types3 = _interopRequireDefault(_types2); 1143 | 1144 | var _Component2 = __webpack_require__(1); 1145 | 1146 | var _Component3 = _interopRequireDefault(_Component2); 1147 | 1148 | var _components2 = __webpack_require__(4); 1149 | 1150 | var _components3 = _interopRequireDefault(_components2); 1151 | 1152 | var _Input3 = _interopRequireDefault(_Input2); 1153 | 1154 | var _Touch2 = __webpack_require__(21); 1155 | 1156 | var _Touch3 = _interopRequireDefault(_Touch2); 1157 | 1158 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 1159 | 1160 | exports.GameObject = _GameObject3.default; 1161 | exports.Canvas = _Canvas3.default; 1162 | exports.Scene = _Scene3.default; 1163 | exports.Camera = _Camera3.default; 1164 | exports.types = _types3.default; 1165 | exports.Component = _Component3.default; 1166 | exports.components = _components3.default; 1167 | // export input, {keyCode} from './base/Input'; 1168 | 1169 | exports.Input = _Input3.default; 1170 | exports.Touch = _Touch3.default; 1171 | 1172 | /***/ }), 1173 | /* 11 */ 1174 | /***/ (function(module, exports, __webpack_require__) { 1175 | 1176 | "use strict"; 1177 | 1178 | 1179 | Object.defineProperty(exports, "__esModule", { 1180 | value: true 1181 | }); 1182 | exports.keyCode = undefined; 1183 | 1184 | var _GameObject2 = __webpack_require__(3); 1185 | 1186 | var _GameObject3 = _interopRequireDefault(_GameObject2); 1187 | 1188 | var _Input = __webpack_require__(5); 1189 | 1190 | var _Input2 = _interopRequireDefault(_Input); 1191 | 1192 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 1193 | 1194 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 1195 | 1196 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 1197 | 1198 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 1199 | 1200 | var InputObject = function (_GameObject) { 1201 | _inherits(InputObject, _GameObject); 1202 | 1203 | function InputObject(_ref) { 1204 | var canvas = _ref.canvas; 1205 | 1206 | _classCallCheck(this, InputObject); 1207 | 1208 | return _possibleConstructorReturn(this, (InputObject.__proto__ || Object.getPrototypeOf(InputObject)).call(this, { 1209 | name: 'input', 1210 | components: [{ 1211 | component: _Input2.default, 1212 | arguments: { canvas: canvas } 1213 | }] 1214 | })); 1215 | } 1216 | 1217 | return InputObject; 1218 | }(_GameObject3.default); 1219 | 1220 | exports.default = InputObject; 1221 | 1222 | 1223 | var keyCode = { 1224 | BackSpace: 8, 1225 | Tab: 9, 1226 | Clear: 12, 1227 | Enter: 13, 1228 | Shift_L: 16, 1229 | Control_L: 17, 1230 | Alt_L: 18, 1231 | Pause: 19, 1232 | Caps_Lock: 20, 1233 | Escape: 27, 1234 | Space: 32, 1235 | Prior: 33, 1236 | Next: 34, 1237 | End: 35, 1238 | Home: 36, 1239 | Left: 37, 1240 | Up: 38, 1241 | Right: 39, 1242 | Down: 40, 1243 | Select: 41, 1244 | Print: 42, 1245 | Execute: 43, 1246 | Insert: 45, 1247 | Delete: 46, 1248 | Help: 47, 1249 | Alpha_0: 48, 1250 | Alpha_1: 49, 1251 | Alpha_2: 50, 1252 | Alpha_3: 51, 1253 | Alpha_4: 52, 1254 | Alpha_5: 53, 1255 | Alpha_6: 54, 1256 | Alpha_7: 55, 1257 | Alpha_8: 56, 1258 | Alpha_9: 57, 1259 | A: 65, 1260 | B: 66, 1261 | C: 67, 1262 | D: 68, 1263 | E: 69, 1264 | F: 70, 1265 | G: 71, 1266 | H: 72, 1267 | I: 73, 1268 | J: 74, 1269 | K: 75, 1270 | L: 76, 1271 | M: 77, 1272 | N: 78, 1273 | O: 79, 1274 | P: 80, 1275 | Q: 81, 1276 | R: 82, 1277 | S: 83, 1278 | T: 84, 1279 | U: 85, 1280 | V: 86, 1281 | W: 87, 1282 | X: 88, 1283 | Y: 89, 1284 | Z: 90, 1285 | KP_0: 96, 1286 | KP_1: 97, 1287 | KP_2: 98, 1288 | KP_3: 99, 1289 | KP_4: 100, 1290 | KP_5: 101, 1291 | KP_6: 102, 1292 | KP_7: 103, 1293 | KP_8: 104, 1294 | KP_9: 105, 1295 | KP_Multiply: 106, 1296 | KP_Add: 107, 1297 | KP_Separator: 108, 1298 | KP_Subtract: 109, 1299 | KP_Decimal: 110, 1300 | KP_Divide: 111, 1301 | F1: 112, 1302 | F2: 113, 1303 | F3: 114, 1304 | F4: 115, 1305 | F5: 116, 1306 | F6: 117, 1307 | F7: 118, 1308 | F8: 119, 1309 | F9: 120, 1310 | F10: 121, 1311 | F11: 122, 1312 | F12: 123, 1313 | F13: 124, 1314 | F14: 125, 1315 | F15: 126, 1316 | F16: 127, 1317 | F17: 128, 1318 | F18: 129, 1319 | F19: 130, 1320 | F20: 131, 1321 | F21: 132, 1322 | F22: 133, 1323 | F23: 134, 1324 | F24: 135, 1325 | Num_Lock: 136, 1326 | Scroll_Lock: 137 1327 | }; 1328 | 1329 | exports.keyCode = keyCode; 1330 | 1331 | /***/ }), 1332 | /* 12 */ 1333 | /***/ (function(module, exports, __webpack_require__) { 1334 | 1335 | "use strict"; 1336 | 1337 | 1338 | Object.defineProperty(exports, "__esModule", { 1339 | value: true 1340 | }); 1341 | 1342 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 1343 | 1344 | var _types = __webpack_require__(0); 1345 | 1346 | var _Component2 = __webpack_require__(1); 1347 | 1348 | var _Component3 = _interopRequireDefault(_Component2); 1349 | 1350 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 1351 | 1352 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 1353 | 1354 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 1355 | 1356 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 1357 | 1358 | var Img = function (_Component) { 1359 | _inherits(Img, _Component); 1360 | 1361 | function Img(_ref) { 1362 | var targetObject = _ref.targetObject, 1363 | _ref$rect = _ref.rect, 1364 | rect = _ref$rect === undefined ? new _types.Rect() : _ref$rect, 1365 | _ref$url = _ref.url, 1366 | url = _ref$url === undefined ? '' : _ref$url, 1367 | _ref$rotation = _ref.rotation, 1368 | rotation = _ref$rotation === undefined ? 0 : _ref$rotation; 1369 | 1370 | _classCallCheck(this, Img); 1371 | 1372 | var _this = _possibleConstructorReturn(this, (Img.__proto__ || Object.getPrototypeOf(Img)).call(this, { 1373 | targetObject: targetObject 1374 | })); 1375 | 1376 | var rect; 1377 | var image; 1378 | Object.defineProperties(_this, { 1379 | rect: { 1380 | set: function set(value) { 1381 | rect = value; 1382 | this.image.rect = rect; 1383 | }, 1384 | get: function get() { 1385 | return rect; 1386 | } 1387 | }, 1388 | image: { 1389 | set: function set(value) { 1390 | image = value; 1391 | }, 1392 | get: function get() { 1393 | return image; 1394 | } 1395 | } 1396 | }); 1397 | _this.setUrl({ url: url }); 1398 | _this.rect = rect; 1399 | return _this; 1400 | } 1401 | 1402 | _createClass(Img, [{ 1403 | key: 'setUrl', 1404 | value: function setUrl(_ref2) { 1405 | var url = _ref2.url; 1406 | 1407 | this.url = url; 1408 | this.image = new Image(); 1409 | this.image.src = url; 1410 | } 1411 | }, { 1412 | key: 'update', 1413 | value: function update() { 1414 | this.targetObject.renderer.pushImages({ 1415 | image: this.image, 1416 | rect: this.rect 1417 | }); 1418 | } 1419 | }]); 1420 | 1421 | return Img; 1422 | }(_Component3.default); 1423 | 1424 | exports.default = Img; 1425 | 1426 | /***/ }), 1427 | /* 13 */ 1428 | /***/ (function(module, exports, __webpack_require__) { 1429 | 1430 | "use strict"; 1431 | 1432 | 1433 | Object.defineProperty(exports, "__esModule", { 1434 | value: true 1435 | }); 1436 | 1437 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 1438 | 1439 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 1440 | 1441 | var Vector2 = function () { 1442 | function Vector2() { 1443 | var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { x: 0, y: 0 }, 1444 | _ref$x = _ref.x, 1445 | x = _ref$x === undefined ? 0 : _ref$x, 1446 | _ref$y = _ref.y, 1447 | y = _ref$y === undefined ? 0 : _ref$y; 1448 | 1449 | _classCallCheck(this, Vector2); 1450 | 1451 | this.x = x; 1452 | this.y = y; 1453 | } 1454 | 1455 | _createClass(Vector2, null, [{ 1456 | key: "minus", 1457 | value: function minus() { 1458 | for (var _len = arguments.length, objs = Array(_len), _key = 0; _key < _len; _key++) { 1459 | objs[_key] = arguments[_key]; 1460 | } 1461 | 1462 | return objs.reduce(function (prev, curr) { 1463 | return new Vector2({ 1464 | x: prev.x - curr.x, 1465 | y: prev.y - curr.y 1466 | }); 1467 | }); 1468 | } 1469 | }, { 1470 | key: "add", 1471 | value: function add() { 1472 | for (var _len2 = arguments.length, objs = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { 1473 | objs[_key2] = arguments[_key2]; 1474 | } 1475 | 1476 | return objs.reduce(function (prev, curr) { 1477 | return new Vector2({ 1478 | x: prev.x + curr.x, 1479 | y: prev.y + curr.y 1480 | }); 1481 | }, new Vector2({ x: 0, y: 0 })); 1482 | } 1483 | }]); 1484 | 1485 | return Vector2; 1486 | }(); 1487 | 1488 | exports.default = Vector2; 1489 | 1490 | /***/ }), 1491 | /* 14 */ 1492 | /***/ (function(module, exports, __webpack_require__) { 1493 | 1494 | "use strict"; 1495 | 1496 | 1497 | Object.defineProperty(exports, "__esModule", { 1498 | value: true 1499 | }); 1500 | 1501 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 1502 | 1503 | var Rect = function Rect() { 1504 | var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { x: 0, y: 0, width: 0, height: 0 }, 1505 | _ref$x = _ref.x, 1506 | x = _ref$x === undefined ? 0 : _ref$x, 1507 | _ref$y = _ref.y, 1508 | y = _ref$y === undefined ? 0 : _ref$y, 1509 | _ref$width = _ref.width, 1510 | width = _ref$width === undefined ? 0 : _ref$width, 1511 | _ref$height = _ref.height, 1512 | height = _ref$height === undefined ? 0 : _ref$height; 1513 | 1514 | _classCallCheck(this, Rect); 1515 | 1516 | this.x = x; 1517 | this.y = y; 1518 | this.width = width; 1519 | this.height = height; 1520 | }; 1521 | 1522 | exports.default = Rect; 1523 | 1524 | /***/ }), 1525 | /* 15 */ 1526 | /***/ (function(module, exports, __webpack_require__) { 1527 | 1528 | "use strict"; 1529 | 1530 | 1531 | Object.defineProperty(exports, "__esModule", { 1532 | value: true 1533 | }); 1534 | 1535 | var _types = __webpack_require__(0); 1536 | 1537 | var _Component2 = __webpack_require__(1); 1538 | 1539 | var _Component3 = _interopRequireDefault(_Component2); 1540 | 1541 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 1542 | 1543 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 1544 | 1545 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 1546 | 1547 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 1548 | 1549 | var Transform = function (_Component) { 1550 | _inherits(Transform, _Component); 1551 | 1552 | function Transform(_ref) { 1553 | var targetObject = _ref.targetObject, 1554 | _ref$rect = _ref.rect, 1555 | rect = _ref$rect === undefined ? new _types.Rect() : _ref$rect, 1556 | _ref$position = _ref.position, 1557 | position = _ref$position === undefined ? new _types.Vector2() : _ref$position, 1558 | _ref$anchor = _ref.anchor, 1559 | anchor = _ref$anchor === undefined ? new _types.Vector2({ x: rect.width / 2, y: rect.height / 2 }) : _ref$anchor, 1560 | _ref$rotation = _ref.rotation, 1561 | rotation = _ref$rotation === undefined ? 0 : _ref$rotation; 1562 | 1563 | _classCallCheck(this, Transform); 1564 | 1565 | var _this = _possibleConstructorReturn(this, (Transform.__proto__ || Object.getPrototypeOf(Transform)).call(this, { 1566 | targetObject: targetObject 1567 | })); 1568 | 1569 | _this.rect = rect; 1570 | _this.position = position; 1571 | _this.anchor = anchor; 1572 | _this.rotation = rotation; 1573 | return _this; 1574 | } 1575 | 1576 | return Transform; 1577 | }(_Component3.default); 1578 | 1579 | exports.default = Transform; 1580 | 1581 | /***/ }), 1582 | /* 16 */ 1583 | /***/ (function(module, exports, __webpack_require__) { 1584 | 1585 | "use strict"; 1586 | 1587 | 1588 | Object.defineProperty(exports, "__esModule", { 1589 | value: true 1590 | }); 1591 | 1592 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 1593 | 1594 | var _types = __webpack_require__(0); 1595 | 1596 | var _Component2 = __webpack_require__(1); 1597 | 1598 | var _Component3 = _interopRequireDefault(_Component2); 1599 | 1600 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 1601 | 1602 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 1603 | 1604 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 1605 | 1606 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 1607 | 1608 | var Renderer = function (_Component) { 1609 | _inherits(Renderer, _Component); 1610 | 1611 | function Renderer(_ref) { 1612 | var targetObject = _ref.targetObject; 1613 | 1614 | _classCallCheck(this, Renderer); 1615 | 1616 | var _this = _possibleConstructorReturn(this, (Renderer.__proto__ || Object.getPrototypeOf(Renderer)).call(this, { 1617 | targetObject: targetObject 1618 | })); 1619 | 1620 | _this.images = []; 1621 | return _this; 1622 | } 1623 | 1624 | _createClass(Renderer, [{ 1625 | key: 'pushImages', 1626 | value: function pushImages() { 1627 | for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { 1628 | args[_key] = arguments[_key]; 1629 | } 1630 | 1631 | var _iteratorNormalCompletion = true; 1632 | var _didIteratorError = false; 1633 | var _iteratorError = undefined; 1634 | 1635 | try { 1636 | for (var _iterator = args[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { 1637 | var img = _step.value; 1638 | 1639 | img.crossOrigin = 'anonymous'; 1640 | this.images.push(img); 1641 | } 1642 | } catch (err) { 1643 | _didIteratorError = true; 1644 | _iteratorError = err; 1645 | } finally { 1646 | try { 1647 | if (!_iteratorNormalCompletion && _iterator.return) { 1648 | _iterator.return(); 1649 | } 1650 | } finally { 1651 | if (_didIteratorError) { 1652 | throw _iteratorError; 1653 | } 1654 | } 1655 | } 1656 | } 1657 | }]); 1658 | 1659 | return Renderer; 1660 | }(_Component3.default); 1661 | 1662 | exports.default = Renderer; 1663 | 1664 | /***/ }), 1665 | /* 17 */ 1666 | /***/ (function(module, exports, __webpack_require__) { 1667 | 1668 | "use strict"; 1669 | 1670 | 1671 | Object.defineProperty(exports, "__esModule", { 1672 | value: true 1673 | }); 1674 | 1675 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 1676 | 1677 | var _types = __webpack_require__(0); 1678 | 1679 | var _Component2 = __webpack_require__(1); 1680 | 1681 | var _Component3 = _interopRequireDefault(_Component2); 1682 | 1683 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 1684 | 1685 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 1686 | 1687 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 1688 | 1689 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 1690 | 1691 | var Text = function (_Component) { 1692 | _inherits(Text, _Component); 1693 | 1694 | function Text(_ref) { 1695 | var targetObject = _ref.targetObject, 1696 | _ref$text = _ref.text, 1697 | text = _ref$text === undefined ? 'text' : _ref$text, 1698 | _ref$font = _ref.font, 1699 | font = _ref$font === undefined ? '12px sans-serif' : _ref$font, 1700 | _ref$color = _ref.color, 1701 | color = _ref$color === undefined ? '#000' : _ref$color, 1702 | _ref$textAlign = _ref.textAlign, 1703 | textAlign = _ref$textAlign === undefined ? 'start' : _ref$textAlign, 1704 | _ref$textBaseline = _ref.textBaseline, 1705 | textBaseline = _ref$textBaseline === undefined ? 'hanging' : _ref$textBaseline, 1706 | _ref$position = _ref.position, 1707 | position = _ref$position === undefined ? new _types.Vector2() : _ref$position, 1708 | _ref$rect = _ref.rect, 1709 | rect = _ref$rect === undefined ? targetObject.transform.rect : _ref$rect; 1710 | 1711 | _classCallCheck(this, Text); 1712 | 1713 | var _this = _possibleConstructorReturn(this, (Text.__proto__ || Object.getPrototypeOf(Text)).call(this, { 1714 | targetObject: targetObject 1715 | })); 1716 | 1717 | var store = { 1718 | color: color, 1719 | font: font, 1720 | text: text, 1721 | textAlign: textAlign, 1722 | textBaseline: textBaseline, 1723 | position: position, 1724 | rect: rect 1725 | }; 1726 | 1727 | _this.needRender = false; 1728 | 1729 | var _loop = function _loop(name) { 1730 | Object.defineProperty(_this, name, { 1731 | get: function get() { 1732 | return store[name]; 1733 | }, 1734 | set: function set(value) { 1735 | store[name] = value; 1736 | this.needRender = true; 1737 | } 1738 | }); 1739 | }; 1740 | 1741 | for (var name in store) { 1742 | _loop(name); 1743 | } 1744 | 1745 | _this.canvas = document.createElement('canvas'); 1746 | _this.ctx = _this.canvas.getContext('2d'); 1747 | _this.updateText(); 1748 | return _this; 1749 | } 1750 | 1751 | _createClass(Text, [{ 1752 | key: 'update', 1753 | value: function update() { 1754 | if (this.needRender) { 1755 | this.updateText(); 1756 | } else { 1757 | this.targetObject.renderer.pushImages(this.renderImg); 1758 | } 1759 | } 1760 | }, { 1761 | key: 'updateText', 1762 | value: function updateText() { 1763 | this.canvas.width = this.rect.width; 1764 | this.canvas.height = this.rect.height; 1765 | this.ctx.fillStyle = this.color; 1766 | this.ctx.font = this.font; 1767 | this.ctx.textAlign = this.textAlign; 1768 | this.ctx.textBaseline = this.textBaseline; 1769 | this.ctx.fillText(this.text, this.position.x, this.position.y); 1770 | var base64 = this.canvas.toDataURL('image/png'); 1771 | var img = new Image(); 1772 | img.src = base64; 1773 | this.renderImg = { 1774 | image: img, 1775 | rect: new _types.Rect({ x: 0, y: 0, width: this.canvas.width, height: this.canvas.height }) 1776 | }; 1777 | this.targetObject.renderer.pushImages(this.renderImg); 1778 | this.needRender = false; 1779 | } 1780 | }]); 1781 | 1782 | return Text; 1783 | }(_Component3.default); 1784 | 1785 | exports.default = Text; 1786 | 1787 | /***/ }), 1788 | /* 18 */ 1789 | /***/ (function(module, exports, __webpack_require__) { 1790 | 1791 | "use strict"; 1792 | 1793 | 1794 | Object.defineProperty(exports, "__esModule", { 1795 | value: true 1796 | }); 1797 | 1798 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 1799 | 1800 | var _types = __webpack_require__(0); 1801 | 1802 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 1803 | 1804 | var Canvas = function () { 1805 | function Canvas(_ref) { 1806 | var _this = this; 1807 | 1808 | var canvas = _ref.canvas, 1809 | width = _ref.width, 1810 | height = _ref.height, 1811 | _ref$camera = _ref.camera, 1812 | camera = _ref$camera === undefined ? undefined : _ref$camera; 1813 | 1814 | _classCallCheck(this, Canvas); 1815 | 1816 | this.canvas = canvas; 1817 | this.width = width; 1818 | this.height = height; 1819 | this.context = canvas.getContext('2d'); 1820 | this.camera = camera; 1821 | this.framer = requestAnimationFrame(function () { 1822 | return _this.render(); 1823 | }); 1824 | } 1825 | 1826 | _createClass(Canvas, [{ 1827 | key: 'render', 1828 | value: function render() { 1829 | var _this2 = this; 1830 | 1831 | this.clearContext(); 1832 | var gameObjects = this.camera.getVisibleGameObjects(); 1833 | var _iteratorNormalCompletion = true; 1834 | var _didIteratorError = false; 1835 | var _iteratorError = undefined; 1836 | 1837 | try { 1838 | for (var _iterator = gameObjects[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { 1839 | var gameObject = _step.value; 1840 | 1841 | this.drawImg(gameObject); 1842 | } 1843 | } catch (err) { 1844 | _didIteratorError = true; 1845 | _iteratorError = err; 1846 | } finally { 1847 | try { 1848 | if (!_iteratorNormalCompletion && _iterator.return) { 1849 | _iterator.return(); 1850 | } 1851 | } finally { 1852 | if (_didIteratorError) { 1853 | throw _iteratorError; 1854 | } 1855 | } 1856 | } 1857 | 1858 | this.framer = requestAnimationFrame(function () { 1859 | return _this2.render(); 1860 | }); 1861 | } 1862 | }, { 1863 | key: 'clearContext', 1864 | value: function clearContext() { 1865 | this.context.clearRect(0, 0, this.width, this.height); 1866 | } 1867 | }, { 1868 | key: 'drawImg', 1869 | value: function drawImg(gameObject) { 1870 | var _iteratorNormalCompletion2 = true; 1871 | var _didIteratorError2 = false; 1872 | var _iteratorError2 = undefined; 1873 | 1874 | try { 1875 | for (var _iterator2 = gameObject.renderer.images[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) { 1876 | var img = _step2.value; 1877 | 1878 | var x1y1 = _types.Vector2.minus(gameObject.transform.position, gameObject.transform.anchor); 1879 | var x2y2 = _types.Vector2.add(x1y1, new _types.Vector2({ x: img.rect.x, y: img.rect.y })); 1880 | this.context.save(); 1881 | this.context.translate(gameObject.transform.position.x, gameObject.transform.position.y); 1882 | this.context.rotate(gameObject.transform.rotation * Math.PI / 180); 1883 | this.context.drawImage(img.image, -gameObject.transform.anchor.x, -gameObject.transform.anchor.y, img.rect.width, img.rect.height); 1884 | this.context.restore(); 1885 | } 1886 | } catch (err) { 1887 | _didIteratorError2 = true; 1888 | _iteratorError2 = err; 1889 | } finally { 1890 | try { 1891 | if (!_iteratorNormalCompletion2 && _iterator2.return) { 1892 | _iterator2.return(); 1893 | } 1894 | } finally { 1895 | if (_didIteratorError2) { 1896 | throw _iteratorError2; 1897 | } 1898 | } 1899 | } 1900 | } 1901 | }, { 1902 | key: 'setCamera', 1903 | value: function setCamera(camera) { 1904 | this.camera = camera; 1905 | } 1906 | }]); 1907 | 1908 | return Canvas; 1909 | }(); 1910 | 1911 | exports.default = Canvas; 1912 | 1913 | /***/ }), 1914 | /* 19 */ 1915 | /***/ (function(module, exports, __webpack_require__) { 1916 | 1917 | "use strict"; 1918 | 1919 | 1920 | Object.defineProperty(exports, "__esModule", { 1921 | value: true 1922 | }); 1923 | 1924 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 1925 | 1926 | var _Camera = __webpack_require__(8); 1927 | 1928 | var _Camera2 = _interopRequireDefault(_Camera); 1929 | 1930 | var _store = __webpack_require__(2); 1931 | 1932 | var _store2 = _interopRequireDefault(_store); 1933 | 1934 | var _Frame = __webpack_require__(20); 1935 | 1936 | var _Frame2 = _interopRequireDefault(_Frame); 1937 | 1938 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 1939 | 1940 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 1941 | 1942 | var Scene = function () { 1943 | function Scene(_ref) { 1944 | var width = _ref.width, 1945 | height = _ref.height; 1946 | 1947 | _classCallCheck(this, Scene); 1948 | 1949 | this.width = width; 1950 | this.height = height; 1951 | this.camera = []; 1952 | this.gameObjects = []; 1953 | this.frame = new _Frame2.default({ scene: this }); 1954 | this.gameObjectStore = (0, _store2.default)(this)('gameObject'); 1955 | } 1956 | 1957 | _createClass(Scene, [{ 1958 | key: 'addGameObjects', 1959 | value: function addGameObjects() { 1960 | for (var _len = arguments.length, gameObjects = Array(_len), _key = 0; _key < _len; _key++) { 1961 | gameObjects[_key] = arguments[_key]; 1962 | } 1963 | 1964 | var _iteratorNormalCompletion = true; 1965 | var _didIteratorError = false; 1966 | var _iteratorError = undefined; 1967 | 1968 | try { 1969 | for (var _iterator = gameObjects[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { 1970 | var gameObject = _step.value; 1971 | 1972 | gameObject instanceof _Camera2.default && this.camera.push(gameObject); 1973 | gameObject.setScene({ scene: this }); 1974 | this.gameObjects.push(gameObject); 1975 | this.gameObjectStore.push(gameObject); 1976 | } 1977 | } catch (err) { 1978 | _didIteratorError = true; 1979 | _iteratorError = err; 1980 | } finally { 1981 | try { 1982 | if (!_iteratorNormalCompletion && _iterator.return) { 1983 | _iterator.return(); 1984 | } 1985 | } finally { 1986 | if (_didIteratorError) { 1987 | throw _iteratorError; 1988 | } 1989 | } 1990 | } 1991 | } 1992 | }]); 1993 | 1994 | return Scene; 1995 | }(); 1996 | 1997 | exports.default = Scene; 1998 | 1999 | /***/ }), 2000 | /* 20 */ 2001 | /***/ (function(module, exports, __webpack_require__) { 2002 | 2003 | "use strict"; 2004 | 2005 | 2006 | Object.defineProperty(exports, "__esModule", { 2007 | value: true 2008 | }); 2009 | 2010 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 2011 | 2012 | var _store = __webpack_require__(2); 2013 | 2014 | var _store2 = _interopRequireDefault(_store); 2015 | 2016 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 2017 | 2018 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 2019 | 2020 | var Frame = function () { 2021 | function Frame(_ref) { 2022 | var _this = this; 2023 | 2024 | var scene = _ref.scene; 2025 | 2026 | _classCallCheck(this, Frame); 2027 | 2028 | this.scene = scene; 2029 | this.componentStore = (0, _store2.default)(scene)('component'); 2030 | this.gameObjectStore = (0, _store2.default)(scene)('gameObject'); 2031 | this.sceneStartTime = performance.now(); 2032 | this.lastFrameTime = performance.now(); 2033 | this.frameCount = 0; 2034 | requestAnimationFrame(function () { 2035 | return _this.frame(); 2036 | }); 2037 | } 2038 | 2039 | _createClass(Frame, [{ 2040 | key: 'frame', 2041 | value: function frame() { 2042 | var _this2 = this; 2043 | 2044 | var components = this.componentStore.getAll(); 2045 | var gameObjects = this.gameObjectStore.getAll(); 2046 | var currentTime = performance.now(); 2047 | var e = { 2048 | deltaTime: (currentTime - this.lastFrameTime) / 1000, 2049 | frameCount: this.frameCount, 2050 | time: (currentTime - this.sceneStartTime) / 1000 2051 | }; 2052 | 2053 | this.lastFrameTime = performance.now(); 2054 | this.frameCount++; 2055 | 2056 | var _iteratorNormalCompletion = true; 2057 | var _didIteratorError = false; 2058 | var _iteratorError = undefined; 2059 | 2060 | try { 2061 | for (var _iterator = gameObjects[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { 2062 | var gameObject = _step.value; 2063 | 2064 | gameObject.renderer.images = []; 2065 | } 2066 | } catch (err) { 2067 | _didIteratorError = true; 2068 | _iteratorError = err; 2069 | } finally { 2070 | try { 2071 | if (!_iteratorNormalCompletion && _iterator.return) { 2072 | _iterator.return(); 2073 | } 2074 | } finally { 2075 | if (_didIteratorError) { 2076 | throw _iteratorError; 2077 | } 2078 | } 2079 | } 2080 | 2081 | var _iteratorNormalCompletion2 = true; 2082 | var _didIteratorError2 = false; 2083 | var _iteratorError2 = undefined; 2084 | 2085 | try { 2086 | for (var _iterator2 = components[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) { 2087 | var component = _step2.value; 2088 | 2089 | if (component.targetObject && component.active == true) { 2090 | component.preUpdate && component.preUpdate(e); 2091 | } 2092 | } 2093 | } catch (err) { 2094 | _didIteratorError2 = true; 2095 | _iteratorError2 = err; 2096 | } finally { 2097 | try { 2098 | if (!_iteratorNormalCompletion2 && _iterator2.return) { 2099 | _iterator2.return(); 2100 | } 2101 | } finally { 2102 | if (_didIteratorError2) { 2103 | throw _iteratorError2; 2104 | } 2105 | } 2106 | } 2107 | 2108 | var _iteratorNormalCompletion3 = true; 2109 | var _didIteratorError3 = false; 2110 | var _iteratorError3 = undefined; 2111 | 2112 | try { 2113 | for (var _iterator3 = components[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) { 2114 | var _component = _step3.value; 2115 | 2116 | if (_component.targetObject && _component.active == true) { 2117 | _component.update && _component.update(e); 2118 | } 2119 | } 2120 | } catch (err) { 2121 | _didIteratorError3 = true; 2122 | _iteratorError3 = err; 2123 | } finally { 2124 | try { 2125 | if (!_iteratorNormalCompletion3 && _iterator3.return) { 2126 | _iterator3.return(); 2127 | } 2128 | } finally { 2129 | if (_didIteratorError3) { 2130 | throw _iteratorError3; 2131 | } 2132 | } 2133 | } 2134 | 2135 | var _iteratorNormalCompletion4 = true; 2136 | var _didIteratorError4 = false; 2137 | var _iteratorError4 = undefined; 2138 | 2139 | try { 2140 | for (var _iterator4 = components[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) { 2141 | var _component2 = _step4.value; 2142 | 2143 | if (_component2.targetObject && _component2.active == true) { 2144 | _component2.lateUpdate && _component2.lateUpdate(e); 2145 | } 2146 | } 2147 | } catch (err) { 2148 | _didIteratorError4 = true; 2149 | _iteratorError4 = err; 2150 | } finally { 2151 | try { 2152 | if (!_iteratorNormalCompletion4 && _iterator4.return) { 2153 | _iterator4.return(); 2154 | } 2155 | } finally { 2156 | if (_didIteratorError4) { 2157 | throw _iteratorError4; 2158 | } 2159 | } 2160 | } 2161 | 2162 | requestAnimationFrame(function () { 2163 | return _this2.frame(); 2164 | }); 2165 | } 2166 | }]); 2167 | 2168 | return Frame; 2169 | }(); 2170 | 2171 | exports.default = Frame; 2172 | 2173 | /***/ }), 2174 | /* 21 */ 2175 | /***/ (function(module, exports, __webpack_require__) { 2176 | 2177 | "use strict"; 2178 | 2179 | 2180 | Object.defineProperty(exports, "__esModule", { 2181 | value: true 2182 | }); 2183 | 2184 | var _GameObject2 = __webpack_require__(3); 2185 | 2186 | var _GameObject3 = _interopRequireDefault(_GameObject2); 2187 | 2188 | var _Touch = __webpack_require__(6); 2189 | 2190 | var _Touch2 = _interopRequireDefault(_Touch); 2191 | 2192 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 2193 | 2194 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 2195 | 2196 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 2197 | 2198 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 2199 | 2200 | var TouchObject = function (_GameObject) { 2201 | _inherits(TouchObject, _GameObject); 2202 | 2203 | function TouchObject(_ref) { 2204 | var canvas = _ref.canvas; 2205 | 2206 | _classCallCheck(this, TouchObject); 2207 | 2208 | return _possibleConstructorReturn(this, (TouchObject.__proto__ || Object.getPrototypeOf(TouchObject)).call(this, { 2209 | name: 'touch', 2210 | components: [{ 2211 | component: _Touch2.default, 2212 | arguments: { canvas: canvas } 2213 | }] 2214 | })); 2215 | } 2216 | 2217 | return TouchObject; 2218 | }(_GameObject3.default); 2219 | 2220 | exports.default = TouchObject; 2221 | 2222 | /***/ }) 2223 | /******/ ]); -------------------------------------------------------------------------------- /example/text/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Text 7 | 8 | 9 | 10 | 11 |

Freshing can change view~
每次刷新看到的不一样哦

12 | 13 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /example/text/index.js: -------------------------------------------------------------------------------- 1 | import { GameObject, Camera, Canvas, Scene, types, components } from '../../src/Engine.js'; 2 | const { Text } = components; 3 | const { Vector2, Rect} = types; 4 | 5 | 6 | const canvas = document.getElementById("canvas"); 7 | 8 | // 创建一个场景 9 | // Create a scene 10 | const scene = new Scene({ width: 400, height: 800 }); 11 | 12 | // 创建一个 相机 13 | // Create a camera 14 | const camera = new Camera({ 15 | name: "camera", 16 | transform: { 17 | rect: new Rect({ x: 0, y: 0, width: 400, height: 800 }), 18 | position: new Vector2({ x: 200, y: 400 }), 19 | // anchor: new Vector2({ x: 400, y: 200 }) // !!! default is the middle of rect, 默认锚点在相机的中心点 20 | }, 21 | scene // need a scene to show, 需要一个场景，相机将会显示这个场景的内容 22 | }); 23 | 24 | // 创建将相机设置给 canvas, canvas将显示这个相机的内容 25 | // Create canvas and set camera to the canvas, canvas will display the camera view. 26 | const canvasObj = new Canvas({ canvas: canvas, width: 400, height: 800, camera }); 27 | 28 | // 创建游戏对象 29 | // create the game object 30 | const getRandom = (min = 0,max = 10) => Math.floor(min + Math.random() * (max - min + 1)); 31 | const texts = ['工作使我快乐','我热爱工作','你看他是不是傻','快和牛魔王一起出来看上帝','b(￣▽￣)d','快来用这个游戏引擎','这个没有物理引擎？','好厉害！', '这是个无聊的DEMO']; 32 | let objects = texts.map(text=>{ 33 | return new GameObject({ 34 | name: "text", 35 | transform: { 36 | rect: new Rect({ x: 0, y: 0, width: 400, height: 800 }), 37 | anchor: new Rect({x:0, y: 0}) 38 | }, 39 | components: [ 40 | { 41 | component: Text, 42 | arguments: { 43 | text: text, 44 | font: getRandom(0,30)+'px sans-serif', 45 | color: `rgb(${getRandom(0,255)},${getRandom(0,255)},${getRandom(0,255)})`, 46 | // color: 'red', 47 | position: new Vector2({x: getRandom(0, 200), y: getRandom(0, 750)}) 48 | } 49 | } 50 | ] 51 | }) 52 | }); 53 | 54 | 55 | 56 | 57 | scene.addGameObjects(...objects); 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /example/touch/TouchManager.js: -------------------------------------------------------------------------------- 1 | import { GameObject, Component, keyCode, Input, types, findGameObject } from '../../src/Engine.js'; 2 | 3 | // 取出自己想要的类 4 | // fetch needing class. 5 | // const { Component, types: { Vector2 } } = Engine; 6 | const { Vector2 } = types; 7 | 8 | // 继承 Component 并且 export 9 | // extend Component and export it 10 | export default class TouchManager extends Component { 11 | constructor({ targetObject, dir, speed }) { 12 | super({ 13 | targetObject 14 | }); 15 | this.rotate = false; 16 | } 17 | preUpdate() { 18 | this.touch = findGameObject({name: 'touch'}).touch; 19 | if (this.touch.getTouchStart(this.targetObject)) { 20 | this.rotate = true; 21 | } 22 | if (this.touch.getTouchEnd(this.targetObject)) { 23 | this.rotate = false; 24 | } 25 | } 26 | update(){ 27 | if (this.rotate) { 28 | this.targetObject.transform.rotation = this.targetObject.transform.rotation += 10; 29 | } 30 | } 31 | } -------------------------------------------------------------------------------- /example/touch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Input 7 | 8 | 9 | 10 | 11 | touch事件，请用手机模式浏览。touch event please use mobile model 12 |
13 | 14 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /example/touch/index.js: -------------------------------------------------------------------------------- 1 | import { GameObject, Camera, Canvas, Scene, types, components, Touch } from '../../src/Engine.js'; 2 | import TouchManager from './TouchManager.js'; 3 | 4 | const { Img } = components; 5 | const { Vector2, Rect} = types; 6 | 7 | 8 | const canvas = document.getElementById("canvas"); 9 | 10 | // 创建一个场景 11 | // Create a scene 12 | const scene = new Scene({ width: 400, height: 800 }); 13 | 14 | // 创建一个 相机 15 | // Create a camera 16 | const camera = new Camera({ 17 | name: "camera", 18 | transform: { 19 | rect: new Rect({ x: 0, y: 0, width: 400, height: 800 }), 20 | position: new Vector2({ x: 200, y: 400 }), 21 | // anchor: new Vector2({ x: 400, y: 200 }) // !!! default is the middle of rect, 默认锚点在相机的中心点 22 | }, 23 | scene // need a scene to show, 需要一个场景，相机将会显示这个场景的内容 24 | }); 25 | 26 | // 创建将相机设置给 canvas, canvas将显示这个相机的内容 27 | // Create canvas and set camera to the canvas, canvas will display the camera view. 28 | const canvasObj = new Canvas({ canvas: canvas, width: 400, height: 800, camera }); 29 | 30 | // 创建第一个游戏对象 31 | // create the first game object 32 | const firstGameObject = new GameObject({ 33 | name: "firstGameObject", 34 | transform: { 35 | rect: new Rect({ x: 0, y: 0, width: 100, height: 100 }), 36 | position: new Vector2({x:180,y:200}), 37 | // rotation: 45 38 | }, 39 | components: [ 40 | { 41 | component: Img, 42 | arguments: { 43 | rect: new Rect({ 44 | x: 0, 45 | y: 0, 46 | width: 100, 47 | height: 100 48 | }), 49 | url: 'https://fanmingfei.github.io/thallo/example/first/a.png' 50 | } 51 | }, 52 | { 53 | component: TouchManager, 54 | arguments: { 55 | dir: -1, 56 | speed: 50 57 | } 58 | } 59 | ] 60 | }); 61 | 62 | const touch = new Touch({canvas: canvasObj}); 63 | 64 | scene.addGameObjects(touch, firstGameObject); 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "thallo", 3 | "version": "0.0.1", 4 | "description": "A simple game engine.", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "webpack-dev-server", 8 | "watch": "webpack -w", 9 | "test": "echo \"Error: no test specified\" && exit 1" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/fanmingfei/thallo.git" 14 | }, 15 | "keywords": [ 16 | "thallo", 17 | "game", 18 | "engine" 19 | ], 20 | "author": "fanmingfei", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/fanmingfei/thallo/issues" 24 | }, 25 | "homepage": "https://github.com/fanmingfei/thallo#readme", 26 | "devDependencies": { 27 | "babel-core": "^6.25.0", 28 | "babel-loader": "^7.1.1", 29 | "babel-preset-env": "^1.5.2", 30 | "babel-preset-stage-0": "^6.24.1", 31 | "webpack": "^3.0.0" 32 | }, 33 | "dependencies": { 34 | "webpack-dev-server": "^2.5.0" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fanmingfei/thallo/355baf6d50a883c7bf46f03395c6ec1296c07527/src/.gitkeep -------------------------------------------------------------------------------- /src/Engine.js: -------------------------------------------------------------------------------- 1 | export GameObject from './base/GameObject'; 2 | export Canvas from './base/Canvas'; 3 | export Scene from './base/Scene'; 4 | export Camera from './base/Camera'; 5 | export types from './base/types'; 6 | export Component from './base/Component'; 7 | export components from './components/components'; 8 | // export input, {keyCode} from './base/Input'; 9 | export Input, {keyCode} from './base-game-object/Input'; 10 | export Touch from './base-game-object/Touch'; 11 | export {findGameObject} from './utils/store' -------------------------------------------------------------------------------- /src/base-game-object/Input.js: -------------------------------------------------------------------------------- 1 | import GameObject from '../base/GameObject'; 2 | import Input from '../components/Input'; 3 | 4 | export default class InputObject extends GameObject { 5 | constructor({canvas}) { 6 | super({ 7 | name: 'input', 8 | components: [{ 9 | component: Input, 10 | arguments: { canvas } 11 | }] 12 | }) 13 | } 14 | } 15 | 16 | const keyCode = { 17 | BackSpace: 8, 18 | Tab: 9, 19 | Clear: 12, 20 | Enter: 13, 21 | Shift_L: 16, 22 | Control_L: 17, 23 | Alt_L: 18, 24 | Pause: 19, 25 | Caps_Lock: 20, 26 | Escape: 27, 27 | Space: 32, 28 | Prior: 33, 29 | Next: 34, 30 | End: 35, 31 | Home: 36, 32 | Left: 37, 33 | Up: 38, 34 | Right: 39, 35 | Down: 40, 36 | Select: 41, 37 | Print: 42, 38 | Execute: 43, 39 | Insert: 45, 40 | Delete: 46, 41 | Help: 47, 42 | Alpha_0: 48, 43 | Alpha_1: 49, 44 | Alpha_2: 50, 45 | Alpha_3: 51, 46 | Alpha_4: 52, 47 | Alpha_5: 53, 48 | Alpha_6: 54, 49 | Alpha_7: 55, 50 | Alpha_8: 56, 51 | Alpha_9: 57, 52 | A: 65, 53 | B: 66, 54 | C: 67, 55 | D: 68, 56 | E: 69, 57 | F: 70, 58 | G: 71, 59 | H: 72, 60 | I: 73, 61 | J: 74, 62 | K: 75, 63 | L: 76, 64 | M: 77, 65 | N: 78, 66 | O: 79, 67 | P: 80, 68 | Q: 81, 69 | R: 82, 70 | S: 83, 71 | T: 84, 72 | U: 85, 73 | V: 86, 74 | W: 87, 75 | X: 88, 76 | Y: 89, 77 | Z: 90, 78 | KP_0: 96, 79 | KP_1: 97, 80 | KP_2: 98, 81 | KP_3: 99, 82 | KP_4: 100, 83 | KP_5: 101, 84 | KP_6: 102, 85 | KP_7: 103, 86 | KP_8: 104, 87 | KP_9: 105, 88 | KP_Multiply: 106, 89 | KP_Add: 107, 90 | KP_Separator: 108, 91 | KP_Subtract: 109, 92 | KP_Decimal: 110, 93 | KP_Divide: 111, 94 | F1: 112, 95 | F2: 113, 96 | F3: 114, 97 | F4: 115, 98 | F5: 116, 99 | F6: 117, 100 | F7: 118, 101 | F8: 119, 102 | F9: 120, 103 | F10: 121, 104 | F11: 122, 105 | F12: 123, 106 | F13: 124, 107 | F14: 125, 108 | F15: 126, 109 | F16: 127, 110 | F17: 128, 111 | F18: 129, 112 | F19: 130, 113 | F20: 131, 114 | F21: 132, 115 | F22: 133, 116 | F23: 134, 117 | F24: 135, 118 | Num_Lock: 136, 119 | Scroll_Lock: 137 120 | } 121 | 122 | export { keyCode }; 123 | -------------------------------------------------------------------------------- /src/base-game-object/Touch.js: -------------------------------------------------------------------------------- 1 | import GameObject from '../base/GameObject'; 2 | import Touch from '../components/Touch'; 3 | 4 | export default class TouchObject extends GameObject { 5 | constructor({canvas}) { 6 | super({ 7 | name: 'touch', 8 | components: [{ 9 | component: Touch, 10 | arguments: { canvas } 11 | }] 12 | }) 13 | } 14 | } -------------------------------------------------------------------------------- /src/base/Camera.js: -------------------------------------------------------------------------------- 1 | import { 2 | isCollsion, 3 | isPointCollsion 4 | } from '../utils/tools'; 5 | import GameObject from './GameObject'; 6 | export default class Camera extends GameObject { 7 | constructor({ 8 | name, 9 | transform = undefined, 10 | components = [], 11 | scene 12 | }) { 13 | super({ 14 | name, 15 | transform, 16 | components 17 | }); 18 | this.scene = scene; 19 | } 20 | 21 | // 获取当前相机可见的gameObject 22 | getVisibleGameObjects() { 23 | const visibleGameObject = this.scene.gameObjects.reduce((prev, gameObject) => { 24 | if (gameObject.active && isCollsion(this, gameObject)) { 25 | prev.push(gameObject); 26 | } else { 27 | return prev; 28 | } 29 | return prev; 30 | }, []); 31 | return visibleGameObject; 32 | } 33 | 34 | isGameObjectVisible(gameObject) { 35 | if (gameObject.active && isCollsion(this, gameObject)) { 36 | return true; 37 | } else { 38 | return false; 39 | } 40 | } 41 | 42 | worldToScreen({ 43 | position 44 | }) { 45 | const x1y1 = Vector2.minus(this.transform.position, this.transform.anchor); 46 | return Vector2.minus(position, x1y1); 47 | } 48 | screenToWorld({ 49 | position 50 | }) { 51 | const x1y1 = Vector2.minus(this.transform.position, this.transform.anchor); 52 | return Vector2.add(position, x1y1); 53 | } 54 | } -------------------------------------------------------------------------------- /src/base/Canvas.js: -------------------------------------------------------------------------------- 1 | import {Vector2} from './types'; 2 | 3 | export default class Canvas { 4 | constructor({ canvas, width, height, camera = undefined }) { 5 | this.canvas = canvas; 6 | this.width = width; 7 | this.height = height; 8 | this.context = canvas.getContext('2d'); 9 | this.camera = camera; 10 | this.framer = requestAnimationFrame(()=>this.render()); 11 | } 12 | 13 | render() { 14 | this.clearContext(); 15 | const gameObjects = this.camera.getVisibleGameObjects(); 16 | for (let gameObject of gameObjects) { 17 | this.drawImg(gameObject); 18 | } 19 | this.framer = requestAnimationFrame(()=>this.render()); 20 | } 21 | clearContext() { 22 | this.context.clearRect(0, 0, this.width, this.height); 23 | } 24 | drawImg(gameObject) { 25 | for (let img of gameObject.renderer.images){ 26 | let x1y1 = Vector2.minus(gameObject.transform.position, gameObject.transform.anchor); 27 | let x2y2 = Vector2.add(x1y1, new Vector2({ x: img.rect.x, y: img.rect.y })); 28 | this.context.save(); 29 | this.context.translate(gameObject.transform.position.x , gameObject.transform.position.y); 30 | this.context.rotate(gameObject.transform.rotation * Math.PI/180); 31 | this.context.drawImage(img.image, -gameObject.transform.anchor.x, -gameObject.transform.anchor.y, img.rect.width, img.rect.height); 32 | this.context.restore(); 33 | } 34 | } 35 | setCamera(camera) { 36 | this.camera = camera; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/base/Component.js: -------------------------------------------------------------------------------- 1 | import store from '../utils/store'; 2 | export default class Component { 3 | constructor({ 4 | targetObject 5 | }) { 6 | this.targetObject = targetObject; 7 | this.active = true; 8 | } 9 | start() {} 10 | preUpdate() {} 11 | update() {} 12 | lateUpdate() {} 13 | setActive (flag) { 14 | this.active = flag; 15 | } 16 | distroy() { 17 | store(targetObject.scene)('component').remove(this); 18 | } 19 | } -------------------------------------------------------------------------------- /src/base/Frame.js: -------------------------------------------------------------------------------- 1 | import store from '../utils/store'; 2 | 3 | export default class Frame { 4 | constructor({ scene }) { 5 | this.scene = scene; 6 | this.componentStore = store(scene)('component'); 7 | this.gameObjectStore = store(scene)('gameObject'); 8 | this.sceneStartTime = performance.now() 9 | this.lastFrameTime = performance.now(); 10 | this.frameCount = 0; 11 | requestAnimationFrame(() => this.frame()); 12 | } 13 | frame() { 14 | const components = this.componentStore.getAll(); 15 | const gameObjects = this.gameObjectStore.getAll(); 16 | const currentTime = performance.now(); 17 | const e = { 18 | deltaTime: (currentTime - this.lastFrameTime) / 1000, 19 | frameCount: this.frameCount, 20 | time: (currentTime - this.sceneStartTime) / 1000 21 | } 22 | 23 | 24 | this.lastFrameTime = performance.now(); 25 | this.frameCount++; 26 | 27 | 28 | for (let gameObject of gameObjects) { 29 | gameObject.renderer.images = []; 30 | } 31 | for (let component of components) { 32 | if (component.targetObject && component.active == true) { 33 | component.preUpdate && component.preUpdate(e) 34 | } 35 | } 36 | for (let component of components) { 37 | if (component.targetObject && component.active == true) { 38 | component.update && component.update(e) 39 | } 40 | } 41 | for (let component of components) { 42 | if (component.targetObject && component.active == true) { 43 | component.lateUpdate && component.lateUpdate(e) 44 | } 45 | } 46 | requestAnimationFrame(() => this.frame()); 47 | } 48 | 49 | } 50 | -------------------------------------------------------------------------------- /src/base/GameObject.js: -------------------------------------------------------------------------------- 1 | import { Transform, Renderer } from '../components/components'; 2 | import Input from '../components/Input'; 3 | import Touch from '../components/Touch'; 4 | import store from '../utils/store'; 5 | export default class GameObject { 6 | constructor({ 7 | name, 8 | transform = undefined, 9 | components = [] 10 | }) { 11 | this.name = name; 12 | this.childs = []; 13 | this.parent = undefined; 14 | this.components = []; 15 | this.active = true; 16 | this.scene = undefined; 17 | this.transform = this.addComponent(Transform)(transform); 18 | this.renderer = this.addComponent(Renderer)(); 19 | for (let component of components) { 20 | this.addComponent(component.component)(component.arguments); 21 | } 22 | } 23 | find({ 24 | name 25 | }) { 26 | let obj = this.childs.find(obj => obj.name == name); 27 | if (!obj) { 28 | for (let child of this.childs) { 29 | obj = child.find({ 30 | name 31 | }) 32 | if (obj) break; 33 | } 34 | } 35 | return obj; 36 | 37 | } 38 | addComponent(Component) { 39 | return (obj = {}) => { 40 | const arg = { 41 | targetObject: this, 42 | ...obj 43 | }; 44 | const component = new Component(arg); 45 | if (component instanceof Input) { 46 | this.input = component; 47 | } 48 | if (component instanceof Touch) { 49 | this.touch = component; 50 | } 51 | if (this.componentsStore) { 52 | this.componentsStore.push(component); 53 | } 54 | this.components.push(component); 55 | component.start(); 56 | return component; 57 | } 58 | } 59 | removeComponent(Component) { 60 | const index = this.components.findIndex(c => c instanceof Component); 61 | (index !== -1) && this.component.splice(index, 1); 62 | } 63 | getComponent(Component) { 64 | return this.components.find(c => c instanceof Component); 65 | } 66 | setActive(flag) { 67 | this.active = flag; 68 | } 69 | setScene({ scene }) { 70 | this.scene = scene; 71 | this.componentsStore = store(scene)('component'); 72 | this.componentsStore.push(...this.components); 73 | } 74 | distroy() { 75 | for (let component of this.components) { 76 | component.distory(); 77 | } 78 | this.active = false; 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /src/base/Input.js: -------------------------------------------------------------------------------- 1 | const keyCode = { 2 | BackSpace: 8, 3 | Tab: 9, 4 | Clear: 12, 5 | Enter: 13, 6 | Shift_L: 16, 7 | Control_L: 17, 8 | Alt_L: 18, 9 | Pause: 19, 10 | Caps_Lock: 20, 11 | Escape: 27, 12 | Space: 32, 13 | Prior: 33, 14 | Next: 34, 15 | End: 35, 16 | Home: 36, 17 | Left: 37, 18 | Up: 38, 19 | Right: 39, 20 | Down: 40, 21 | Select: 41, 22 | Print: 42, 23 | Execute: 43, 24 | Insert: 45, 25 | Delete: 46, 26 | Help: 47, 27 | Alpha_0: 48, 28 | Alpha_1: 49, 29 | Alpha_2: 50, 30 | Alpha_3: 51, 31 | Alpha_4: 52, 32 | Alpha_5: 53, 33 | Alpha_6: 54, 34 | Alpha_7: 55, 35 | Alpha_8: 56, 36 | Alpha_9: 57, 37 | A: 65, 38 | B: 66, 39 | C: 67, 40 | D: 68, 41 | E: 69, 42 | F: 70, 43 | G: 71, 44 | H: 72, 45 | I: 73, 46 | J: 74, 47 | K: 75, 48 | L: 76, 49 | M: 77, 50 | N: 78, 51 | O: 79, 52 | P: 80, 53 | Q: 81, 54 | R: 82, 55 | S: 83, 56 | T: 84, 57 | U: 85, 58 | V: 86, 59 | W: 87, 60 | X: 88, 61 | Y: 89, 62 | Z: 90, 63 | KP_0: 96, 64 | KP_1: 97, 65 | KP_2: 98, 66 | KP_3: 99, 67 | KP_4: 100, 68 | KP_5: 101, 69 | KP_6: 102, 70 | KP_7: 103, 71 | KP_8: 104, 72 | KP_9: 105, 73 | KP_Multiply: 106, 74 | KP_Add: 107, 75 | KP_Separator: 108, 76 | KP_Subtract: 109, 77 | KP_Decimal: 110, 78 | KP_Divide: 111, 79 | F1: 112, 80 | F2: 113, 81 | F3: 114, 82 | F4: 115, 83 | F5: 116, 84 | F6: 117, 85 | F7: 118, 86 | F8: 119, 87 | F9: 120, 88 | F10: 121, 89 | F11: 122, 90 | F12: 123, 91 | F13: 124, 92 | F14: 125, 93 | F15: 126, 94 | F16: 127, 95 | F17: 128, 96 | F18: 129, 97 | F19: 130, 98 | F20: 131, 99 | F21: 132, 100 | F22: 133, 101 | F23: 134, 102 | F24: 135, 103 | Num_Lock: 136, 104 | Scroll_Lock: 137 105 | } 106 | 107 | class Input { 108 | constructor() { 109 | this.currentKeyList = []; 110 | this.currentFrameDown = []; 111 | this.currentFrameUp = []; 112 | this.createInputEvent(); 113 | } 114 | getKeyDown(keyCode) { 115 | if (this.currentFrameDown.indexOf(keyCode) != -1) { 116 | return true; 117 | } 118 | return false; 119 | } 120 | getKeyUp(keyCode) { 121 | if (this.currentFrameUp.indexOf(keyCode) != -1) { 122 | return true; 123 | } 124 | return false; 125 | } 126 | getKey(keyCode) { 127 | keyCode = +keyCode; 128 | if (this.currentKeyList.indexOf(keyCode) != -1 && 129 | this.currentFrameDown.indexOf(keyCode) == -1 && 130 | this.currentFrameUp.indexOf(keyCode) == -1) { 131 | return true; 132 | } 133 | return false; 134 | } 135 | setKeyDown(keyCode) { 136 | if (this.currentKeyList.indexOf(keyCode) != -1) { 137 | return; 138 | } 139 | this.currentKeyList.push(keyCode); 140 | this.currentFrameDown.push(keyCode); 141 | } 142 | setKeyUp(keyCode) { 143 | const index = this.currentKeyList.findIndex(c => c == keyCode); 144 | if (index != -1) { 145 | this.currentKeyList.splice(index, 1); 146 | } 147 | this.currentFrameUp.push(keyCode); 148 | } 149 | clearUpDown() { 150 | this.currentFrameDown = []; 151 | this.currentFrameUp = []; 152 | } 153 | createInputEvent() { 154 | document.addEventListener('keydown', e => { 155 | this.setKeyDown(e.keyCode); 156 | }) 157 | document.addEventListener('keyup', e => { 158 | this.setKeyUp(e.keyCode); 159 | }) 160 | } 161 | 162 | } 163 | 164 | 165 | export default new Input(); 166 | export { 167 | keyCode 168 | }; -------------------------------------------------------------------------------- /src/base/Scene.js: -------------------------------------------------------------------------------- 1 | import Camera from './Camera'; 2 | import store from '../utils/store'; 3 | import Frame from './Frame'; 4 | export default class Scene { 5 | constructor({ 6 | width, 7 | height 8 | }) { 9 | this.width = width; 10 | this.height = height; 11 | this.camera = []; 12 | this.gameObjects = []; 13 | this.frame = new Frame({scene:this}); 14 | this.gameObjectStore = store(this)('gameObject'); 15 | } 16 | addGameObjects(...gameObjects) { 17 | for(let gameObject of gameObjects) { 18 | gameObject instanceof Camera && this.camera.push(gameObject); 19 | gameObject.setScene({ scene: this }); 20 | this.gameObjects.push(gameObject); 21 | this.gameObjectStore.push(gameObject); 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/base/types.js: -------------------------------------------------------------------------------- 1 | import Vector2 from './types/Vector2'; 2 | import Rect from './types/Rect'; 3 | export { 4 | Vector2, 5 | Rect 6 | } 7 | export default { 8 | Vector2, 9 | Rect 10 | } -------------------------------------------------------------------------------- /src/base/types/Rect.js: -------------------------------------------------------------------------------- 1 | export default class Rect { 2 | constructor({ 3 | x = 0, 4 | y = 0, 5 | width = 0, 6 | height = 0 7 | } = {x: 0, y: 0, width: 0, height: 0}) { 8 | this.x = x; 9 | this.y = y; 10 | this.width = width; 11 | this.height = height; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/base/types/Vector2.js: -------------------------------------------------------------------------------- 1 | export default class Vector2 { 2 | constructor({ 3 | x = 0, 4 | y = 0 5 | } = {x:0, y:0}) { 6 | this.x = x; 7 | this.y = y; 8 | } 9 | static minus(...objs) { 10 | return objs.reduce((prev, curr) => { 11 | return new Vector2({ 12 | x: prev.x - curr.x, 13 | y: prev.y - curr.y 14 | }) 15 | }); 16 | } 17 | static add(...objs) { 18 | return objs.reduce((prev, curr) => { 19 | return new Vector2({ 20 | x: prev.x + curr.x, 21 | y: prev.y + curr.y 22 | }) 23 | }, new Vector2({x:0,y:0})); 24 | } 25 | } -------------------------------------------------------------------------------- /src/components/Img.js: -------------------------------------------------------------------------------- 1 | import { Rect } from '../base/types'; 2 | import Component from '../base/Component'; 3 | export default class Img extends Component { 4 | constructor({ 5 | targetObject, 6 | rect = new Rect(), 7 | url = '', 8 | rotation = 0 9 | }) { 10 | super({ 11 | targetObject, 12 | }) 13 | var rect; 14 | var image; 15 | Object.defineProperties(this, { 16 | rect: { 17 | set(value) { 18 | rect = value; 19 | this.image.rect = rect; 20 | }, 21 | get() { 22 | return rect; 23 | } 24 | }, 25 | image: { 26 | set(value) { 27 | image = value; 28 | }, 29 | get() { 30 | return image; 31 | } 32 | } 33 | }) 34 | this.setUrl({ url }); 35 | this.rect = rect; 36 | } 37 | setUrl({ url }) { 38 | this.url = url; 39 | this.image = new Image(); 40 | this.image.src = url; 41 | } 42 | update () { 43 | this.targetObject.renderer.pushImages({ 44 | image: this.image, 45 | rect: this.rect 46 | }) 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/components/Input.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import Component from '../base/Component'; 4 | 5 | export default class Input extends Component { 6 | constructor ({targetObject, canvas}) { 7 | super({targetObject}); 8 | this.canvas = canvas; 9 | this.currentKeyList = []; 10 | this.currentFrameDown = []; 11 | this.currentFrameUp = []; 12 | this.addEventListener(); 13 | } 14 | getKeyDown(keyCode) { 15 | if (this.currentFrameDown.indexOf(keyCode) != -1) { 16 | return true; 17 | } 18 | return false; 19 | } 20 | getKeyUp(keyCode) { 21 | if (this.currentFrameUp.indexOf(keyCode) != -1) { 22 | return true; 23 | } 24 | return false; 25 | } 26 | getKey(keyCode) { 27 | keyCode = +keyCode; 28 | if (this.currentKeyList.indexOf(keyCode) != -1 && 29 | this.currentFrameDown.indexOf(keyCode) == -1 && 30 | this.currentFrameUp.indexOf(keyCode) == -1) { 31 | return true; 32 | } 33 | return false; 34 | } 35 | setKeyDown(keyCode) { 36 | if (this.currentKeyList.indexOf(keyCode) != -1) { 37 | return; 38 | } 39 | this.currentKeyList.push(keyCode); 40 | this.currentFrameDown.push(keyCode); 41 | } 42 | setKeyUp(keyCode) { 43 | const index = this.currentKeyList.findIndex(c => c == keyCode); 44 | if (index != -1) { 45 | this.currentKeyList.splice(index, 1); 46 | } 47 | this.currentFrameUp.push(keyCode); 48 | } 49 | lateUpdate(){ 50 | this.clearInput(); 51 | } 52 | clearInput() { 53 | this.currentFrameDown = []; 54 | this.currentFrameUp = []; 55 | } 56 | addEventListener() { 57 | document.addEventListener('keydown', e => { 58 | this.setKeyDown(e.keyCode); 59 | }) 60 | document.addEventListener('keyup', e => { 61 | this.setKeyUp(e.keyCode); 62 | }) 63 | } 64 | 65 | } -------------------------------------------------------------------------------- /src/components/Renderer.js: -------------------------------------------------------------------------------- 1 | import { Rect } from '../base/types'; 2 | import Component from '../base/Component'; 3 | export default class Renderer extends Component { 4 | constructor({ 5 | targetObject 6 | }) { 7 | super({ 8 | targetObject, 9 | }) 10 | this.images = []; 11 | } 12 | pushImages(...args){ 13 | for(let img of args) { 14 | img.crossOrigin = 'anonymous'; 15 | this.images.push(img); 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/components/Text.js: -------------------------------------------------------------------------------- 1 | import { Rect, Vector2 } from '../base/types'; 2 | import Component from '../base/Component'; 3 | export default class Text extends Component { 4 | constructor({ 5 | targetObject, 6 | text = 'text', 7 | font = '12px sans-serif', 8 | color = '#000', 9 | textAlign = 'start', 10 | textBaseline = 'hanging', 11 | position = new Vector2(), 12 | rect = targetObject.transform.rect 13 | }) { 14 | super({ 15 | targetObject 16 | }); 17 | let store = { 18 | color: color, 19 | font: font, 20 | text: text, 21 | textAlign: textAlign, 22 | textBaseline: textBaseline, 23 | position: position, 24 | rect: rect 25 | } 26 | 27 | this.needRender = false; 28 | 29 | for (let name in store) { 30 | Object.defineProperty(this, name, { 31 | get() { 32 | return store[name]; 33 | }, 34 | set(value) { 35 | store[name] = value; 36 | this.needRender = true; 37 | } 38 | }) 39 | } 40 | 41 | this.canvas = document.createElement('canvas'); 42 | this.ctx = this.canvas.getContext('2d'); 43 | this.updateText(); 44 | } 45 | update() { 46 | if (this.needRender) { 47 | this.updateText(); 48 | } else { 49 | this.targetObject.renderer.pushImages(this.renderImg); 50 | } 51 | } 52 | updateText() { 53 | this.canvas.width = this.rect.width; 54 | this.canvas.height = this.rect.height; 55 | this.ctx.fillStyle = this.color; 56 | this.ctx.font = this.font; 57 | this.ctx.textAlign = this.textAlign; 58 | this.ctx.textBaseline = this.textBaseline; 59 | this.ctx.fillText(this.text, this.position.x, this.position.y); 60 | const base64 = this.canvas.toDataURL('image/png'); 61 | const img = new Image(); 62 | img.src = base64; 63 | this.renderImg = { 64 | image: img, 65 | rect: new Rect({x: 0, y: 0, width: this.canvas.width, height: this.canvas.height}), 66 | }; 67 | this.targetObject.renderer.pushImages(this.renderImg); 68 | this.needRender = false; 69 | } 70 | } -------------------------------------------------------------------------------- /src/components/Touch.js: -------------------------------------------------------------------------------- 1 | import { Vector2 } from '../base/types'; 2 | import {isPointCollsion} from '../utils/tools'; 3 | import Component from '../base/Component'; 4 | 5 | export default class Touch extends Component { 6 | constructor({ targetObject, canvas }) { 7 | super({ targetObject }) 8 | this.canvas = canvas; 9 | this.touchStartList = new Map(); 10 | this.touchList = new Map(); 11 | this.touchEndList = new Map(); 12 | this.addEventListener(); 13 | } 14 | getTouchStart(gameObject) { 15 | if (!gameObject) { 16 | return this.touchStartList.size > 0; 17 | } 18 | 19 | for (let touch of this.touchStartList.values()) { 20 | let coll = isPointCollsion(new Vector2({ 21 | x: touch.pageX - this.canvas.canvas.offsetLeft, 22 | y: touch.pageY - this.canvas.canvas.offsetTop 23 | }), gameObject); 24 | if (coll) { 25 | return true 26 | }; 27 | } 28 | return false; 29 | } 30 | getTouchEnd(gameObject) { 31 | for (let touch of this.touchEndList.values()) { 32 | let coll = isPointCollsion(new Vector2({ 33 | x: touch.pageX - this.canvas.canvas.offsetLeft, 34 | y: touch.pageY - this.canvas.canvas.offsetTop 35 | }), gameObject); 36 | if (coll) { 37 | return true 38 | }; 39 | } 40 | return false; 41 | } 42 | setTouchStart(touches) { 43 | for (let touch of touches) { 44 | 45 | this.touchList.set(touch.identifier, touch); 46 | this.touchStartList.set(touch.identifier, touch); 47 | } 48 | } 49 | setTouchEnd(touches) { 50 | for (let touch of touches) { 51 | this.touchList.delete(touch.identifier) 52 | this.touchEndList.set(touch.identifier, touch); 53 | } 54 | } 55 | lateUpdate() { 56 | this.clearTouch(); 57 | } 58 | clearTouch() { 59 | this.touchStartList.clear(); 60 | this.touchEndList.clear(); 61 | } 62 | addEventListener () { 63 | this.canvas.canvas.addEventListener('touchstart', (e)=>{ 64 | e.preventDefault(); 65 | e.stopPropagation(); 66 | this.setTouchStart(e.touches); 67 | }); 68 | this.canvas.canvas.addEventListener('touchend', (e)=>{ 69 | this.setTouchEnd(e.changedTouches); 70 | }); 71 | this.canvas.canvas.addEventListener('touchcancel', (e)=>{ 72 | this.setTouchEnd(e.touches); 73 | }) 74 | } 75 | } -------------------------------------------------------------------------------- /src/components/Transform.js: -------------------------------------------------------------------------------- 1 | import { Rect, Vector2 } from '../base/types'; 2 | import Component from '../base/Component'; 3 | export default class Transform extends Component { 4 | constructor({ 5 | targetObject, 6 | rect = new Rect(), 7 | position = new Vector2(), 8 | anchor = new Vector2({ x: rect.width / 2, y: rect.height / 2 }), 9 | rotation = 0 10 | }) { 11 | super({ 12 | targetObject 13 | }); 14 | this.rect = rect; 15 | this.position = position; 16 | this.anchor = anchor; 17 | this.rotation = rotation; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/components/components.js: -------------------------------------------------------------------------------- 1 | import Img from './Img'; 2 | import Transform from './Transform'; 3 | import Renderer from './Renderer'; 4 | import Text from './Text'; 5 | export { 6 | Img, 7 | Transform, 8 | Renderer, 9 | Text 10 | } 11 | export default { 12 | Img, 13 | Transform, 14 | Renderer, 15 | Text 16 | } -------------------------------------------------------------------------------- /src/utils/store.js: -------------------------------------------------------------------------------- 1 | const cache = new Map(); 2 | export default function store(id) { 3 | if (!cache.has(id)) { 4 | cache.set(id, new Map); 5 | } 6 | return function(name) { 7 | if (!cache.get(id).has(name)) { 8 | cache.get(id).set(name, []); 9 | } 10 | let store = cache.get(id).get(name); 11 | return { 12 | push(...objs) { 13 | store.push(...objs); 14 | }, 15 | remove(...objs) { 16 | for (obj of objs) { 17 | const index = store.findIndex(o => o == obj); 18 | (index !== -1) && store.splice(index, 1); 19 | } 20 | }, 21 | getAll() { 22 | return store; 23 | }, 24 | clear() { 25 | store.clear(); 26 | } 27 | } 28 | } 29 | }; 30 | 31 | export const findGameObject = function({name}) { 32 | for (let [key,value] of cache){ 33 | return value.get('gameObject').find(go=>go.name == name); 34 | } 35 | } -------------------------------------------------------------------------------- /src/utils/tools.js: -------------------------------------------------------------------------------- 1 | import { 2 | Vector2 3 | } from '../base/types'; 4 | export function isCollsion(gameObject1, gameObject2) { 5 | const transform1 = gameObject1.transform; 6 | const transform2 = gameObject2.transform; 7 | 8 | const w1 = transform1.rect.width; 9 | const w2 = transform2.rect.width; 10 | const h1 = transform1.rect.height; 11 | const h2 = transform2.rect.height; 12 | 13 | const x1y1 = Vector2.minus(transform1.position, transform1.anchor); 14 | const x2y2 = Vector2.minus(transform2.position, transform2.anchor); 15 | 16 | const x1 = x1y1.x; 17 | const x2 = x2y2.x; 18 | const y1 = x1y1.y; 19 | const y2 = x2y2.y; 20 | 21 | if (x1 >= x2 && x1 >= x2 + w2) { 22 | return false; 23 | } else if (x1 <= x2 && x1 + w1 <= x2) { 24 | return false; 25 | } else if (y1 >= y2 && y1 >= y2 + h2) { 26 | return false; 27 | } else if (y1 <= y2 && y1 + h1 <= y2) { 28 | return false; 29 | } 30 | return true; 31 | 32 | } 33 | 34 | export function isPointCollsion(point, gameObject) { 35 | const x1 = point.x; 36 | const y1 = point.y; 37 | 38 | const x2y2 = Vector2.minus(gameObject.transform.position, gameObject.transform.anchor); 39 | const x2 = x2y2.x; 40 | const y2 = x2y2.y; 41 | const w = gameObject.transform.rect.width; 42 | const h = gameObject.transform.rect.height; 43 | 44 | if (x1 >= x2 && x1 <= x2 + w && y1 >= y2 && y1 <= y2 + h) { 45 | return true; 46 | } 47 | return false; 48 | } 49 | 50 | export function isPointRectCollsion (point, rect) { 51 | const x1 = point.x; 52 | const y1 = point.y; 53 | const x2 = rect.x; 54 | const y2 = rect.y; 55 | const w = rect.width; 56 | const h = rect.height; 57 | 58 | if (x1 >= x2 && x1 <= x2 + w && y1 >= y2 && y1 <= y2 + h) { 59 | return true; 60 | } 61 | return false; 62 | } 63 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | module.exports = [{ 4 | entry: './example/first/index.js', 5 | output: { 6 | filename: 'bundle.js', 7 | path: path.resolve(__dirname, 'example/first/dist') 8 | }, 9 | module: { 10 | rules: [{ 11 | test: /\.js$/, 12 | exclude: /(node_modules|bower_components)/, 13 | use: { 14 | loader: 'babel-loader', 15 | options: { 16 | presets: ['env', 'stage-0'] 17 | } 18 | } 19 | }] 20 | } 21 | },{ 22 | entry: './example/rotation/index.js', 23 | output: { 24 | filename: 'bundle.js', 25 | path: path.resolve(__dirname, 'example/rotation/dist') 26 | }, 27 | module: { 28 | rules: [{ 29 | test: /\.js$/, 30 | exclude: /(node_modules|bower_components)/, 31 | use: { 32 | loader: 'babel-loader', 33 | options: { 34 | presets: ['env', 'stage-0'] 35 | } 36 | } 37 | }] 38 | } 39 | },{ 40 | entry: './example/input/index.js', 41 | output: { 42 | filename: 'bundle.js', 43 | path: path.resolve(__dirname, 'example/input/dist') 44 | }, 45 | module: { 46 | rules: [{ 47 | test: /\.js$/, 48 | exclude: /(node_modules|bower_components)/, 49 | use: { 50 | loader: 'babel-loader', 51 | options: { 52 | presets: ['env', 'stage-0'] 53 | } 54 | } 55 | }] 56 | } 57 | },{ 58 | entry: './example/text/index.js', 59 | output: { 60 | filename: 'bundle.js', 61 | path: path.resolve(__dirname, 'example/text/dist') 62 | }, 63 | module: { 64 | rules: [{ 65 | test: /\.js$/, 66 | exclude: /(node_modules|bower_components)/, 67 | use: { 68 | loader: 'babel-loader', 69 | options: { 70 | presets: ['env', 'stage-0'] 71 | } 72 | } 73 | }] 74 | } 75 | },{ 76 | entry: './example/touch/index.js', 77 | output: { 78 | filename: 'bundle.js', 79 | path: path.resolve(__dirname, 'example/touch/dist') 80 | }, 81 | module: { 82 | rules: [{ 83 | test: /\.js$/, 84 | exclude: /(node_modules|bower_components)/, 85 | use: { 86 | loader: 'babel-loader', 87 | options: { 88 | presets: ['env', 'stage-0'] 89 | } 90 | } 91 | }] 92 | } 93 | },{ 94 | entry: './example/tb/index.js', 95 | output: { 96 | filename: 'bundle.js', 97 | path: path.resolve(__dirname, 'example/tb/dist') 98 | }, 99 | module: { 100 | rules: [{ 101 | test: /\.js$/, 102 | exclude: /(node_modules|bower_components)/, 103 | use: { 104 | loader: 'babel-loader', 105 | options: { 106 | presets: ['env', 'stage-0'] 107 | } 108 | } 109 | }] 110 | } 111 | }]; 112 | --------------------------------------------------------------------------------