Resize without flickering?


#1

hello…

for resizing in browser (not! fullscreen! only full-browser) i´d done follows:

sorry… btw… this board software is more than horrible!!! its like an traffic-accident… you wont look, but you must! how can i do a quote for code???

okay… i explain in words… i did an event-listener in main-class with target “onResize”

there i do

FP.resize(fp.stage.stageWidth, fp.stage.stageHeight)…

works fine… but i have a flickering on resizing. how can i avoid it???

thanks in advance kolibri


(Zachary Lewis) #2

Thanks for the insult! :unamused:

There are a bunch of ways to format code, some of which are outlined in this topic. Alternatively, you can just highlight the code you want and click the code button above the composition window (it looks like </>).

What kind of flickering are you experiencing? Can you describe it?


#3

ok… thats easy… :wink: 98% of errors are user-errors :wink:

public function resize():void {
	if (!testModus) {
		if (FP.stage.stageHeight > 800) {
			resHoehe = 800;
		} else {
			resHoehe = FP.stage.stageHeight;
		}
		
		if (FP.stage.stageWidth > 1280) {
			resBreite = 1280;
		} else {
			resBreite = FP.stage.stageWidth;
		}
	}
	
	if (testModus) {
		resBreite = 1280;
		resHoehe = 800;
	}
	
	Spieler.resW = resBreite;
	Spieler.resH = resHoehe;
	FP.resize(resBreite, resHoehe);			
}

thats my resize-function… if i change the browser-window-size… the picture flickers with every step of resize… it means, the pic is for a millisecond not visible, and then it displays resized…


#4

no idea in this issue?? :frowning:


(Zachary Lewis) #5

Can you create a screen capture of the issue? You can just share a screenr link here.


#6

i did a wmv-file… http://dkzl.de/flickering.wmv

thanks in advance


(Martí Angelats i Ribera) #7

I feel like this can be a bug.


#8

a bug in my program, or a bug in flashpunk???


(Martí Angelats i Ribera) #9

In FlashPunk. I’m not sure though.


#10

hmmm… in between i found another issue … perhaps this can help???

http://forums.flixel.org/index.php?topic=6258.0


(Zachary Lewis) #11

Where are you calling your resize() function?


#12

i call it in the Main.as

[…] stage.addEventListener(Event.RESIZE, onResize); […]

	public function onResize(e:Event) {
	
		if (Spieler._aktuellesLevel == 0) { //kein level aktiv...
		FP.console.log("onresize");
		FP.console.log("w:" + FP.stage.stageWidth + " H:" + FP.stage.stageHeight+"sw:"+Spieler.resW+" sh:"+Spieler.resH);
		resize();
		}
	}


	public function resize():void {

		
		
		if (!testModus) {
			if (FP.stage.stageHeight > 800) {
				resHoehe = 800;
			} else {
				resHoehe = FP.stage.stageHeight;
			}
			
			if (FP.stage.stageWidth > 1280) {
				resBreite = 1280;
			} else {
				resBreite = FP.stage.stageWidth;
			}
		}
		
		if (testModus) {
			resBreite = 1280;
			resHoehe = 800;
		}
		
		Spieler.resW = resBreite;
		Spieler.resH = resHoehe;
		FP.resize(resBreite, resHoehe);
		
	}

(Martí Angelats i Ribera) #13

try using this:

//in your main
public var needResize:Boolean = false;
public function onResize(e:event):void
{
    needResize = true;
}
public function resize():void
{
    needResize = false;
    FP.resize(FP.stage.stageWidth, FP.stage.stageHeight); //or the code you want
}
override public function render():void
{
    if(needResize) resize();
    super.render();
}

#14

yes… it helps a little bit! but a minimal flickering is further there… :frowning: it disturbs massive :frowning: in other games i see, its possible…


(Zachary Lewis) #15

Instead of handling it on a resize event, try just adding a check in your render function.

public class GameWorld extends World
{
  private static var _currentWidth:int;
  private static var _currentHeight:int;

  override public function render():void
  {
    if (_currentWidth != FP.stage.stageWidth || _currentHeight != FP.stage.stageHeight)
    {
      // Do whatever resizing you need to do here.
      FP.resize(FP.stage.stageWidth, FP.stage.stageHeight);
    }

    _currentWidth = FP.stage.stageWidth;
    _currentHeight = FP.stage.stageHeight;

    super.render();
  }
}

