Jump to content
Sign in to follow this  
Czar

Tw3Sprite - flash problem

Recommended Posts

When you set the background of a tw3sprite there is a noticeable flash when you switch from one image to another. I am using different PNGs for simple animation but I cannot seem to prevent the momentary blip where nothing is drawn.

e.g., if I am displaying walking animation and I switch to the following

sprite.Handle.style['background'] := 'res/girlidle.png';

there is a flicker on the screen. Not too noticeable in chrome but it is in my embedded chromium app and in the internal server.

How can I prevent the screen updating until new background has loaded?

 

Is that even possible?

Alternatively is it possible to double buffer the form?

 

I have attached an example. It flashes horribly in internal browser, hardly never in chrome but I would ideally love no flash even in internal browser as it is similar to the situation i want to use it in

 

 

 

 

 

tw3spritex_flash.rar

2018-08-15_13-52-31.gif

Share this post


Link to post
Share on other sites

I think I may have solved it by preloading the images into a tw3image

The following solved my flash issue - posting for completeness. And yes the procedure can be simpler

procedure TForm1.PreloadImages(MyImage : tw3image; MyImageName : string);
begin
  MyImage.visible := false;
  MyImage.LoadFromUrl(MyImageName);
end;

procedure TForm1.InitializeForm;
begin
  inherited;

  PreloadImages(tw3image.create(self), 'res/girlidle.png');
  PreloadImages(tw3image.create(self), 'res/girlwalk.png');
  PreloadImages(tw3image.create(self), 'res/girlattack.png');
  PreloadImages(tw3image.create(self), 'res/girldefend.png');
  PreloadImages(tw3image.create(self), 'res/girldie.png');

  PreloadImages(tw3image.create(self), 'res/trexidle.png');
  PreloadImages(tw3image.create(self), 'res/trexwalk.png');
  PreloadImages(tw3image.create(self), 'res/trexbite.png');
  PreloadImages(tw3image.create(self), 'res/trexroar.png');

 

Share this post


Link to post
Share on other sites

TW3Sprite is not really meant for traditional game sprites like you and me know them.
The first thing that comes to mind is wrapping the image-change in a TW3Dispatch.RequestAnimationFrame(), but there is no guarantee that it wont flicker.

For "real sprites" I added a DrawTile() and DrawPart() functions in TW3Canvas.
If you imagine a tile grid over a picture, say 32x32 pixels per tile, you can draw a spesific tile very quickly to the canvas.
It will calculate the row/column based on the tile-size + tile number.
So if you draw tile #32, and the tileset picture is 640 x 480 pixels in size, and the tile is 32x32 pixels, you get:
 

rows := height div tileheight;
if rows * tileheight < height then
  inc(Rows);
cols:= width div tilewidth;
if cols * tilewidth < width then
  inc(cols);
RowEntry := tilenumber div rows;
ColEntry := tilenumber mod cols;

RowEntry := RowEntry * TileHeight;
ColEntry := ColEntry * TileWidth;


The above is done automatically for you, so you just need to count the tile# and use that.

Here is an article predating the canvas update, but it gives some insight into where we took the ideas from.

https://jonlennartaasenden.wordpress.com/2014/01/27/codef-for-smart-mobile-studio/

 

Share this post


Link to post
Share on other sites

Yes I am using RequestAnimationFrame

The tw3sprite is perfect for animation for our maths exercises - the software is not a game it mainlky uses editboxes and labels etc so the visual components are better than using canvas. The preloading solves the flash issue so I am happy again.

 

I use canvas when converting directx games

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×