Images in a graphiclist are not moving at the same time

(Linck) #1

So I have this little class, meant to be a baloon text box:

package interface_elements
{
	
	import assets.Assets;
	import net.flashpunk.Entity;
	import net.flashpunk.FP;
	import net.flashpunk.graphics.Graphiclist;
	import net.flashpunk.graphics.Image;
	
	public class TextBaloon extends Entity
	{
		private var borderLeft:Image;
		private var borderRight:Image;
		private var borderBottom:Image;
		private var borderTop:Image;
		private var borderLowerLeft:Image;
		private var borderLowerRight:Image;
		private var borderUpperLeft:Image;
		private var borderUpperRight:Image;
		private var pointer:Image;
		
		private var baloonGraphics:Graphiclist;
		
		public function TextBaloon(x:Number, y:Number)
		{
			borderLeft = new Image(Assets.TEXT_BALOON_LEFT);
			borderRight = new Image(Assets.TEXT_BALOON_RIGHT);
			borderBottom = new Image(Assets.TEXT_BALOON_BOTTOM);
			borderTop = new Image(Assets.TEXT_BALOON_TOP);
			borderLowerLeft = new Image(Assets.TEXT_BALOON_LOWER_LEFT);
			borderLowerRight = new Image(Assets.TEXT_BALOON_LOWER_RIGHT);
			borderUpperLeft = new Image(Assets.TEXT_BALOON_UPPER_LEFT);
			borderUpperRight = new Image(Assets.TEXT_BALOON_UPPER_RIGHT);
			pointer = new Image(Assets.TEXT_BALOON_POINTER);
			
			baloonGraphics = new Graphiclist();
			
			baloonGraphics.add(borderTop);
			baloonGraphics.add(borderUpperLeft);
			
			borderTop.scaleX = 50;
			borderTop.x = borderUpperLeft.scaledWidth;
			
			baloonGraphics.x = 120;
			baloonGraphics.y = 120;
			
			super(x, y, baloonGraphics, null);
		}
		
		override public function update():void {
			
			
			baloonGraphics.x += FP.elapsed * 2;
			
			
		}
	}
}

This is the class I was starting to do. You se there is an update that moves the graphiclist to the left, but the problem is the two images contained in the graphic list are not moving at the same time. The first image is moving in a more delayed motion, creating a gap between them.

And I noticed that if I take out the FP.elapsed and leave just a “+= 2”, that doesn’t happen.

Does anyone have any idea what is causing the problem?

(Jacob Albano) #2

It’s probably because rendering is snapped to pixels. When you move with 2 * FP.elapsed, it results in a fractional number and may result in the appearance that one image is lagging behind.

(Linck) #3

Makes a little bit of sense. I noticed that there is a problem adding fractional numbers. Even writting " += 2.233 " it doesn’t work. It has to be integers. So I did this:

override public function update():void {
			
			var convertedValue:int = 0;
			
			valueToIncrense += FP.elapsed * 2;
			while(valueToIncrense > 1){
				valueToIncrense -= 1;
				convertedValue += 1;
			}
			
			
			baloonGraphics.x += convertedValue;
			
			
		}

Does it seem like something reasonable? It works…

Whats wrong with this?
(Jacob Albano) #4

That’s actually a really good way of doing things. You store the real value so it can accumulate, but only use a value that the renderer can make use of.

(Bora Kasap) #5

i’ve tried to solve a similar problem for my game, and, after using different ways for a long time i’ve decided in the way which you’ve used…

(Zachary Lewis) #7

I’ve always favored physics notation, for acceleration, velocity and position; a, v and s. I use those variables to separate the computed location and the drawn location. My update functions usually look something like this:

override public function update():void
{
  // Update acceleration based on input.
  // In this case, I'm just applying gravity.
  a.x = 0;
  a.y = GRAVITY;

  // Update velocity based on acceleration.
  v.x += a.x * FP.elapsed;
  v.y += a.y * FP.elapsed;

  // Update position based on velocity.
  // This value won't get rounded and persists across updates.
  s.x += v.x * FP.elapsed;
  s.y += v.y * FP.elapsed;

  // Perform collision checks based on the actual position.
  if(collide("whatever", s.x, s.y))
  {
    // Handle collision. Woo.
  }

  // Finally, at the very end of the update function set the pixel-snapped
  // render location. I'll floor the location to prevent any rounding jitter.
  x = Math.floor(s.x);
  y = Math.floor(s.y);
}
(Ultima2876) #8

I usually prefer using int(s.x) and int(s.y) - Math. functions are very slow!

Using suvat notation is interesting for sure though.