Add player sprite dynamically

586 views
Skip to first unread message

seeseekey

unread,
Jun 26, 2013, 2:49:18 PM6/26/13
to mel...@googlegroups.com
Hello,

i look into the melonJS examples and i see that the player sprite in the examples is defined in the tmx file like this:

 <objectgroup color="#00ff00" name="Entities" width="32" height="24">
  <object name="mainPlayer" x="128" y="256" width="32" height="32">
   <properties>
    <property name="image" value="gripe_run_right"/>
    <property name="spritewidth" value="64"/>
   </properties>
  </object>

Is there a example how i can add my player sprite dynamically without add them to the tmx file?

Aaron McLeod

unread,
Jun 26, 2013, 2:51:14 PM6/26/13
to mel...@googlegroups.com
You can add objects to the game via 

me.game.add(player, 100); 
me.game.sort();

The first parameter being the player object, the second is the z-index to add the player at. Use a number that makes sense, depending on what you're already rendering. Then you call sort, so all objects will be resorted depending on their z-index.



--
You received this message because you are subscribed to the Google Groups "melonJS - A lightweight HTML5 game engine" group.
To unsubscribe from this group and stop receiving emails from it, send an email to melonjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 



--
Aaron McLeod
http://agmprojects.com

seeseekey

unread,
Jun 27, 2013, 9:08:50 AM6/27/13
to mel...@googlegroups.com
Hi,


You can add objects to the game via 

me.game.add(player, 100); 
me.game.sort();

The first parameter being the player object, the second is the z-index to add the player at. Use a number that makes sense, depending on what you're already rendering. Then you call sort, so all objects will be resorted depending on their z-index.

in the onload function of my minimal sample (http://paste.invertika.org/971) i try to load the entity and add it with me.game.add but only the map is loading:

        onload: function(data) {
                        me.levelDirector.loadLevel("desert");
                 
                              me.game.add(me.game.PlayerEntity, 100);
                                me.game.sort();
                      
                           // add our player entity in the entity pool
                           me.entityPool.add("mainPlayer", me.game.PlayerEntity);
        }

Any idea why the entity is not displayed? Did i miss something?

melonJS

unread,
Jun 27, 2013, 10:00:39 PM6/27/13
to mel...@googlegroups.com

first of all the entityPool.add function is only required to automatically add entity or if you want to use the object pooling feature, if you want to do so manually you don't need it. 

your issue here is that you pass an object definition to the game.add function, and not an object instance (that the function expect).

have a look at the FAQ, here below, the question 4 is about object pooling, but explains first how to manually add objects :
https://github.com/melonjs/melonJS/wiki/Frequently-Asked-Questions#wiki-object_pooling

On a side note, I would also avoid reusing the me,game namespace as you cannot have any guarantee that we won;'t add anything later that would then maybe conflict with what we added (Just to be save you hours of debugging)

melonJS

unread,
Jun 27, 2013, 10:01:32 PM6/27/13
to mel...@googlegroups.com

first of all the entityPool.add function is only required to automatically add entity or if you want to use the object pooling feature, if you want to do so manually you don't need it. 

your issue here is that you pass an object definition to the game.add function, and not an object instance (that the function expect).

have a look at the FAQ, here below, the question 4 is about object pooling, but explains first how to manually add objects :
https://github.com/melonjs/melonJS/wiki/Frequently-Asked-Questions#wiki-object_pooling

On a side note, I would also avoid reusing the me,game namespace as you cannot have any guarantee that we won;'t add anything later that would then maybe conflict with what we added (Just to be save you hours of debugging)

On Thursday, June 27, 2013 9:08:50 PM UTC+8, seeseekey wrote:

seeseekey

unread,
Jul 14, 2013, 11:04:46 AM7/14/13
to mel...@googlegroups.com
Thanks. Works :)

sreen...@gmail.com

unread,
Dec 10, 2013, 11:37:52 AM12/10/13
to mel...@googlegroups.com

HI i have a issue . not able to instanicate the objectEntity. here is my code . can sombody help me plz. 

i want to creare a dyamic  objectEntity on every mouse click.


 //game class
 me.entityPool.add("EnemyEntity", game.EnemyEntity);
 
  me.input.registerPointerEvent("mousedown", me.game.viewport, function (event) 
       {
            me.event.publish("mousedown", [ event ]);
        });
  this.mouseDown = me.event.subscribe("mousedown", function (event) 
       {
           // console.log(event.pointerId, event.gameX, event.gameY); // etc ...
            
            var bullet = me.entityPool.newInstanceOf("EnemyEntity", event.gameX, event.gameY,{});
            
        });

//EnemyEntity class
game.EnemyEntity = me.ObjectEntity.extend({
    init: function(x, y, settings) {

    // define this here instead of tiled
        settings.image = "wheelie_right";
        settings.spritewidth = 32;
  console.log("ENEMY ENTITY CREATED");
        // call the parent constructor
        this.parent(x, y, settings);
},
update: function() {
 this.updateMovement();
}
});

Aaron McLeod

unread,
Dec 11, 2013, 8:34:26 AM12/11/13
to mel...@googlegroups.com
Hello.

The enemy needs to be added to the world as well. When parsing any object layers in Tiled, Melon automatically adds each entity for you, it just needs you to setup the entity pool (as you have) in the code. After your call newInstanceOf and set it to the local variable bullet, you need to add it

