Splitting the screen in identical smaller screens


(B6ka) #1

Hi,

I have a kind of stupid question. I want to experiment with an aspect of a gameplay that requires the screen to be split of identical smaller screens. For example, suppose we have a 400x400 screen and then it is split into 4 200x200 screens that show exactly the same thing - the scaled down version of the original screen. Is there an easy way to do this in FlashPunk? Thanks :slight_smile:


(rostok) #2

is this what you wanted to achevie?

in Main.as

		override public function render():void 
		{
			super.render(); // do it after world is rendered

			var m:Matrix = new Matrix();
			m.scale(0.5, 0.5);
			FP.buffer.draw(FP.buffer, m);
			m.identity();
			m.translate(FP.halfWidth, 0);
			FP.buffer.draw(FP.buffer, m);
			m.identity();
			m.translate(0, FP.halfHeight);
			FP.buffer.draw(FP.buffer, m);
		}

(Jacob Albano) #3

I believe this will only work correctly for the first render, since FP.buffer will be overwritten once and then used for the source each other time. You’ll want to copy the buffer first and use that copy thereafter.

override public function render():void 
{
    super.render(); // do it after world is rendered

    var m:Matrix = new Matrix();
    m.scale(0.5, 0.5);
    
    var screen:BitmapData = FP.buffer.clone();
    FP.buffer.draw(screen, m);
    
    //    etc
}

(B6ka) #4

Thanks, guys, exactly what I wanted. I owe you one. You definitely go in my game credits :slight_smile:


(rostok) #5

that was my intent: I have only 3 draw() calls and no extra memory allocated. however, I must admit using clone() is, say, more elegant.


(B6ka) #6

One more followup question: The screen splitting works perfectly fine, but I also want to add a half transparent image on top of the split screens. The problem is that the image also gets shrunk and split into several screens. Maybe I am not seeing something obvious, but is there a way to separate the image out so it is not affected? Thanks :slight_smile:


(Jacob Albano) #7

After you render the screens, you can add something on top by doing this:


 // where you want the image to appear; should probably make it a static member to avoid allocations
const POS:Point = new Point();

myImage.render(FP.buffer, POS, camera);


(B6ka) #8

Thank you very much, works very well.

I am working on a platformer that is based on exploration. In one area you find a dark bottle with a liquid placed on an altar. If you choose to drink it, you become a spider like creature (It is kind of a trap), and the the screen is split for each of the eyes of the spider.

Something like this.


(Jacob Albano) #9

Wow, that’s really cool!


(rostok) #10

@B6ka It is good to know how the screen is rendered in FP. The stack should look sth like this:

Engine.render() -> World.render() -> Entity.render() (entities are rendered based on layer ordering)

Note, that in each of those objects render method can be overriden. You can put extra code before or after super.render(). I personally often use entity’s overriden render to add code-generated graphics using Draw class. It is also usefull to have some exta debug information displayed. My practice is to check for FP.console.visible: For example:

override public function render():void 
{
	super.render();
	if (FP.console.visible)
	{
		// show some extra info like health or path
	}
}

(B6ka) #11

Thanks this is a very useful info.