JeZxLee

Possible To Draw Off Of The Canvas?

Recommended Posts

Hi,

Currently we stretch the game display to fill the Android screen which looks bad.
We want to maintain aspect ration and draw a joystick on the part of the Android screen that has nothing on it.
Is it possible to draw sprites off of the PixiJSv4 canvas?

Little confused about this, any help would be appreciated, thanks!

JeZxLee

Share this post


Link to post
Share on other sites

Here is the current resize code:

 

function CheckForBrowserResize(forceResize)
{
	if (DONTRESIZE == true)
	{
		renderer.resize( Math.floor(OriginalCanvasWidth), Math.floor(OriginalCanvasHeight) );
		renderer.view.style.position = 'absolute';
		renderer.view.style.left = 0;
		stage.scale.set( 1, 1 );
		
		return;
	}
	
	if (forceResize == false)
	{
		var oldBrowserWidth = CurrentBrowserWidth;
		var oldBrowserHeight = CurrentBrowserHeight;
	}
	
	if (window.innerWidth != OriginalCanvasWidth || window.innerHeight != OriginalCanvasHeight)
	{
		CurrentBrowserWidth = window.innerWidth;
		CurrentBrowserHeight = window.innerHeight;
		
		if (forceResize == true)
		{
			if (OriginalCanvasWidth > CurrentBrowserWidth)
			{
				widthScale = ( widthScale * (CurrentBrowserWidth / OriginalCanvasWidth) );
			}
			else if (OriginalCanvasWidth < CurrentBrowserWidth)
			{
				widthScale = ( widthScale * (CurrentBrowserWidth / OriginalCanvasWidth) );
			}
			
			if (OriginalCanvasHeight > CurrentBrowserHeight)
			{
				heightScale = ( heightScale * (CurrentBrowserHeight / OriginalCanvasHeight) );
			}
			else if (OriginalCanvasHeight < CurrentBrowserHeight)
			{
				heightScale = ( heightScale * (CurrentBrowserHeight / OriginalCanvasHeight) );
			}
		}
		else
		{
			if (oldBrowserWidth > CurrentBrowserWidth)
			{
				widthScale = ( widthScale * (CurrentBrowserWidth / oldBrowserWidth) );
			}
			else if (oldBrowserWidth < CurrentBrowserWidth)
			{
				widthScale = ( widthScale * (CurrentBrowserWidth / oldBrowserWidth) );
			}
			
			if (oldBrowserHeight > CurrentBrowserHeight)
			{
				heightScale = ( heightScale * (CurrentBrowserHeight / oldBrowserHeight) );
			}
			else if (oldBrowserHeight < CurrentBrowserHeight)
			{
				heightScale = ( heightScale * (CurrentBrowserHeight / oldBrowserHeight) );
			}
		}
		
//		if (isMobile == false)
		{
			if (widthScale < heightScale)
			{
				CurrentBrowserHeight = CurrentBrowserHeight * (widthScale / heightScale);
				heightScale = widthScale;
			}
			else if (widthScale > heightScale)
			{
				CurrentBrowserWidth = CurrentBrowserWidth * (heightScale / widthScale);
				widthScale = heightScale;
			}
		}

		renderer.resize( Math.floor(OriginalCanvasWidth*widthScale), 
        Math.floor(OriginalCanvasHeight*heightScale) );
		renderer.view.style.position = 'absolute';
		renderer.view.style.left = (  ( window.innerWidth - (renderer.width) ) >> 1  ) + 'px';
		stage.scale.set( widthScale, heightScale );
	}
}

 

Share this post


Link to post
Share on other sites

A second canvas? you mean "renderer"?
Would mouse/touch work ok on second renderer?
(there would be gamepad buttons on the second renderer)

Thanks for you response!

JeZxLee

Share this post


Link to post
Share on other sites

But you might find 1 big canvas (e.g. with containers to scale and position the parts separately), maybe would perform better for your target Android devices - I'd try both approaches before committing or trying to make it look nice

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


  • Recently Browsing   0 members

    No registered users viewing this page.