sprite - I need help on a mini game that i am making in javascript -

-

hell everyone! thank type of help! so, trying make sort of sprite game , have problems loading more sprites. sprites loaded in separated js file. problem not load images , when move around seams crack , don't mean fails fact not load images , there moments when character disappears.

          engine.player = {};             engine.player.sprite = [];            engine.player.spriteindex = 27;//the initial sprite 1 faces south              engine.player.store = function(index, imgsrc) //function store  img           {          var sprite = [new image(), false];          sprite[0].src    = imgsrc;         sprite[0].onload = function()    {       sprite[1] = true;    }     engine.player.sprite[index] = sprite; };    engine.player.retrieve = function(index) {    return engine.player.sprite[index][0]; };     engine.player.allloaded = function()  {    var i;     for(i=0; i<42; i++)//total number of img    {       if(engine.player.sprite[i][1] === false)       {          return false;       }    }     return true; };     engine.player.calcloc = function()//starting calculating possition on screen {    var character = {       width:  math.ceil(engine.player.sprite[0][0].width),       height: math.ceil(engine.player.sprite[0][0].height)    };     var screen = {       width:  engine.screen.width,       height: engine.screen.height    };      var x = (screen.width  / 2) - (character.width / 2);    var y = (screen.height / 2) - (character.height) + 8;      return {left: x, top: y}; };     engine.player.draw = function() {    var loc = engine.player.calcloc();     engine.handle.drawimage(engine.player.sprite[engine.player.spriteindex][0], loc.left, loc.top);//calculating position acordanly top left corner  };     engine.player.move = function(direction) {    var index, x, y;     index = x = y = 0;     engine.keyboard.caninput = false;     switch(direction)//using arrows move player    {       case 'up':    index = 0;  y =  1;     break;        case 'right': index = 24; x = -1;     break;        case 'left':  index = 39; x =  1;     break;        case 'down':  index = 27; y = -1;     break;     }     var tox = engine.viewport.x + (engine.screen.tilesx / 2 - 0.5) - x;    var toy = engine.viewport.y + (engine.screen.tilesy / 2 - 0.5) - y;     if(engine.currentmap[toy] &&       engine.currentmap[toy][tox] &&       engine.currentmap[toy][tox].item)    {       engine.keyboard.caninput = true;    }else{       engine.viewport.playeroffsetx = x * 5;       engine.viewport.playeroffsety = y * 5;        settimeout(engine.player.animate, 200);        settimeout(engine.player.reset, 100);     }     engine.player.spriteindex = index;    engine.draw(); };      engine.player.animate = function() {    var x, y     x = y = 0;     switch(engine.player.spriteindex)/cases face north, south, east, west     {       case 0:   y =  11;    break;       case 24:  x = -11;    break;       case 27:  y = -11;    break;       case 39:  x =  11;    break;    }     engine.player.spriteindex++; //here 1 of 2 possible mistakes       engine.viewport.playeroffsetx = x;    engine.viewport.playeroffsety = y;     engine.draw(); };        engine.player.reset = function() {    var index, x, y;     x     = engine.viewport.x;    y     = engine.viewport.y;    index = 0;    //and here big problem !!! here made mistake @ these switch     switch(engine.player.spriteindex)    {       case 1:       case 2:       case 3:       case 4:       case 5:       case 6:       case 7:       case 8:       case 9:       case 10:       case 11:       case 12:       case 13:       case 14:       case 15:       case 16:       case 17:       case 18:       case 19:       case 20:       case 21:       case 22:       case 23:  y--;    index = 0;  break;        case 25:       case 26:  x++;    index = 24; break;         case 28:       case 29:       case 30:       case 31:       case 32:       case 33:       case 34:       case 35:       case 36:       case 37:       case 38:  y++;        index = 27;   break;        case 40:       case 41:  x--;    index = 39; break;        }     engine.viewport.x = x;    engine.viewport.y = y;     engine.keyboard.caninput = true;     engine.viewport.playeroffsetx = 0;    engine.viewport.playeroffsety = 0;     engine.player.spriteindex = index;     engine.draw(); }

and sprites loaded through these function:

