├── README.md ├── demo ├── .DS_Store ├── .gitignore ├── index.html ├── lib │ ├── game │ │ ├── entities │ │ │ ├── player.js │ │ │ └── spike.js │ │ ├── joystick.js │ │ ├── levels │ │ │ └── test.js │ │ └── main.js │ └── plugins │ │ └── gui.js └── media │ ├── 04b03.font.png │ ├── crosshair.png │ ├── joystick.png │ ├── player.png │ ├── projectile.png │ ├── slime-grenade.png │ ├── spike.png │ └── tiles.png └── gui.js /README.md: -------------------------------------------------------------------------------- 1 | ## Installation 2 | - Copy `gui.js` to `lib/plugins/` 3 | - Add plugin in main.js: `'plugins.gui'` 4 | - On your draw code: `if(ig.gui.show) ig.gui.draw();` 5 | - Boom. Easy-GUI 6 | 7 | ## Elements 8 | 9 | ### Functions: 10 | 11 | ##### add: `ig.gui.element.add(properties);` 12 | ##### getByName `ig.gui.element.action('getByName', 'name');` 13 | ##### getByGroup `ig.gui.element.action('getByGroup', 'name');` 14 | ##### show `ig.gui.element.action('show', 'name')` 15 | ##### showGroup `ig.gui.element.action('showGroup', 'name');` 16 | ##### hide `ig.gui.element.action('hide', 'name')` 17 | ##### hideGroup `ig.gui.element.action('hideGroup', 'name');` 18 | ##### toggle `ig.gui.element.action('toggle', 'name');` 19 | ##### toggleGroup `ig.gui.element.action('toggleGroup', 'name');` 20 | ##### remove `ig.gui.element.action('remove', 'name');` 21 | ##### removeGroup `ig.gui.element.action('removeGroup', 'name');` 22 | ##### enable `ig.gui.element.action('enable', 'name');` 23 | ##### enableGroup `ig.gui.element.action('enableGroup', 'name');` 24 | ##### disable `ig.gui.element.action('disable', 'name');` 25 | ##### disableGroup `ig.gui.element.action('disableGroup', 'name');` 26 | ##### disableAll `ig.gui.element.action('disableAll');` 27 | 28 | 29 | ### Add properties 30 | 31 | ``` 32 | name: Element name 33 | group: Group name 34 | title: Element title. Shown in the lower-left of the element if enabled. 35 | keybind: Element bound key. Allows a key to activate the button as well as the mouse. (must be the name that the key is bound with in Main.js) 36 | showTitle: Show the element's title on the element. The default is false 37 | showBind: Show the key bound to the element. The default is false (it simply shows the name of the key that is bound in Main.js) 38 | count: An integer attached to the element, can be used for various purposes. 39 | icon: An icon to be shown on top of the element, during all states. 40 | size: Size of element 41 | pos: Position to place this element on screen 42 | disabled: Avoids behaviors and state changes 43 | alpha: Specifies the alpha transparency. The default is 1 (fully opaque). 44 | toggle: Changes state and remains there until you click. The default is false 45 | active: Toggle initial state. Default is false, 46 | mouseDown: Sets a function that runs continuously while the mouse button is pressed 47 | click: Sets a function that runs every time you press the mouse button 48 | state: Allows state and behavior changes 49 | normal: Normal state of element (Required, other states: **hover** and **active**) 50 | image: Image resource. 51 | tile: Number of tile. (Optional, you can use a simple image) 52 | tileSize: Tile size 53 | ``` 54 | 55 | ### Quick button: 56 | 57 | ``` 58 | ig.gui.element.add({ 59 | name: 'button_name', 60 | group: 'group_name', 61 | size: { x: 28, y: 56 }, 62 | pos: { x: 0, y: 37 }, 63 | state: { 64 | normal: { 65 | image: new ig.Image('media/minibutton.png') 66 | } 67 | }, 68 | click: function() { 69 | // Action! 70 | } 71 | }) 72 | ``` 73 | 74 | ### Full example 75 | 76 | ``` 77 | ig.gui.element.add({ 78 | name: 'button_name', 79 | group: 'group_name', 80 | title: 'button_title', 81 | showTitle: true, 82 | keybind: 'button_key', 83 | showBind: true, 84 | icon: new ig.Image('media/icon.png'), 85 | size: { x: 32, y: 32 }, 86 | pos: { x: 15, y: 10 }, 87 | disabled: false, 88 | alpha: 0.5, 89 | toggle: true, 90 | active: false, 91 | state: { 92 | normal: { 93 | image: new ig.Image('media/buttons.png'), 94 | tile: 3, 95 | tileSize: 32 96 | }, 97 | hover: { 98 | image: new ig.Image('media/buttons.png'), 99 | tile: 4, 100 | tileSize: 32 101 | }, 102 | active: { 103 | image: new ig.Image('media/buttons.png'), 104 | tile: 5, 105 | tileSize: 32 106 | } 107 | }, 108 | mouseDown: function() { 109 | // Mouse down! 110 | }, 111 | click: function() { 112 | console.log(this); // Print this button ;) 113 | } 114 | }) 115 | ``` 116 | 117 | ### Change properties 118 | 119 | ``` 120 | (ig.gui.element.action('getByName', 'button_name')).alpha = 0.5; 121 | ``` 122 | 123 | ## Cursor 124 | 125 | ### Functions: 126 | 127 | ##### set `ig.gui.cursor.set(image);` 128 | ##### clear `ig.gui.cursor.clear();` 129 | 130 | ### Mouse binds *(Important!)*: 131 | 132 | The plugin binds *left button* to *mouse1*. 133 | If your click doesn't work maybe this is the problem! 134 | https://github.com/datamosh/ImpactJS-GUI/issues/4 135 | 136 | ## More information? 137 | 138 | 139 | - [Impact forum post](http://impactjs.com/forums/code/impact-gui) 140 | -------------------------------------------------------------------------------- /demo/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datamosh/ImpactJS-GUI/b630de5f1235be3ef9cdaa4defa000512c20b1ee/demo/.DS_Store -------------------------------------------------------------------------------- /demo/.gitignore: -------------------------------------------------------------------------------- 1 | lib/impact 2 | lib/weltmeister 3 | tools/ 4 | weltmeister.html -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Impact Game 5 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /demo/lib/game/entities/player.js: -------------------------------------------------------------------------------- 1 | ig.module( 2 | 'game.entities.player' 3 | ) 4 | .requires( 5 | 'impact.entity' 6 | ) 7 | .defines(function(){ 8 | 9 | EntityPlayer = ig.Entity.extend({ 10 | 11 | // The players (collision) size is a bit smaller than the animation 12 | // frames, so we have to move the collision box a bit (offset) 13 | size: {x: 8, y:14}, 14 | offset: {x: 4, y: 2}, 15 | 16 | maxVel: {x: 100, y: 200}, 17 | friction: {x: 600, y: 0}, 18 | 19 | type: ig.Entity.TYPE.A, // Player friendly group 20 | checkAgainst: ig.Entity.TYPE.NONE, 21 | collides: ig.Entity.COLLIDES.PASSIVE, 22 | 23 | animSheet: new ig.AnimationSheet( 'media/player.png', 16, 16 ), 24 | 25 | 26 | // These are our own properties. They are not defined in the base 27 | // ig.Entity class. We just use them internally for the Player 28 | flip: false, 29 | accelGround: 400, 30 | accelAir: 200, 31 | jump: 200, 32 | health: 10, 33 | flip: false, 34 | 35 | init: function( x, y, settings ) { 36 | this.parent( x, y, settings ); 37 | 38 | // Add the animations 39 | this.addAnim( 'idle', 1, [0] ); 40 | this.addAnim( 'run', 0.07, [0,1,2,3,4,5] ); 41 | this.addAnim( 'jump', 1, [9] ); 42 | this.addAnim( 'fall', 0.4, [6,7] ); 43 | 44 | ig.game.player = this; 45 | }, 46 | 47 | 48 | update: function() { 49 | 50 | // move left or right 51 | var accel = this.standing ? this.accelGround : this.accelAir; 52 | if( ig.input.state('left') ) { 53 | this.accel.x = -accel; 54 | this.flip = true; 55 | } 56 | else if( ig.input.state('right') ) { 57 | this.accel.x = accel; 58 | this.flip = false; 59 | } 60 | else { 61 | this.accel.x = 0; 62 | } 63 | 64 | 65 | // jump 66 | if( this.standing && ig.input.pressed('jump') ) { 67 | this.vel.y = -this.jump; 68 | } 69 | 70 | // shoot 71 | if( ig.input.pressed('shoot') ) { 72 | ig.game.spawnEntity( EntitySlimeGrenade, this.pos.x, this.pos.y, {flip:this.flip} ); 73 | } 74 | 75 | // set the current animation, based on the player's speed 76 | if( this.vel.y < 0 ) { 77 | this.currentAnim = this.anims.jump; 78 | } 79 | else if( this.vel.y > 0 ) { 80 | this.currentAnim = this.anims.fall; 81 | } 82 | else if( this.vel.x != 0 ) { 83 | this.currentAnim = this.anims.run; 84 | } 85 | else { 86 | this.currentAnim = this.anims.idle; 87 | } 88 | 89 | this.currentAnim.flip.x = this.flip; 90 | 91 | 92 | // move! 93 | this.parent(); 94 | } 95 | }); 96 | 97 | 98 | // The grenades a player can throw are NOT in a separate file, because 99 | // we don't need to be able to place them in Weltmeister. They are just used 100 | // here in the code. 101 | 102 | // Only entities that should be usable in Weltmeister need to be in their own 103 | // file. 104 | EntitySlimeGrenade = ig.Entity.extend({ 105 | size: {x: 4, y: 4}, 106 | offset: {x: 2, y: 2}, 107 | maxVel: {x: 200, y: 200}, 108 | 109 | 110 | // The fraction of force with which this entity bounces back in collisions 111 | bounciness: 0.6, 112 | 113 | type: ig.Entity.TYPE.NONE, 114 | checkAgainst: ig.Entity.TYPE.B, // Check Against B - our evil enemy group 115 | collides: ig.Entity.COLLIDES.PASSIVE, 116 | 117 | animSheet: new ig.AnimationSheet( 'media/slime-grenade.png', 8, 8 ), 118 | 119 | bounceCounter: 0, 120 | 121 | 122 | init: function( x, y, settings ) { 123 | this.parent( x, y, settings ); 124 | 125 | this.vel.x = (settings.flip ? -this.maxVel.x : this.maxVel.x); 126 | this.vel.y = -50; 127 | this.addAnim( 'idle', 0.2, [0,1] ); 128 | }, 129 | 130 | handleMovementTrace: function( res ) { 131 | this.parent( res ); 132 | if( res.collision.x || res.collision.y ) { 133 | 134 | // only bounce 3 times 135 | this.bounceCounter++; 136 | if( this.bounceCounter > 3 ) { 137 | this.kill(); 138 | } 139 | } 140 | }, 141 | 142 | // This function is called when this entity overlaps anonther entity of the 143 | // checkAgainst group. I.e. for this entity, all entities in the B group. 144 | check: function( other ) { 145 | other.receiveDamage( 10, this ); 146 | this.kill(); 147 | } 148 | }); 149 | 150 | }); -------------------------------------------------------------------------------- /demo/lib/game/entities/spike.js: -------------------------------------------------------------------------------- 1 | ig.module( 2 | 'game.entities.spike' 3 | ) 4 | .requires( 5 | 'impact.entity' 6 | ) 7 | .defines(function(){ 8 | 9 | EntitySpike = ig.Entity.extend({ 10 | size: {x: 16, y: 9}, 11 | maxVel: {x: 100, y: 100}, 12 | friction: {x: 150, y: 0}, 13 | 14 | type: ig.Entity.TYPE.B, // Evil enemy group 15 | checkAgainst: ig.Entity.TYPE.A, // Check against friendly 16 | collides: ig.Entity.COLLIDES.PASSIVE, 17 | 18 | health: 10, 19 | 20 | 21 | speed: 14, 22 | flip: false, 23 | 24 | animSheet: new ig.AnimationSheet( 'media/spike.png', 16, 9 ), 25 | 26 | 27 | init: function( x, y, settings ) { 28 | this.parent( x, y, settings ); 29 | 30 | this.addAnim( 'crawl', 0.08, [0,1,2] ); 31 | }, 32 | 33 | 34 | update: function() { 35 | // near an edge? return! 36 | if( !ig.game.collisionMap.getTile( 37 | this.pos.x + (this.flip ? +4 : this.size.x -4), 38 | this.pos.y + this.size.y+1 39 | ) 40 | ) { 41 | this.flip = !this.flip; 42 | } 43 | 44 | var xdir = this.flip ? -1 : 1; 45 | this.vel.x = this.speed * xdir; 46 | 47 | this.parent(); 48 | }, 49 | 50 | 51 | handleMovementTrace: function( res ) { 52 | this.parent( res ); 53 | 54 | // collision with a wall? return! 55 | if( res.collision.x ) { 56 | this.flip = !this.flip; 57 | } 58 | }, 59 | 60 | check: function( other ) { 61 | other.receiveDamage( 10, this ); 62 | } 63 | }); 64 | 65 | }); -------------------------------------------------------------------------------- /demo/lib/game/joystick.js: -------------------------------------------------------------------------------- 1 | ig.module('game.joystick') 2 | .requires( 3 | 'impact.game' 4 | ) 5 | .defines(function() { 6 | joystick = function() { 7 | ig.gui.element.add({ 8 | name: 'left', 9 | group: 'joystick', 10 | size: { x: 47, y: 47 }, 11 | pos: { x: 0, y: ig.system.height - 47 }, 12 | state: { 13 | normal: { 14 | image: new ig.Image('media/joystick.png'), 15 | tile: 0, 16 | tileSize: 47 17 | } 18 | }, 19 | mouseDown: function() { 20 | ig.game.player.vel.x = -100 21 | ig.game.player.flip = true 22 | } 23 | }) 24 | 25 | ig.gui.element.add({ 26 | name: 'right', 27 | group: 'joystick', 28 | size: { x: 47, y: 47 }, 29 | pos: { x: 47, y: ig.system.height - 47 }, 30 | state: { 31 | normal: { 32 | image: new ig.Image('media/joystick.png'), 33 | tile: 1, 34 | tileSize: 47 35 | } 36 | }, 37 | mouseDown: function() { 38 | ig.game.player.vel.x = 100 39 | ig.game.player.flip = false 40 | } 41 | }) 42 | 43 | ig.gui.element.add({ 44 | name: 'a', 45 | group: 'joystick', 46 | size: { x: 47, y: 47 }, 47 | pos: { x: ig.system.width - 100, y: ig.system.height - 47 }, 48 | state: { 49 | normal: { 50 | image: new ig.Image('media/joystick.png'), 51 | tile: 2, 52 | tileSize: 47 53 | } 54 | }, 55 | click: function() { 56 | if(ig.game.player.standing) 57 | ig.game.player.vel.y = -ig.game.player.jump; 58 | } 59 | }) 60 | 61 | 62 | ig.gui.element.add({ 63 | name: 'b', 64 | group: 'joystick', 65 | size: { x: 47, y: 47 }, 66 | pos: { x: ig.system.width - 47, y: ig.system.height - 47 }, 67 | state: { 68 | normal: { 69 | image: new ig.Image('media/joystick.png'), 70 | tile: 3, 71 | tileSize: 47 72 | } 73 | }, 74 | click: function() { 75 | ig.game.spawnEntity( EntitySlimeGrenade, ig.game.player.pos.x, ig.game.player.pos.y, { flip: ig.game.player.flip } ) 76 | } 77 | }) 78 | 79 | ig.gui.element.add({ 80 | name: 'left', 81 | group: 'control', 82 | size: { x: 47, y: 47 }, 83 | pos: { x: ig.system.width - 47, y: 5 }, 84 | toggle: true, 85 | state: { 86 | normal: { 87 | image: new ig.Image('media/joystick.png'), 88 | tile: 4, 89 | tileSize: 47 90 | }, 91 | active: { 92 | image: new ig.Image('media/joystick.png'), 93 | tile: 5, 94 | tileSize: 47 95 | } 96 | }, 97 | click: function() { 98 | ig.game.pause = !ig.game.pause 99 | for (var i = 0; i < ig.gui.element.action('getByGroup', 'joystick').length; i++) { 100 | var alpha = 1; 101 | if(ig.game.pause) alpha = 0.5; 102 | ig.gui.element.action('getByGroup', 'joystick')[i].alpha = alpha 103 | ig.gui.element.action('getByGroup', 'joystick')[i].disabled = ig.game.pause 104 | } 105 | } 106 | }) 107 | } 108 | }) -------------------------------------------------------------------------------- /demo/lib/game/levels/test.js: -------------------------------------------------------------------------------- 1 | ig.module( 'game.levels.test' ) 2 | .requires( 'impact.image','game.entities.player','game.entities.spike' ) 3 | .defines(function(){ 4 | LevelTest=/*JSON[*/{"entities":[{"type":"EntityPlayer","x":88,"y":138},{"type":"EntitySpike","x":132,"y":204},{"type":"EntitySpike","x":204,"y":124},{"type":"EntitySpike","x":288,"y":172},{"type":"EntitySpike","x":28,"y":60},{"type":"EntitySpike","x":136,"y":60}],"layer":[{"name":"background","width":10,"height":10,"linkWithCollision":false,"visible":1,"tilesetName":"media/tiles.png","repeat":true,"preRender":false,"distance":"2","tilesize":8,"foreground":false,"data":[[0,0,0,0,0,6,6,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,6,6,6,0,0,0,0,0,0],[0,7,7,6,0,0,6,0,8,0],[0,0,0,0,0,0,6,0,8,0],[6,6,6,6,0,0,0,0,0,0],[6,0,0,0,0,0,0,0,0,0],[0,0,0,0,7,7,0,0,0,0],[0,0,0,0,0,0,0,0,0,6],[0,0,0,0,0,0,6,0,0,6]]},{"name":"collision","width":40,"height":30,"linkWithCollision":false,"visible":1,"tilesetName":"","repeat":false,"preRender":false,"distance":"1","tilesize":8,"foreground":false,"data":[[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]]},{"name":"main","width":40,"height":30,"linkWithCollision":true,"visible":1,"tilesetName":"media/tiles.png","repeat":false,"preRender":false,"distance":"1","tilesize":8,"foreground":false,"data":[[1,1,1,1,1,1,2,1,1,1,1,1,1,1,1,2,1,1,1,1,1,1,1,1,1,1,2,1,1,1,1,1,1,1,1,1,1,1,1,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,1,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,4,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,2,3,1,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,3,4,0,0,0,0,0,0,0,0,0,0,0,2],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,1,3,3,3,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,1,2,2,1,4,1,0,0,0,0,0,0,0,0,1,1,2,2,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,1,1,1,1,4,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2],[2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,3,3,1,1,1,1,1,1,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,1,1,1,3,3,3,1,1,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,1,1,1,4,4,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,1,3,3,3,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,1,2,2,1,1,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,2,1,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,4,3,3,3,3,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,1,1,4,1,1,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],[1,1,1,1,1,1,1,4,1,1,1,1,4,1,1,1,1,1,1,1,4,1,1,1,1,1,1,1,1,1,4,4,4,4,4,1,1,1,1,1]]}]}/*]JSON*/; 5 | LevelTestResources=[new ig.Image('media/tiles.png'), new ig.Image('media/tiles.png')]; 6 | }); -------------------------------------------------------------------------------- /demo/lib/game/main.js: -------------------------------------------------------------------------------- 1 | ig.module( 2 | 'game.main' 3 | ) 4 | .requires( 5 | 'impact.game', 6 | 'impact.font', 7 | 8 | 'plugins.gui', 9 | 'game.joystick', 10 | 11 | 'game.entities.player', 12 | 'game.entities.spike', 13 | 'game.levels.test' 14 | ) 15 | .defines(function(){ 16 | 17 | MyGame = ig.Game.extend({ 18 | 19 | gravity: 300, // All entities are affected by this 20 | 21 | // Load a font 22 | font: new ig.Font( 'media/04b03.font.png' ), 23 | crosshair: new ig.Image('media/crosshair.png'), 24 | pause: false, 25 | player: null, 26 | 27 | init: function() { 28 | // Bind keys 29 | ig.input.bind( ig.KEY.LEFT_ARROW, 'left' ); 30 | ig.input.bind( ig.KEY.RIGHT_ARROW, 'right' ); 31 | ig.input.bind( ig.KEY.X, 'jump' ); 32 | ig.input.bind( ig.KEY.C, 'shoot' ); 33 | 34 | joystick(); 35 | 36 | // Set cursor 37 | ig.gui.cursor.set(this.crosshair); 38 | // Cursor offset (hotspot fix) 39 | ig.gui.cursor.offset = { 40 | x: 8, 41 | y: 8 42 | } 43 | 44 | // Load the LevelTest as required above ('game.level.test') 45 | this.loadLevel( LevelTest ); 46 | }, 47 | 48 | update: function() { 49 | if(ig.game.pause) return; 50 | // Update all entities and BackgroundMaps 51 | this.parent(); 52 | 53 | // screen follows the player 54 | var player = this.getEntitiesByType( EntityPlayer )[0]; 55 | if( player ) { 56 | this.screen.x = player.pos.x - ig.system.width/2; 57 | this.screen.y = player.pos.y - ig.system.height/2; 58 | } 59 | }, 60 | 61 | draw: function() { 62 | // Draw all entities and BackgroundMaps 63 | this.parent(); 64 | 65 | this.font.draw( 'Arrow Keys, X, C', 2, 2 ); 66 | 67 | if(ig.gui.show) ig.gui.draw(); 68 | } 69 | }); 70 | 71 | 72 | // Start the Game with 60fps, a resolution of 240x160, scaled 73 | // up by a factor of 2 74 | ig.main( '#canvas', MyGame, 60, 240, 160, 2 ); 75 | 76 | }); 77 | -------------------------------------------------------------------------------- /demo/lib/plugins/gui.js: -------------------------------------------------------------------------------- 1 | ig.module('plugins.gui') 2 | .requires( 3 | 'impact.game' 4 | ) 5 | .defines(function () { 6 | // Create GUI container 7 | ig.gui = { 8 | // Configuration 9 | show: true, 10 | initialized: false, 11 | 12 | // Mouse and cursor 13 | cursor: { 14 | pos: { x: 0, y: 0 }, 15 | offset: { x: 0, y: 0 }, 16 | image: null, 17 | 18 | set: function(image) { 19 | this.image = image; 20 | }, 21 | 22 | clear: function() { 23 | this.image = null; 24 | }, 25 | 26 | draw: function() { 27 | if(this.image != null) 28 | this.image.draw(this.pos.x - this.offset.x, this.pos.y - this.offset.y); 29 | } 30 | }, 31 | 32 | // Elements 33 | elements: [], 34 | element: { 35 | /* Actions: 36 | getByName, name 37 | getByGroup, name 38 | show, name 39 | showGroup, name 40 | hide, name 41 | hideGroup, name 42 | remove, name 43 | removeGroup, name 44 | enable, name 45 | enableGroup, name 46 | disable, name 47 | disableGroup, name 48 | disableAll 49 | */ 50 | action: function(action, name) { 51 | var collection = []; 52 | for (var i = 0; i < ig.gui.elements.length; i++) { 53 | // getByName 54 | if(action == 'getByName' && ig.gui.elements[i].name == name) 55 | collection.push(ig.gui.elements[i]); 56 | // getByGroup 57 | if(action == 'getByGroup' && ig.gui.elements[i].group == name) 58 | collection.push(ig.gui.elements[i]); 59 | // show 60 | if(action == 'show' && ig.gui.elements[i].name == name) 61 | ig.gui.elements[i].show = true; 62 | // showGroup 63 | if(action == 'showGroup' && ig.gui.elements[i].group == name) 64 | ig.gui.elements[i].show = true; 65 | // hide 66 | if(action == 'hide' && ig.gui.elements[i].name == name) 67 | ig.gui.elements[i].show = false; 68 | // hideGroup 69 | if(action == 'hideGroup' && ig.gui.elements[i].group == name) 70 | ig.gui.elements[i].show = false; 71 | // remove 72 | if(action == 'remove' && ig.gui.elements[i].name == name) 73 | ig.gui.elements.erase(ig.gui.elements[i]); 74 | // removeGroup 75 | if(action == 'removeGroup' && ig.gui.elements[i].group == name) 76 | ig.gui.elements.erase(ig.gui.elements[i]); 77 | // enable 78 | if(action == 'enable' && ig.gui.elements[i].name == name) 79 | ig.gui.elements[i].disable = false; 80 | // enableGroup 81 | if(action == 'enableGroup' && ig.gui.elements[i].group == name) 82 | ig.gui.elements[i].disable = false; 83 | // disable 84 | if(action == 'enable' && ig.gui.elements[i].name == name) 85 | ig.gui.elements[i].disable = true; 86 | // disableGroup 87 | if(action == 'enableGroup' && ig.gui.elements[i].group == name) 88 | ig.gui.elements[i].disable = true; 89 | // disableAll 90 | if(action == 'disableAll') 91 | ig.gui.elements[i].disable = true; 92 | } 93 | if(collection.length) { 94 | if(collection.length == 1) collection = collection[0]; 95 | return collection; 96 | } 97 | }, 98 | 99 | add: function(element) { 100 | if(element.show == undefined) element.show = true; 101 | if(element.disabled == undefined) element.disabled = false; 102 | if(element.active == undefined) element.active = false; 103 | ig.gui.elements.push(element); 104 | }, 105 | 106 | draw: function() { 107 | for (var i = 0; i < ig.gui.elements.length; i++) { 108 | var element = ig.gui.elements[i], 109 | state = 'normal'; 110 | 111 | // Check position & state 112 | if(!element.show) continue; 113 | if(ig.gui.cursor.pos.x >= element.pos.x && ig.gui.cursor.pos.x <= element.pos.x + element.size.x && 114 | ig.gui.cursor.pos.y >= element.pos.y && ig.gui.cursor.pos.y <= element.pos.y + element.size.y && 115 | !element.disabled) { 116 | state = 'hover'; 117 | } 118 | 119 | // Pressed 120 | if(state == 'hover' && (ig.input.state('mouse1') || ig.input.pressed('mouse1'))) { 121 | state = 'active'; 122 | if(ig.input.state('mouse1') && typeof ig.gui.elements[i].mouseDown == 'function') 123 | ig.gui.elements[i].mouseDown.call(element); 124 | if(ig.input.pressed('mouse1')) { 125 | // Toggle (click) 126 | if(element.toggle) 127 | element.active = !element.active; 128 | // Click function 129 | if(typeof ig.gui.elements[i].click == 'function') 130 | ig.gui.elements[i].click.call(element); 131 | } 132 | } 133 | 134 | // Toggle (state) 135 | if(element.toggle && element.active) 136 | state = 'active'; 137 | 138 | // Default state 139 | if(ig.gui.elements[i].state[state] == undefined) 140 | state = 'normal'; 141 | 142 | // Alpha 143 | if(element.alpha != undefined) 144 | ig.system.context.globalAlpha = element.alpha; 145 | 146 | // Image 147 | var image = ig.gui.elements[i].state[state]; 148 | if(isNaN(image.tile) || isNaN(image.tileSize)) { 149 | image.image.draw(element.pos.x, element.pos.y); 150 | } else { 151 | image.image.drawTile(element.pos.x, element.pos.y, image.tile, image.tileSize); 152 | } 153 | 154 | // Restore 155 | ig.system.context.globalAlpha = 1; 156 | } 157 | } 158 | }, 159 | 160 | // Draw 161 | draw: function() { 162 | this.element.draw(); 163 | // Capture mouse 164 | this.cursor.pos = { 165 | x: ig.input.mouse.x, 166 | y: ig.input.mouse.y 167 | } 168 | this.cursor.draw(); 169 | } 170 | } 171 | 172 | // Initialize and draw 173 | ig.Game.inject({ 174 | update: function() { 175 | this.parent(); 176 | 177 | // Initialize GUI 178 | if(ig.gui.initialized) return; else ig.gui.initialized = true; 179 | 180 | // Bind 181 | ig.input.bind(ig.KEY.MOUSE1, 'mouse1'); 182 | } 183 | }); 184 | }); -------------------------------------------------------------------------------- /demo/media/04b03.font.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datamosh/ImpactJS-GUI/b630de5f1235be3ef9cdaa4defa000512c20b1ee/demo/media/04b03.font.png -------------------------------------------------------------------------------- /demo/media/crosshair.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datamosh/ImpactJS-GUI/b630de5f1235be3ef9cdaa4defa000512c20b1ee/demo/media/crosshair.png -------------------------------------------------------------------------------- /demo/media/joystick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datamosh/ImpactJS-GUI/b630de5f1235be3ef9cdaa4defa000512c20b1ee/demo/media/joystick.png -------------------------------------------------------------------------------- /demo/media/player.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datamosh/ImpactJS-GUI/b630de5f1235be3ef9cdaa4defa000512c20b1ee/demo/media/player.png -------------------------------------------------------------------------------- /demo/media/projectile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datamosh/ImpactJS-GUI/b630de5f1235be3ef9cdaa4defa000512c20b1ee/demo/media/projectile.png -------------------------------------------------------------------------------- /demo/media/slime-grenade.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datamosh/ImpactJS-GUI/b630de5f1235be3ef9cdaa4defa000512c20b1ee/demo/media/slime-grenade.png -------------------------------------------------------------------------------- /demo/media/spike.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datamosh/ImpactJS-GUI/b630de5f1235be3ef9cdaa4defa000512c20b1ee/demo/media/spike.png -------------------------------------------------------------------------------- /demo/media/tiles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datamosh/ImpactJS-GUI/b630de5f1235be3ef9cdaa4defa000512c20b1ee/demo/media/tiles.png -------------------------------------------------------------------------------- /gui.js: -------------------------------------------------------------------------------- 1 | ig.module('plugins.gui') 2 | .requires( 3 | 'impact.game' 4 | ) 5 | .defines(function () { 6 | // Create GUI container 7 | ig.gui = { 8 | // Configuration 9 | show: true, 10 | initialized: false, 11 | 12 | // Mouse and cursor 13 | cursor: { 14 | pos: { x: 0, y: 0 }, 15 | offset: { x: 0, y: 0 }, 16 | image: null, 17 | 18 | set: function(image) { 19 | this.image = image; 20 | }, 21 | 22 | clear: function() { 23 | this.image = null; 24 | }, 25 | 26 | draw: function() { 27 | if(this.image != null) 28 | this.image.draw(this.pos.x - this.offset.x, this.pos.y - this.offset.y); 29 | if(this.icon != null) 30 | this.icon.draw(this.pos.x - this.offset.x, this.pos.y - this.offset.y); 31 | } 32 | }, 33 | 34 | // Elements 35 | elements: [], 36 | element: { 37 | /* Actions: 38 | getByName, name 39 | getByGroup, name 40 | show, name 41 | showGroup, name 42 | hide, name 43 | hideGroup, name 44 | toggle, name 45 | toggleGroup, name 46 | remove, name 47 | removeGroup, name 48 | enable, name 49 | enableGroup, name 50 | disable, name 51 | disableGroup, name 52 | disableAll 53 | select, name 54 | selectGroup, name 55 | deSelect, name 56 | deSelectGroup, name 57 | */ 58 | action: function(action, name) { 59 | var collection = []; 60 | for (var i = 0; i < ig.gui.elements.length; i++) { 61 | // getByName 62 | if(action == 'getByName' && ig.gui.elements[i].name == name) 63 | collection.push(ig.gui.elements[i]); 64 | // getByGroup 65 | if(action == 'getByGroup' && ig.gui.elements[i].group == name) 66 | collection.push(ig.gui.elements[i]); 67 | // show 68 | if(action == 'show' && ig.gui.elements[i].name == name) 69 | ig.gui.elements[i].show = true; 70 | // showGroup 71 | if(action == 'showGroup' && ig.gui.elements[i].group == name) 72 | ig.gui.elements[i].show = true; 73 | // hide 74 | if(action == 'hide' && ig.gui.elements[i].name == name) 75 | ig.gui.elements[i].show = false; 76 | // hideGroup 77 | if(action == 'hideGroup' && ig.gui.elements[i].group == name) 78 | ig.gui.elements[i].show = false; 79 | // toggle 80 | if(action == 'toggle' && ig.gui.elements[i].name == name) { 81 | if (ig.gui.elements[i].show) 82 | ig.gui.elements[i].show = false; 83 | else 84 | ig.gui.elements[i].show = true; 85 | } 86 | // toggleGroup 87 | if(action == 'toggleGroup' && ig.gui.elements[i].group == name) { 88 | if (ig.gui.elements[i].show) 89 | ig.gui.elements[i].show = false; 90 | else 91 | ig.gui.elements[i].show = true; 92 | } 93 | // remove 94 | if(action == 'remove' && ig.gui.elements[i].name == name) 95 | ig.gui.elements.erase(ig.gui.elements[i]); 96 | // removeGroup 97 | if(action == 'removeGroup' && ig.gui.elements[i].group == name) 98 | ig.gui.elements.erase(ig.gui.elements[i]); 99 | // enable 100 | if(action == 'enable' && ig.gui.elements[i].name == name) 101 | ig.gui.elements[i].disabled = false; 102 | // enableGroup 103 | if(action == 'enableGroup' && ig.gui.elements[i].group == name) 104 | ig.gui.elements[i].disabled = false; 105 | // disable 106 | if(action == 'disable' && ig.gui.elements[i].name == name) 107 | ig.gui.elements[i].disabled = true; 108 | // disableGroup 109 | if(action == 'disableGroup' && ig.gui.elements[i].group == name) 110 | ig.gui.elements[i].disabled = true; 111 | // disableAll 112 | if(action == 'disableAll') 113 | ig.gui.elements[i].disabled = true; 114 | //select a button 115 | if(action == 'select' && ig.gui.elements[i].name == name) 116 | ig.gui.elements[i].selected = true; 117 | //select a group of buttons 118 | if(action == 'selectGroup' && ig.gui.elements[i].group == name) 119 | ig.gui.elements[i].selected = true; 120 | //deselect a button 121 | if(action == 'deSelect' && ig.gui.elements[i].name == name) 122 | ig.gui.elements[i].selected = false; 123 | //deselect a group of buttons 124 | if(action == 'deSelectGroup' && ig.gui.elements[i].group == name) 125 | ig.gui.elements[i].selected = false; 126 | } 127 | if(collection.length) { 128 | if(collection.length == 1) collection = collection[0]; 129 | return collection; 130 | } 131 | }, 132 | 133 | add: function(element) { 134 | if(element.show == undefined) element.show = true; 135 | if(element.disabled == undefined) element.disabled = false; 136 | if(element.active == undefined) element.active = false; 137 | if(element.showTitle == undefined || (element.font == undefined)) element.showTitle = false; 138 | if(element.showBind == undefined || (element.font == undefined)) element.showBind = false; 139 | if(element.selected == undefined) element.selected = false; 140 | 141 | ig.gui.elements.push(element); 142 | }, 143 | 144 | draw: function() { 145 | for (var i = 0; i < ig.gui.elements.length; i++) { 146 | var element = ig.gui.elements[i]; 147 | var state = 'normal'; 148 | 149 | // Check position & state 150 | if(!element.show) continue; 151 | if(ig.gui.cursor.pos.x >= element.pos.x && ig.gui.cursor.pos.x <= element.pos.x + element.size.x && 152 | ig.gui.cursor.pos.y >= element.pos.y && ig.gui.cursor.pos.y <= element.pos.y + element.size.y) { 153 | state = 'hover'; 154 | } 155 | 156 | // Pressed by Mouse OR Keybind 157 | if((state == 'hover' && (ig.input.state('mouse1') || ig.input.pressed('mouse1'))) || (ig.input.pressed(element.keybind))) { 158 | state = 'active'; 159 | if(ig.input.state('mouse1') && typeof ig.gui.elements[i].mouseDown == 'function') 160 | ig.gui.elements[i].mouseDown.call(element); 161 | if(ig.input.pressed('mouse1') || ig.input.pressed(element.keybind)) { 162 | // Toggle (click) 163 | if(element.toggle) 164 | element.active = !element.active; 165 | // Click function 166 | if(typeof ig.gui.elements[i].click == 'function') 167 | ig.gui.elements[i].click.call(element); 168 | } 169 | } 170 | 171 | // Toggle (state) 172 | if(element.toggle && element.active || element.selected) 173 | state = 'active'; 174 | 175 | // Default state 176 | if(ig.gui.elements[i].state[state] == undefined) 177 | state = 'normal'; 178 | 179 | // Alpha 180 | if(element.alpha != undefined) 181 | ig.system.context.globalAlpha = element.alpha; 182 | 183 | // Image 184 | var image = ig.gui.elements[i].state[state]; 185 | if(isNaN(image.tile) || isNaN(image.tileSize)) 186 | image.image.draw(element.pos.x, element.pos.y); 187 | else 188 | image.image.drawTile(element.pos.x, element.pos.y, image.tile, image.tileSize); 189 | // Icon 190 | var icon = ig.gui.elements[i].icon; 191 | if (element.icon) 192 | icon.draw(element.pos.x, element.pos.y); 193 | // Show Bind 194 | if (element.showBind && element.font) 195 | element.font.draw(element.keybind.substr(0,4).toUpperCase(),element.pos.x+element.size.x-2, element.pos.y, ig.Font.ALIGN.RIGHT); 196 | // Show Title 197 | if (element.showTitle && element.font) 198 | element.font.draw(element.title.toUpperCase(), element.pos.x+3, (element.pos.y+element.size.y)-(element.font.height-2), ig.Font.ALIGN.LEFT); 199 | // Show Count 200 | if (element.count > 1 && element.font) 201 | element.font.draw(element.count,(element.pos.x+element.size.x)-2,(element.pos.y+element.size.y)-(element.font.height-2), ig.Font.ALIGN.RIGHT); 202 | 203 | // Restore 204 | ig.system.context.globalAlpha = 1; 205 | } 206 | } 207 | }, 208 | 209 | // Draw 210 | draw: function() { 211 | this.element.draw(); 212 | // Capture mouse 213 | this.cursor.pos = { 214 | x: ig.input.mouse.x, 215 | y: ig.input.mouse.y 216 | } 217 | this.cursor.draw(); 218 | } 219 | } 220 | 221 | // Initialize and draw 222 | ig.Game.inject({ 223 | update: function() { 224 | this.parent(); 225 | 226 | // Initialize GUI 227 | if(ig.gui.initialized) return; else ig.gui.initialized = true; 228 | 229 | // Bind 230 | ig.input.bind(ig.KEY.MOUSE1, 'mouse1'); 231 | } 232 | }); 233 | }); --------------------------------------------------------------------------------