Forums » Help » The way to define a sprite on an Entity

The right way to define a sprite for an entity is to use an Animsheet but with only one image? Can I set the images dinamically?

I mean: Randomly choose a letter between A-Z, lets imagine the output is G, then use G.png as the sprite. Would it be possible on a single entity? How?

Thanks!

Couldn't you just put the image for all of them in the same sprite sheet and just change the animation to show each letter? Take a look at this:

http://pointofimpactjs.com/snippets/view/11/set-animation-of-entity-on-spawn

Imagine a Word Soup, which is the right way to generate the random words? I can't see any way of doing it on the link you gave me.

I'm thinking about coding a loop (for every block or tile) random 1-0 beeing 1 a letter and 0 a number
If 1 is chosen, random between A-Z and generate the the word tile.
If 0 is chosen, random between 1-9 and generate the number tile.

The output should be a random generated map like this (again, 1 represents a word and 0 a number)

11101111
11111111
01111011
01111011
01011111

I'm thinking this by learning from the Drop code, what I can't figure out is the way to random and use the IF inside an entity... Should I use a function?

Thank you for answering!

It's hard to figure out what you actually want to do. Here's an answer for my best guess:

Maybe use a BackgroundMap to display your game field?!

Just generate your random 2D array and use it as map data (untested):

// Build the random array
var width = 10;
var height = 10;
var field = [];
for( var y = 0; y < height; y++ ) {
	field[y] = [];
	for( var x = 0; x < width; x++ ) {
		field[y][x] = Math.round( Math.random() ); // 0 or 1
	}
}

// Construct the BackgroundMap
var map = new ig.BackgroundMap( 16, field, 'media/tileset.png' );

// Put the map in the array of background maps to draw.
// Assuming you do this in your game class:
this.backgroundMaps.push( map );

// (otherwise you can access the game instance through ig.game, e.g.:
// ig.game.backgroundMaps.push( map );

I have no idea what your entities are supposed to do though. Can you elaborate?

If you want different sheets just put all the different spritesheets (A.png, B.png, C.png etc) in an array to choose from when you set the animation sheet:

this.letters[0] = "A.png";
this.letters[1] = "B.png";
this.letters[2] = "C.png";

For C:

animSheet: new ig.AnimationSheet( this.letters[2], 16, 16 ),

Or if it's static images (no animations) do what Graphikos said and make one spritesheet with all letters. Then just set the frame to the corresponding letter. So 0 is A, 1 is B, 2 is C etc:

this.addAnim( 'idle', 1, [2] ); // for C

(That is if you want to use entities, if not do what dominic says.)

Before testing the script I'll (as you asked) elaborate my idea...

A picture is worth a thousand words... http://i53.tinypic.com/71odbp.png
This is my game's Concept Art (Top secret :P) made in Photoshop, imagine that instead of only B are random letters from A-Z.

The goal of the game is similar to Bejeweled's (The game where you join gems of the same colour and destroy them to earn points) one. You must click on 2 letters that must be next to each other (No diagonal movement) and swap them to form one of the words displayed at the bottom.
Numbers can't be swaped but they can be used to change any letter near it, if the number is 1 and you choose letter B, then the letter is changed to C. If it is 2 letter B would become D...

Hope it clears up the idea!

I have the same problem.

The reference for Entity says it receive only an AnimationSheet as visual reference for Entity with tha animSheet: AnimationSheet Object.

I want to spawn only a little blocks and stars with 16x16 in size, but I don't know how, cause I don't see in the Class Reference/Entity a way to set a pure 16x16 image.

I try with ig.Image, but don't work.

animSheet: ig.Image("media/myimage.png")

You can always just draw an image...

ig.module(
	'game.entities.block'
)
.requires(
	'impact.entity'
)
.defines(function(){

EntityBlock = ig.Entity.extend({
   
	size: {x:16, y:16},
	img: new ig.Image( 'media/myimage.png' ),	
	
	draw: function() {
		this.img.draw( this.pos.x, this.pos.y );	
	}

});


});

(untested)

animSheet: new ig.AnimationSheet( 'media/myimage.png', 16, 16 ),

Then in your entity's init method, call the entity's addAnim method, to create a default animation, duration 1, that only has the one frame (define it as an array simply of [0]).

You can see examples of things like this in the Drop example source code, in the player entity there is the animSheet declaration, and in the init() method is the call to addAnim to set it up. (Though it uses 0.1 instead of 1 for duration. If there's only one frame it doesn't make any difference.)