Classes

Dialog

The Dialog class is capable of generating a nine-slice-scaled dialog window, from nine predefined Sprite assets, this type of mechanism facilitates the creation of stretchable dialog windows that do not distort at the corners. This means you can animate the length and width properties to create some nice effects. Once you create one Dialog entity, you can instantiate it again and again, overriding any property you wish. Very useful especially if your game has lots of text bubbles for example. The main requirement when using this class is you need to have nine Sprite assets previously initialized in GAME.initAssets().

TIP: Dialogs are quasi-first class objects! What this means is that a dialog entity can only do some of the same stuff that a Sprite entity can. For example, you can make a Dialog entity size, slide, move, fade, etc.. Some exceptions are: tint, rotate, spin

The following example shows you how to properly initialize a Dialog:


	GAME.initAssets(function(){
		GAME.Sprite.asset('dialogs.png', {name:'dtl', width:16, height:16, offsetX:3, offsetY:0});
		GAME.Sprite.asset('dialogs.png', {name:'dtm', width:16, height:16, offsetX:4, offsetY:0});
		GAME.Sprite.asset('dialogs.png', {name:'dtr', width:16, height:16, offsetX:5, offsetY:0});
		GAME.Sprite.asset('dialogs.png', {name:'dml', width:16, height:16, offsetX:3, offsetY:1});
		GAME.Sprite.asset('dialogs.png', {name:'dmm', width:16, height:16, offsetX:4, offsetY:1});
		GAME.Sprite.asset('dialogs.png', {name:'dmr', width:16, height:16, offsetX:5, offsetY:1});
		GAME.Sprite.asset('dialogs.png', {name:'dbl', width:16, height:16, offsetX:3, offsetY:2});
		GAME.Sprite.asset('dialogs.png', {name:'dbm', width:16, height:16, offsetX:4, offsetY:2});
		GAME.Sprite.asset('dialogs.png', {name:'dbr', width:16, height:16, offsetX:5, offsetY:2});	
		
		GAME.Dialog.asset({
			name: 'dialog',
			tl: 'dtl', // top left (top left corner)
			tm: 'dtm', // top middle
			tr: 'dtr', // top right (top right corner)
			ml: 'dml', // middle left
			mm: 'dmm', // middle middle
			mr: 'dmr', // middle right
			bl: 'dbl', // bottom left (bottom left corner)
			bm: 'dbm', // bottom middle
			br: 'dbr'  // bottom right (bottom right corner)
		})
	});

NOTE: the offsetX and offsetY values in the above example are spritesheet offsets. The offsets are based off multiples of the width/height.

Methods (static)

Name Parameter Type Description
assetinitializes a resource asset to be used as a reference in the creation of entities. Its only parameter is an options object literal with the following required properties.
* options.nameStringname of asset.
* options.tlStringtop left Sprite asset (top left corner).
* options.tmStringtop middle Sprite asset.
* options.trStringtop right Sprite asset (top right corner).
* options.mlStringmiddle left Sprite asset.
* options.mmStringmiddle middle Sprite asset.
* options.mrStringmiddle right Sprite asset.
* options.blStringbottom left Sprite asset (bottom left corner).
* options.bmStringbottom middle Sprite asset.
* options.brStringbottom right Sprite asset (bottom right corner).
createcreates an entity object to be used for instantiating in Rooms.
* assetNameStringexisting asset name.
options.nameStringname of new entity. This is optional; if none provided, defaults to assetName.
* options.widthNumbertotal width (including the repeating borders). This can be dynamically resized at run-time.
* options.heightNumbertotal height (including the repeating borders). This can be dynamically resized at run-time.
options.originXNumberthe registration X value; between 0-1. 0.5 means middle. (default: 0)
options.originYNumberthe registration Y value; between 0-1. 0.5 means middle. (default: 0)
options.foregroundBooleanif set to TRUE, Dialog will appear in front of non-foregound entities. (default: FALSE)
options.alphaNumberalpha transparency, with 0 being fully transparent and 1 being fully opaque. (default: 1)
createChildcreates a child entity object to be used for instantiating in Rooms.
* entityNameStringname of an existing entity to clone.
options.???Mixedsame as create options.
addinstantiates an entity object into the current Room.
* entityNameStringname of existing entity reference to instantiate.
* options.xNumberx coordinate to place in game.
* options.yNumbery coordinate to place in game.
options.???Objectsame as create options; name not required.

Properties (object)

Name Type Description
xNumberthe x coordinate to place in game.
yNumberthe y coordinate to place in game.
alphaNumberthe alpha transparency, with 0 being fully transparent and 1 being fully opaque.
textObjectAn existing Text entity can be assigned to a Dialog. This means that the text object can leverage its containing Dialog's properties. For example, when creating a Dialog, you can accurately position the text object relative to itself, and conversely, you can dynamically adjust the Dialog's width and height to match the new Text object's width and height.

Assigning a Text entity to a Dialog also means that when then the Dialog is faded out or destroyed, all of its associated elements are also faded out and/or destroyed.


	GAME.initInterface(function(){
		var dialog = GAME.Dialog.create('dialog', {name:'dialog', width:200, height:100});

		dialog.onCreate(function(obj){

			var content = 'Hello World, this is JackyJS!';

			obj.text = GAME.Text.add('test', {
				name: 'dialogText',
				x: obj.x-obj.width/2,
				y: obj.y-obj.height/2,
				originX: 0,
				originY: 0,
				content: content,
				foreground: true,
				style: {
						wordWrapWidth: obj.width,
						dropShadowDistance: 1,
						dropShadow: true,
						fill: '#ffff00'
					}
				});

			obj.size({width:obj.text.width, height:obj.text.height}, function(obj){
				obj.text.x = obj.x-obj.width/2;
				obj.text.y = obj.y-obj.height/2;
			});

			obj.fadeIn({time:500, easing:true, alpha:0.90});
		});	
		
	});

Methods (object)

Name Parameter Type Description
sizesizes a dialog window in real-time. This can be used to dynamically adjust the window dimensions according its containing text width. See above example for details.
* options.widthNumberthe new width.
* options.heightNumberthe new height.
options.timeNumberthe time duration, in milliseconds, of the effect. (default: 200)

Events (object)

See Core > Entity : Events for available events.