2D Map tile animation

Post your help queries and engine programming questions here

2D Map tile animation

Postby Epsilon » Sat Oct 03, 2015 4:37 pm

Hello, Community!

I am creating a simple multiplayer game, it's based on Boulder Dash, Earth Shaker etc "boulder-avoid-crystall-collecting" game. What I am trying to achive is an animated map tiles. I know how to make static tiles, they are working very good with 60 fps.

http://epsiloncool.ru/i/E20151003-202754.png

Now I am trying to get how I can make animation for some tiles objects like Fires and Bubbles for example. Is it only possible by converting them to entities and attach animation objects to each? What the best practice may you recommend?

Thanks.
ZX Spectrum fan and game developer in the past. Wanna be game developer in present again.
User avatar
Epsilon
 
Posts: 13
Joined: Sat Sep 26, 2015 9:40 pm
Location: Russian Federation

Re: 2D Map tile animation

Postby rob » Sat Oct 03, 2015 6:02 pm

This is an interesting question... on the one hand everything is easier if it is all a single tile map but then it is fast because it doesn't change so the engine can cache entire sections to speed everything up...

If you want animation on a tile then I believe like you said that converting those tiles to entities might be a better option.
CEO & Lead Developer
Irrelon Software Limited
http://www.isogenicengine.com
User avatar
rob
Site Admin
 
Posts: 316
Joined: Tue Oct 22, 2013 5:08 pm

Re: 2D Map tile animation

Postby Epsilon » Sat Oct 03, 2015 6:14 pm

rob wrote:This is an interesting question... on the one hand everything is easier if it is all a single tile map but then it is fast because it doesn't change so the engine can cache entire sections to speed everything up...

If you want animation on a tile then I believe like you said that converting those tiles to entities might be a better option.


Ok, I've just got I have almost all of them are movable objects so I will need to convert them to entities anyway. Thanks, will try this.
ZX Spectrum fan and game developer in the past. Wanna be game developer in present again.
User avatar
Epsilon
 
Posts: 13
Joined: Sat Sep 26, 2015 9:40 pm
Location: Russian Federation

Re: 2D Map tile animation

Postby rob » Sat Oct 03, 2015 10:32 pm

You could actually only animate when a tile changes? Maybe spawn a particle emitter over the tile as it changes to give the illusion of movement when really you just swap the image out... that way you can keep the tiles on the tilemap for performance but still have some nice animation / effects?
CEO & Lead Developer
Irrelon Software Limited
http://www.isogenicengine.com
User avatar
rob
Site Admin
 
Posts: 316
Joined: Tue Oct 22, 2013 5:08 pm

Re: 2D Map tile animation

Postby Epsilon » Sun Oct 04, 2015 1:11 am

rob wrote:You could actually only animate when a tile changes? Maybe spawn a particle emitter over the tile as it changes to give the illusion of movement when really you just swap the image out... that way you can keep the tiles on the tilemap for performance but still have some nice animation / effects?


Good idea too, but actually I have static items (for example, walls) which will be changed very rare and do not animating. And there also moveable items, for example "bubbles", which is animating and also could be moved around the map.

Btw I've already checked tile-to-entity conversion with animation addition and it works very fine. I didn't see any slowness still.

[youtube]https://youtu.be/o-7MyATtjMw[/youtube]

Thanks.
ZX Spectrum fan and game developer in the past. Wanna be game developer in present again.
User avatar
Epsilon
 
Posts: 13
Joined: Sat Sep 26, 2015 9:40 pm
Location: Russian Federation

Re: 2D Map tile animation

Postby Epsilon » Sun Oct 04, 2015 5:35 am

Hi Rob

Sorry for bother you again. I've moved tile-to-entity logic to the server and let the server making a conversion and then translate ready entities to clients.

But I found that not all properties actially sending from server. I see at least position and dimensions were sent, but animation type and object type was not sent.

Well, I've used your example "13.7-server-load-tiled" as a start point to solve this issue, but I see you are assigning object types at the client, not at server. My MapEntity object is a equivalent of your "Character" object, it extends IgeEntityBox2d.

The question is what is the best technique to transfer additional data (in IgeEntity successors) from server to clients?

Thanks.

Here is the code of MapEntity. What I need is to transfer _mapEntityType and _mapEntityFrame to clients to let them create proper animation and start it.