me.game.world.addChild(bullet);

Now, you'll need to set the z property high enough on the bullet to ensure it renders ontop of everything else that you want it to. You can in the constructor, set it to 999:

game.EnemyEntity = me.ObjectEntity.extend({
    init: function(x, y, settings) {

     // define this here instead of tiled
        settings.image = "wheelie_right";
        settings.spritewidth = 32;
  console.log("ENEMY ENTITY CREATED");
        // call the parent constructor
        this.parent(x, y, settings);
        this.z = 999;
},
update: function() {
this.parent(); // add this by the way
  this.updateMovement();
                return true;
}
});

I also added a couple notes to the update function. You need to invoke the parent's/super class update. Also the return true is so that the object will be redrawn on this loop. Typically, you'll want to code it so you only return true when you need to. The tutorial checks the velocity of the entity to see if the enemy should be repainted.


--
You received this message because you are subscribed to the Google Groups "melonJS - A lightweight HTML5 game engine" group.
To unsubscribe from this group and stop receiving emails from it, send an email to melonjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

herrucules

unread,
Jan 13, 2014, 10:38:21 AM1/13/14
to mel...@googlegroups.com
Hi, 

I'm having problem while adding dynamic object or via entitypool. I've added the spritewidth, & image settings and set the z index after that. but my game just stops it loop, right after the object added to the world

var fb = me.entityPool.newInstanceOf('fireball',this.x, this.y, 'left');
me.game.world.addChild(fb);

I'm using the 0.9.11 

Help needed... thanks in advance.

Aaron McLeod

unread,
Jan 13, 2014, 10:39:46 AM1/13/14
to mel...@googlegroups.com
Sounds like you are likely receiving an error. Are you seeing anything come up in the developer console?

herrud...@gmail.com

unread,
Jan 13, 2014, 12:36:57 PM1/13/14
to mel...@googlegroups.com
Hi Aaron, 

here is a snippet of my update function

update: function(){ 
 ...
 if(this.input.isKeyPressed('fire')){
 var fb = me.entityPool.newInstanceOf('fireball',this.x, this.y, 'left');
 me.game.world.addChild(fb);
 console.log('add new fireball');
 }

 // calcluation of my vel
 console.log('moving just fine');
 this.updateMovement();
 ... // and so on return true/false
}

before I pressed fire key, the console logging 'moving just fine' but after I pressed the fire key, the console log 'add new fireball' and 'moving jsut fine' and stops after that. and some of my objects on the game suddenly disappeared.

any clue? 

Aaron McLeod

unread,
Jan 13, 2014, 12:53:03 PM1/13/14
to mel...@googlegroups.com
I have to say I'm really not sure. The code itself looks fine. Are you able to link the working copy of your game?. Can also try removing or commenting out the updateMovement(), see if maybe some collision issue is causing the crash. your character won't move, but you can still try to shoot bullets and see what happens.

herrud...@gmail.com

unread,
Jan 13, 2014, 8:46:05 PM1/13/14
to mel...@googlegroups.com
Hi2 again Aaron,

I have tried to comment the updateMovement() on both objects, the playerentity and on the TestFire but the game is still stopped (or crashed if you say so).



drag the player char and dont hit the solid collision or the coin shot by the enemy (the coin shot by the enemy i'm using the same code on the example using Tiled on the object instantiation, so it's not dynamically added)

press space to fire the TestFire(js/entities/entity.js line 145) from the playerentity(js/entities/entity.js line 54), and that's where my problem begins..

Thanks for reviewing my code and helping me out Aaron.

Aaron McLeod

unread,
Jan 13, 2014, 9:13:53 PM1/13/14
to mel...@googlegroups.com
Not sure how i missed it before, but when you initialized the TestFire, you called this.x and this.y. You probably want to pass this.pos.x and this.pos.y.

Also you probably shouldnt be loading createjs in the page at the same time. Seems rather unnecessary :)

Aaron McLeod

unread,
Jan 13, 2014, 9:15:41 PM1/13/14
to mel...@googlegroups.com
Also remove all of these from your updates:

if(!this.inViewport){
           return false;
        }

The engine basically does that for you.

herrud...@gmail.com

unread,
Jan 14, 2014, 4:02:42 AM1/14/14
to mel...@googlegroups.com
aaaah that's it, aaah I felt so embarrased, I missed out the pos var before passing the x and y

thank you soo much for your enlightment and time Aaron.

and about the soundjs, I'm using it because when I open melonjs on android browser, the sound is not playing, 
after checking out the source code of melonjs, there's a line that have a conditional statement if ismobile sound_enable = false; is there any way that I can trigger the sound to play if it's on mobile browser?

and thanks again :)

melonJS

unread,
Jan 14, 2014, 4:36:46 AM1/14/14
to mel...@googlegroups.com, herrud...@gmail.com
Unfortunately the only way to support sound on mobile with melonJS 0.9.x is through a wrapper like cocoonJS. melonsJS 0.9.x implements Audio only using the standard Audio HTML5 tags that is poorly supported by mobile.

with the next 1.0.0 (currently in development), we have however added web audio support, which will give audio support on mobile straight out of the box :)
Reply all
Reply to author
Forward
0 new messages