Jump to content

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

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');

 

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/

 

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

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...