Code: Select all
// Moving map items
var MapEntity = IgeEntityBox2d.extend({
   classId: 'MapEntity',

   init: function () {
      var self = this;
      IgeEntityBox2d.prototype.init.call(this);

      // Setup the entity
      self.depth(1)
         .bounds2d(32, 32)
         .isometric(false);

      self.imageEntity = new IgeEntity()
         .addComponent(IgeAnimationComponent);

      // Load the character texture file
      if (ige.isClient) {
         this._mapEntityTexture = new IgeSpriteSheet('./assets/esgfx.png', [
               [64, 96, 32, 32, 'fire0'],
               [64, 128, 32, 32, 'fire1'],
               [64, 160, 32, 32, 'fire2'],
               [64, 192, 32, 32, 'fire3'],
               [96, 224, 32, 32, 'bubble0'],
               [96, 256, 32, 32, 'bubble1'],
               [96, 288, 32, 32, 'bubble2'],
               [96, 320, 32, 32, 'bubble3']
            ]);

         // Wait for the texture to load
         this._mapEntityTexture.on('loaded', function () {
            // Create a character entity as a child of this container
            self.imageEntity
               .id(self.id() + '_image')
               .drawBounds(false)
               .drawBoundsData(false)
               .texture(self._mapEntityTexture)
               .dimensionsFromCell()
               .mount(self);
         
            self._setType(self.imageEntity._mapEntityType, self.imageEntity._mapEntityFrame);
         
         }, false, true);
      }
   },

   _setType: function (type, frame) {
      var aphases = {
         'f': ['fire0', 'fire1', 'fire2', 'fire3'],
         'b': ['bubble0', 'bubble1', 'bubble2', 'bubble3']
      };

      var z;
      var c_anim = [null];
                  
      if (type in aphases) {
         var p = frame % (aphases[type].length);
         c_anim = [];
         for (z = p; z < aphases[type].length; z ++) {
            c_anim.push(aphases[type][z]);
         }
         for (z = 0; z < p; z ++) {
            c_anim.push(aphases[type][z]);
         }
      }
      this.imageEntity
         .animation.define('def', c_anim, 8, -1, true)
         .animation.select('def')
         .animation.start('def')
         .cell(c_anim[0]);
   
      return this;
   },

   startAnimation: function () {
      this.imageEntity.animation.start('def');
      
      return this;
   },

   /**
    * Sets the type of entity which determines the entity's
    * animation sequences and appearance.
    * @param {char} type 'b', 'f': 'f' for fire, 'b' for bubble
    * @return {*}
    */
   setType: function (type, frame) {
      
      this.imageEntity._mapEntityType = type;
      this.imageEntity._mapEntityFrame = frame;
      return this;
   },

   destroy: function () {
      // Destroy the texture object
      if (this._mapEntityTexture) {
         this._mapEntityTexture.destroy();
      }

      // Call the super class
      IgeEntityBox2d.prototype.destroy.call(this);
   }
});

if (typeof(module) !== 'undefined' && typeof(module.exports) !== 'undefined') { module.exports = MapEntity; }
ZX Spectrum fan and game developer in the past. Wanna be game developer in present again.
User avatar
Epsilon
 
Posts: 13
Joined: Sat Sep 26, 2015 9:40 pm
Location: Russian Federation

Re: 2D Map tile animation

Postby Epsilon » Sun Oct 04, 2015 6:28 am

Ok, I think I found it by myself. In "24.1-network-stream" there is a great example of how to add custom data to stream and handle it.

Who interested: check for streamSectionData method in gameClasses/Rotator.js.

Thanks!
ZX Spectrum fan and game developer in the past. Wanna be game developer in present again.
User avatar
Epsilon
 
Posts: 13
Joined: Sat Sep 26, 2015 9:40 pm
Location: Russian Federation

Re: 2D Map tile animation

Postby rob » Sun Oct 04, 2015 10:24 am

You beat me to it :). You can also check out streamProperty(). It was added recently and I added a quick example in the forum:

viewtopic.php?f=8&t=526&p=1653

:)
CEO & Lead Developer
Irrelon Software Limited
http://www.isogenicengine.com
User avatar
rob
Site Admin
 
Posts: 316
Joined: Tue Oct 22, 2013 5:08 pm


Return to Help & Questions

Who is online

Users browsing this forum: No registered users and 1 guest