nerf / ImpactJS-Plugins

A collection of plugins for the ImpactJS game engine.

ImpactJS - Plugins

Retro High Score Name Field

Plugin Home

This plugin allows you to add a retro style high score name text field to your game. The player uses his / her keyboard to switch each character to the desired letter of the alphabet to make up his / her name.

Usage is really simple:

Include the entity in your module requires: 'game.entities.retrohighscorenamefield'

In your games init function spawn an instance of the entity by passing in two different fonts and the number of characters you need and then save the object returned so that you can ask it for the name later.

	
	this.retroNameField = ig.game.spawnEntity(EntityRetroHighsSoreNameField, x, y, {
		fontNormal: this.fontNormal,
		fontHighlighted: this.fontHighlighted,
		numberOfChars: 3, // Optional, defaults to 3
		letterSpacing: 20 // Optional, defaults to 20
	});
	

To get the name after saying the Enter key was pressed simply call getName()

	this.retroNameField.getName()

---

TextureAtlas, TextureAtlasAnimation and TextureAtlasImage

This plugin allows you to create a TextureAtlas from TexturePacker or ShoeBox output and then create animation objects by referring to frames of different sizes by name.

A demo has been included for your convenience, just copy in your impact folder

Usage is really simple:

1. Add all the images you need to TexturePacker and then publish your atlas image, making sure to select JSON-ARRAY as the data format.
2. Assign the JSON array from TexturePacker to a varaiable in packed-textures.js

   
   	// This module holds our TexturePacker exported JSON arrays
   	ig.PackedTextures = {
   		spacepods: {
   			"frames": [
   			{
   				....
   			}],
   			"meta": {
   			   ....
   			}
   		}
   	};
   	

3. Include the plugin and your packed texure data in your main.js requires()

   
   	ig.module( 
   		'game.main' 
   	)
   	.requires(
   		'impact.game',
   		'plugins.texture-atlas', // Include the plugin
   		'plugins.packed-textures', // Include the TexturePacker JSON array for the texture atlas
   		'game.entities.pod'
   	)
   	

4. Create a TextureAtlas object in your main.js

   
   	MyGame = ig.Game.extend({
   		textureAtlas: new ig.TextureAtlas(new ig.Image('media/sprites.png'), ig.PackedTextures.sprites),
   		pod: null,
   	init: function() {
   		this.pod = ig.game.spawnEntity(EntityPod, 0, 0);
   	}
   });
   </code></pre>
   </li>
   <li>Lastly add an animation to your entity using the texture atlas
   <pre><code>
   EntityPod = ig.Entity.extend({
   	// create own texture-atlas
   	// textureAtlas: new ig.TextureAtlas(new ig.Image('media/sprites.png'), ig.PackedTextures.sprites),
   
   	init: function( x, y, settings ) {
   		this.parent( x, y, settings );
   		this.textureAtlas = ig.game.textureAtlas; // use main texture-atlas
   		// Entity addAtlasAnim: function(name, frameTime, sequence, stop, maintainFrameOffset)
   		this.addAtlasAnim('idle', 1, [1, 2], false); // Add texture atlas animation
   	}
   });
   </code></pre>
   </li>
   <li>Or if you just need a static image to your entity using the texture atlas
   <pre><code>
   EntityButton = ig.Entity.extend({
   	backgroundImage: null,
   	init: function( x, y, settings ) {
   		this.parent( x, y, settings );
   		// TextureAtlasImage init: function(textureAtlas, frameName, maintainFrameOffset)
   		this.backgroundImage = new ig.TextureAtlasImage(ig.game.textureAtlas, 'ButtonBg.png', true);
   	}
   });
   </code></pre>
   </li>
       <li>Or if you want to load a font using the texture atlas
   <pre><code>
   this.font = new ig.TextureAtlasFont(ig.game.textureAtlas, '04b03.font.png', true);
   </code></pre>
   </li>
   <li>If you're using ShoeBox which is awesome and free, then you will want to update your export settings
   <pre><code>
   outer: 		{"frames": [\n@loop]\n,"meta": {\n\t"app": "ShoeBox",\n\t"size": {"w":@W,"h":@H}\n}\n}
   format:		\t{\n\t\t"filename": "@id", "rotated": false,"trimmed": true,\n\t\t"frame": {"x":@x,"y":@y,"w":@w,"h":@h},\n\t\t"spriteSourceSize": {"x":@fx,"y":@fy,"w":@fw,"h":@fh},\n\t\t"sourceSize": {"w":@fw,"h":@fh}\n\t},\n
   </code></pre>
   </li>