engine.start = function(mapdata, x, y) {    engine.output('starting...');     engine.viewport.x = x;    engine.viewport.y = y;     engine.tile.store(0, 'images/tile_black.png');    engine.tile.store(1, 'images/tile_grass.png');    engine.tile.store(2, 'images/tile_rock.png');     engine.player.store(0, 'images/scientist_n0.png');    engine.player.store(1, 'images/scientist_n1.png');    engine.player.store(2, 'images/scientist_n2.png');    engine.player.store(3, 'images/scientist_n3.png');    engine.player.store(4, 'images/scientist_n4.png');    engine.player.store(5, 'images/scientist_n5.png');    engine.player.store(6, 'images/scientist_n6.png');    engine.player.store(7, 'images/scientist_n7.png');    engine.player.store(8, 'images/scientist_n8.png');    engine.player.store(9, 'images/scientist_n9.png');    engine.player.store(10, 'images/scientist_n10.png');    engine.player.store(11, 'images/scientist_n11.png');    engine.player.store(12, 'images/scientist_n12.png');    engine.player.store(13, 'images/scientist_n13.png');    engine.player.store(14, 'images/scientist_n14.png');    engine.player.store(15, 'images/scientist_n15.png');    engine.player.store(16, 'images/scientist_n16.png');    engine.player.store(17, 'images/scientist_n17.png');    engine.player.store(18, 'images/scientist_n18.png');    engine.player.store(19, 'images/scientist_n19.png');    engine.player.store(20, 'images/scientist_n20.png');    engine.player.store(21, 'images/scientist_n21.png');    engine.player.store(22, 'images/scientist_n22.png');    engine.player.store(23, 'images/scientist_n23.png');     engine.player.store(24, 'images/scientist_e0.png');    engine.player.store(25, 'images/scientist_e1.png');    engine.player.store(26, 'images/scientist_e2.png');     engine.player.store(27, 'images/scientist_s0.png');    engine.player.store(28, 'images/scientist_s1.png');    engine.player.store(29, 'images/scientist_s2.png');    engine.player.store(30, 'images/scientist_s3.png');    engine.player.store(31, 'images/scientist_s4.png');    engine.player.store(32, 'images/scientist_s5.png');    engine.player.store(33, 'images/scientist_s6.png');    engine.player.store(34, 'images/scientist_s7.png');    engine.player.store(35, 'images/scientist_s8.png');    engine.player.store(36, 'images/scientist_s9.png');    engine.player.store(37, 'images/scientist_s10.png');    engine.player.store(38, 'images/scientist_s11.png');     engine.player.store(39,  'images/scientist_w0.png');    engine.player.store(40, 'images/scientist_w1.png');    engine.player.store(41, 'images/scientist_w2.png');      engine.setmap(mapdata);     engine.draw();     engine.keyboard.caninput = true;     engine.output('done'); };

you got lot of images memory matter.

but strategy when you're doing sprites it's have 1 image your player movements : sprite !!!

and have change background position of image make illusion of player running ! it's same thing parralax !

look @ interisting post : http://creativejs.com/2012/01/day-11-sprite-sheets/

in you'll see 2 strategy :

note can sprite sheet animation css , 1 image file : http://jsfiddle.net/simurai/cgmce/

.hi {     width: 50px;     height: 72px;     background-image: url("http://files.simurai.com/misc/sprite.png");      -webkit-animation: play .8s steps(10) infinite;        -moz-animation: play .8s steps(10) infinite;         -ms-animation: play .8s steps(10) infinite;          -o-animation: play .8s steps(10) infinite;             animation: play .8s steps(10) infinite; }  @-webkit-keyframes play {    { background-position:    0px; }      { background-position: -500px; } }  @-moz-keyframes play {    { background-position:    0px; }      { background-position: -500px; } }  @-ms-keyframes play {    { background-position:    0px; }      { background-position: -500px; } }  @-o-keyframes play {    { background-position:    0px; }      { background-position: -500px; } }  @keyframes play {    { background-position:    0px; }      { background-position: -500px; } }

but multi characters ? if i've got lot of ennemies , i*magine 200 hundreds ennemies of 2 types* !

well it's same thing you'll two image animations 1 file per type of character !

hope helps !

if want more informations ask ! love sprite sheet games !


Comments

Post a Comment

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

-
can configure following sample code ? when run following code, error : no entity framework provider found ado.net provider invariant name 'devart.data.sqlite' setting in machine.config <system.data> <dbproviderfactories> <add name="dotconnect sqlite" invariant="devart.data.sqlite" description="devart dotconnect sqlite" type="devart.data.sqlite.sqliteproviderfactory, devart.data.sqlite, version=4.6.287.0, culture=neutral, publickeytoken=09af7300eec23701" /> </dbproviderfactories> </system.data> after add below block code in app.config <?xml version="1.0"?> <configuration>   <configsections> <!-- more information on entity framework configuration, visit http://go.microsoft.com/fwlink/?linkid=237468 --> <section name="entityframework" type="system.data.entity.internal.configfile.entityframeworksection, entit...
Read more

java - Copying object fields -

-
what best way of copying classes when need have 2 independent variables? have simple class: public class myclass { boolean = false; string b= "not empty"; } do need make method : assign(myclass data ) { a= data.a; b= data.b; } is there automatic method copy (duplicate) objects in java? do need make method : pretty close. instead of making method, should make constructor. such constructors called copy constructor , , create them this: myclass(myclass data) { = data.a; b = data.b; } and create copy of instance, use constructor this: myclass obj1 = new myclass(); myclass obj2 = new myclass(obj1); copy constructor can tedious : using copy constructor create deep-copy can tedious, when class has mutable fields. in case, assignment create copy of reference, , not object itself. have create copy of fields (if want deep copy). can go recursive. a better way create deep copy serialize , deserialize object. why not use clone()? ...
Read more

c++ - Clear the memory after returning a vector in a function -

-
i have function processes , stores lot of data in , returns results vector of class. amount of data stored in function tremendous , want clear storage memory of function after finished job. necessary (does function automatically clear memory) or should clear memory function? update: vector<customers> process(char* const *filename, vector<int> id) { vector<customers> list_of_customers; (perform actions) return list_of_customers; } variables defined locally within function automatically released @ end of function scope. destructors objects called, should free memory allocated objects (if objects coded correctly). example of such object std::vector . anything you've allocated new must have corresponding delete release storage. try avoid doing own allocation , use raii instead, i.e. containers or smart pointers.
Read more