Handling Screen Resizes
As a Flash developer, you generally rely on a very simple event to
handle screen resizes, such event is called Event.RESIZE
and allows you to be notified
everytime the page dimensions are being changed. By using the stage.stageWidth
and stage.stageHeight
properties you can then
layout your content appropriately, no matter what screen size you are
targeting.
To handle this, the starling.display.Stage
used by Starling also
dispatches a similar event, called ResizeEvent.RESIZE
, allowing you to handle
dynamic resize elegantly.
In this code, we update our first example with our quad centered in the scene:
package
{
import
flash
.
geom
.
Rectangle
;
g
import
starling
.
core
.
Starling
;
import
starling
.
display
.
Quad
;
import
starling
.
display
.
Sprite
;
import
starling
.
events
.
Event
;
import
starling
.
events
.
ResizeEvent
;
public
class
Game
extends
Sprite
{
private
var
q
:
Quad
;
private
var
rect
:
Rectangle
=
new
Rectangle
(
0
,
0
,
0
,
0
);
public
function
Game
()
{
addEventListener
(
Event
.
ADDED_TO_STAGE
,
onAdded
);
}
private
function
onAdded
(
e
:
Event
)
:
void
{
// listen to the event
stage
.
addEventListener
(
ResizeEvent
.
RESIZE
,
onResize
);
q
=
new
Quad
(
200
,
200
);
q
.
color
=
0x00
FF00
;
q
.
x
=
stage
.
stageWidth
-
q
.
width
>>
1
;
q
.
y
=
stage
.
stageHeight
-
q
.
height
>>
1
;
addChild
(
q
);
}
private
function
onResize
(
event
:
ResizeEvent
)
:
void
{
// set rect dimmensions
rect
.
width
=
event
.
width
,
rect
.
height
=
event
.
height
;
// resize the viewport
Starling
.
current
.
viewPort
=
rect
;
// assign the new stage width and height ...
Get Introducing Starling now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.