#16

thanks zach,

i tried it out… but this changed nothing… it flickers further like hell…


(Zachary Lewis) #17

So, okay, here’s the thing. Calling resize() causes both screen buffers to be recreated, which wipes both of them (the black screen you’re seeing). This is also going to cause the update loop to take longer. When this is called every frame for multiple frames (which is what happens when you resize the screen), it’s going to lag the game and cause the flickering you’re seeing.

I have a few suggestions, some of which may need some testing.

  1. Don’t even worry about it. The user won’t be resizing the screen all the time, and most games don’t gracefully handle active resizing. Since they won’t be playing while resizing, they don’t really need to have smooth visuals.
  2. Listen for Event.ACTIVATE and Event.DEACTIVATE from your stage. If the window isn’t considered active when resizing, you can ignore the current size until the window becomes active again, then just resize it once.
  3. Instead of reacting to every resize event, you can wait a short time (I’d start with half a second) before performing the resize. If another resize event happens during that time, restart the timer. The idea here is to wait until the user has finished resizing, then just calling resize once (again, to prevent the flickering).

How do you feel about these options?


(azrafe7) #18

@zachwlewis has multiple points here! (btw I would do it with an Alarm tween as suggested in his third option but…)

Depending on how you want to resize things there are multiple methods to do it (what’s Spieler exactly… a container Sprite probably?!).

If you don’t care about ratios (which seems to be the case by looking at your code, and supposing you’ll reposition the HUD accordingly), then simply commenting out

	FP.screen.resize();

in the FP.resize() function might get what you want.

If that’s not it then we’d need you to elaborate what exactly is you’re looking for (and if you can provide a simple project we’d surely be able to help you further).


#19

hmmm… okay…

i take a look into screen.as… thats right… both screens where disposed at the same time… regardless of its visible or not!

perhaps its possible to change screen.as to dispose only the INvisible screen, and let the visible untouched, until its invisible…???

i tried some changes in resize() & swap() to do it… but it results in constant flickering…

i will try further changes… and will report…


#20

i have now done follows in screen.as:

before constructor:

private var _otherHasToResize:Boolean = false;
private var firstCreate:Boolean = true;

then the changed resize()-function…

	public function resize():void
	{
		if (_bitmap[1 - _current]) {
			_sprite.removeChild(_bitmap[ 1 - _current]);				
			_bitmap[1 - _current].bitmapData.dispose();
		}
		
		// create screen buffers
		if (firstCreate) {
		_bitmap[0] = new Bitmap(new BitmapData(FP.width, FP.height, false, _color), PixelSnapping.NEVER);
		_bitmap[1] = new Bitmap(new BitmapData(FP.width, FP.height, false, _color), PixelSnapping.NEVER);
		firstCreate = false;
		} else {
		_bitmap[1 - _current] = new Bitmap(new BitmapData(FP.width, FP.height, false, _color), PixelSnapping.NEVER);
		}
		
		_sprite.addChild(_bitmap[_current]).visible = true;
		_sprite.addChild(_bitmap[1 - _current]).visible = false;
		FP.buffer = _bitmap[_current].bitmapData;
		_width = FP.width;
		_height = FP.height;
		_current = 0;
	}

you see… after firstcreate of the bitmap-buffers, only the not visible buffer is setted in this function… changed swap()-function does the rest…

	public function swap():void
	{
		_current = 1 - _current;
		FP.buffer = _bitmap[_current].bitmapData;
		if (_otherHasToResize) {
			otherResize();
			_otherHasToResize = false;
		}
	}

and calls otherResize()

	private function otherResize():void {
		if (_bitmap[1 - _current]) {
			_sprite.removeChild(_bitmap[1 - _current]);
			_bitmap[1 - _current].bitmapData.dispose();
		}			
	
		_bitmap[1 - _current] = new Bitmap(new BitmapData(FP.width, FP.height, false, _color), PixelSnapping.NEVER);
		_sprite.addChild(_bitmap[1 - _current]).visible = false;
		
	}

but… damn… resizing ends further in flickering!!! either i made a mistake in the codes above… or it is not the problem!!