I have developed a game in starling and after fixing multi resolution issue , i stuck into another one
when I try implementing Revmob banner ads on bottom it shows in the middle of the screen on samsung note - but on samsung galaxy S2 , it show on the bottom which is perfect.
I don't know how to fix this problem
here is two ways i am trying to implement revmob banner ad
Game.revmob.showBanner(0 , stage.stageHeight);
OR
Game.revmob.showBanner();
here is the code for multi resolution
public class FTC extends MovieClip
{
public static var star:Starling;
public static var debugSprite:flash.display.Sprite;
public static var _baseWidth:Number = 480;
private static const STAGE_WIDTH:int = 320;
private static const STAGE_HEIGHT:int = 480;
public static var DIMX:Number;
public static var DIMY:Number;
/**
* The height that the app is based on, this should be the lowest height such as 480 (iphone) or 512 (ipad)
*/
public static var _baseHeight:Number = 800;
public function FTC()
{
this.stage.align = StageAlign.TOP_LEFT;
this.stage.scaleMode = StageScaleMode.NO_SCALE;
Starling.handleLostContext = true;
// Get the preferred stage size based on our smallest target resolution
var stageArea:Rectangle = new Rectangle(0, 0, STAGE_WIDTH, STAGE_HEIGHT);
// Get the fullscreen size available
var fullscreenArea:Rectangle = new Rectangle(0, 0, stage.fullScreenWidth, stage.fullScreenHeight);
// Fit the stage to the full screen. ScaleMode.SHOW_ALL ensures that everything will be visible (not croping will occur).
var viewport:Rectangle = RectangleUtil.fit(stageArea, fullscreenArea, ScaleMode.SHOW_ALL);
// Create a new instance and pass our class, the stage and the wished viewport
star= new Starling(Game, stage, viewport);
// Show debug stats
// star.showStats = true;
// Define level of antialiasing,
star.antiAliasing = 1;
// Set to our preferred stage size
star.stage.stageWidth = STAGE_WIDTH;
star.stage.stageHeight = STAGE_HEIGHT;
star.start();
}
private function onResized(e:Event):void
{
var viewPort:Rectangle = star.viewPort;
viewPort.width = this.stage.stageWidth;
viewPort.height = this.stage.stageHeight;
star.viewPort = viewPort;
star.stage.stageWidth = stage.stageWidth;
star.stage.stageHeight = stage.stageHeight;
}
}
Try to check if the "onResized" Method has been called or maybe you can force a call to it by placing a onResized(null); after the star.start(); call.
Related
Im wondering how to keep the same physics behaviour over different screen sizes?
For example, i have a wheel fixed on the middle of the stage.
I have a mouse pivot joint that i use to spin the wheel.
The radius of the wheel depends on the screen size, it will always occupy about half of screen size.
Now, when i create a wheel on a bigger screen, it is feels as much heavier object. It is much harder to spin it then on a smaller screen size.
Im wondering what is the best practice way of making the physics simulation run exactly the same across all screen sizes?
This is how I usually handle responsive layout in my Air projects, there is probably smarter ways out there but I thought it could help:
(1) Create Sizes helper variables:
package
{
import starling.errors.AbstractClassError;
public class Sizes
{
public function Sizes() { throw new AbstractClassError(); }
public static const SAFE_WIDTH:int = 320;
public static const SAFE_HEIGHT:int = 480;
public static var fullWidth:Number = 0;
public static var fullHeight:Number = 0;
public static var centerX:Number = 0;
public static var centerY:Number = 0;
public static var remainderWidth:Number = 0;
public static var remainderHeight:Number = 0;
public static var halfRemainderWidth:Number = 0;
public static var halfRemainderHeight:Number = 0;
}
}
(2) Then in you main class initializer (where you instanciate Starling) add this code when your stage is ready:
Sizes.scaleToScreen = Math.min( stageWidth / Sizes.SAFE_WIDTH, stageHeight / Sizes.SAFE_HEIGHT );
Sizes.remainderWidth = ( stageWidth / Sizes.scaleToScreen ) - Sizes.SAFE_WIDTH;
Sizes.remainderHeight = ( stageHeight / Sizes.scaleToScreen ) - Sizes.SAFE_HEIGHT;
Sizes.halfRemainderWidth = Sizes.remainderWidth / 2;
Sizes.halfRemainderHeight = Sizes.remainderHeight / 2;
Sizes.fullWidth = stageWidth / Sizes.scaleToScreen;
Sizes.fullHeight = stageHeight / Sizes.scaleToScreen;
Sizes.centerX = Sizes.fullWidth/2;
Sizes.centerY = Sizes.fullHeight/2;
(3) Modify the Root class of your Starling instance, by setting the screen scale:
public function start(background:Texture, bgRect:Rectangle, assets:AssetManager):void
{
// the asset manager is saved as a static variable; this allows us to easily access
// all the assets from everywhere by simply calling "Root.assets"
sAssets = assets;
var bg:Image = new Image( background );
bg.width = bgRect.width / Sizes.scaleToScreen;
bg.height = bgRect.height / Sizes.scaleToScreen;
scaleX = scaleY = Sizes.scaleToScreen; // where the magic happens :)
addChild(bg);
...
(4) Finally, use the set of helpers, and more specifically the first one Sizes.scaleToScreen to match Starling and the display list scales.
// You can now scale your debug Bitmap to match your starling stage scale:
debug = new BitmapDebug(Sizes.fullWidth, Sizes.fullHeight, 0, true);
debug.display.scaleX = debug.display.scaleY = Sizes.scaleToScreen;
Starling.current.nativeOverlay.addChild(debug.display);
So to answer your question, using this technique you would work within constant safe bounds (in this case 320x480) contained within any scaled screen size.
Hope that helps you and others make great responsive games using Starling and Nape!!
I have a stage 300 to 200 and all object that i have are for this dimensions.Also have an pattern function that fills the background.
But the user is thinking of resizing the stage to lets say 1024 to 480 (he switched from a phone to a tablet).And now the scale of the objects in the tablet screen are more than 3times before(when seen on the Phone)
How do i save the current new size object and use it in the creation of the new background (the 1024x480).
i have this code
public static const GAME_ORG_WIDTH:uint = 300;
public static const GAME_ORG_HEIGHT:uint = 200;
private var myC:MyClip = new MyClip();
public function MainClass_road() {
addEventListener(Event.ADDED, init);
}
public function init(e:Event):void{
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, setUpScreen);
}
public function setUpScreen(ev:Event):void{
stage.removeEventListener(Event.RESIZE, setUpScreen);
if(stage.fullScreenHeight > stage.fullScreenWidth){
gameStageWidth = stage.fullScreenWidth;
gameStageHeight = stage.fullScreenHeight;
}else {
gameStageWidth = stage.fullScreenHeight; // 480
gameStageHeight = stage.fullScreenWidth; //1024
}
rescaleRatio = gameStageWidth / GAME_ORG_WIDTH;
//rescale every object, ie:
myC.scaleX = myC.scaleY = rescaleRatio;
//start filling the Background with the pattern
tileBgF();
}
so before the tileBgF() how do i save the new dimensions of the object and use them(the new values)to fill the screen with this function .cause right now im just using the old object properties (sizes), not the updated one.
public function tileBgF(e:Event=null):void {
var bgClip:MovieClip = new myC();
var i:int = 0;
var j:int = 0;
while (bgClip.x < gameStageWidth - bgClip.width) {
bgClip = MyC;
while (bgClip.y < gameStageHeight - bgClip.height) {
bgClip = MyC;
tileLayer.addChild(bgClip);
bgClip.x = bgClip.width * i;
bgClip.y = bgClip.height * j;
j++;
}
j = 0;
i++;
}
addChildAt(tileLayer,0);
}
and if i decide in the future to use the background again (so i have 2 backgrounds at the same time on the stage) is it enough just to make another tileLayer and add it again or i need to do something more ?
bgClip = new MyClip();
bgClip.scaleX = bgClip.scaleY = scaleRatio
tileLayer.addChild(bgClip);
bgClip.x = bgClip.width * i;
bgClip.y = bgClip.height * j;
How do I extract the width and height of an embedded image in AS3 instead of explicitly stating the dimensions?
Here's what I'm trying to do:
[Embed(source="../../lib/spaceship.png")]
private var ShipImage:Class;
private var ship_image:BitmapData;
public function Ship(x:int, y:int, width:Number, height:Number)
{
super(x, y, 36, 64);
ship_image = new ShipImage().bitmapData;
speed = new Point(0, 0);
}
Since super should be called before everything else within the constructor how do I learn about the dimensions beforehand? I'm using FlashDevelop as my IDE.
You can read those properties through BitmapData#rect:
public function Ship(x:int, y:int, width:Number, height:Number)
{
// Would be better if you haven't to pass width and height
super(x, y, 0, 0);
// Get the bitmap data
ship_image = new ShipImage().bitmapData;
// Set width and height
width = ship_image.rect.width;
height = ship_image.rect.height;
// ...
}
Other solution with statics:
[Embed(source="../../lib/spaceship.png")]
private static const ShipImage:Class;
private static var spriteWidth:int;
private static var spriteHeight:int;
private static function calculateSpriteSize():void
{
// Get the sprite "rectangle"
var rect:Rectangle = new ShipImage().bitmapData.rect;
// Set width and height
spriteWidth = ship_image.rect.width;
spriteHeight = ship_image.rect.height;
}
// Call the method into the class body
// (yes you can do that!)
calculateSpriteSize();
public function Ship(x:int, y:int, width:Number, height:Number)
{
// Retrieve the sprite size
super(x, y, spriteWidth, spriteHeight);
// ...
}
you can extract/resize Image With Scaling. you can re-size image with same aspect ratio or different aspect ratio. if you do not want to re-size then scaleX && scaleY has value 1.0 , if you want to re-size with half of the original size then both factor has value of 0.5 If you want to rotate image Then use Translation.
var matrix:Matrix = new Matrix();
matrix.scale(scalex, scaley);
matrix.translate(translatex, translatey);
var resizableImage:BitmapData = new BitmapData(size, size, true);
resizableImage.draw(data, matrix, null, null, null, true);
this resizableimage returns bitmapdata.
May This Works for You!
Alright I'm programming in actionscript 3, using flex as a compiler. I have an 16x16 large PNG file that is basically a square outline like this:
http://wiki.urbandead.com/images/1/1c/Square.gif
But in more noticeable colors.
I want to draw an 11x11 grid of these squares, so I use these for loops:
for (i1 = 0; i1 < 11; i1 ++)
{
for (i2 = 0; i2 < 11; i2 ++)
{
new OBJECT_tile().CREATE(CONTAINER,32 + 16*i1,32 + 16*i2);
}
}
Where the CREATE() function makes a new tile object with the container CONTAINER with the given x and y coordinates.
public class OBJECT_tile extends Sprite
{
public var X:Number; public var Y:Number;
public var DEPTH:int = 10 ;
public var SPRITE:Sprite = new Sprite();
public var BITMAP:Bitmap;
public var CONTAINER:Sprite = new Sprite();
[Embed(source = 'TILE.png')]
private var CLASS_IMAGE:Class;
private var IMAGE:Bitmap = new CLASS_IMAGE();
public function CREATE(CONTAINER:Sprite,X:Number,Y:Number):void
{
var DATA:BitmapData = new BitmapData(16,16,true,0);
DATA.draw(IMAGE);
BITMAP = new Bitmap(DATA);
BITMAP.smoothing = false;
addChild(BITMAP);
this.CONTAINER = CONTAINER;
(CONTAINER as MAIN).INSTANCE_LIST[(CONTAINER as MAIN).INSTANCE_LIST.length] = this;
this.X = X; BITMAP.x = this.X;
this.Y = Y; BITMAP.y = this.Y;
DRAW();
}}
However for some reason the tiles are drawn to twice their size (32x32 instead of 16x16) and tend to bunch up or spread out depending on how many tabs I have open in my browser. The bunching up isn't consistent either, for instance the tiles might for a 3x3 group that's perfectly fine but then there will just be a line of messed up tiles next to that group (really hard to describe). Why is this happening?
Okay I figured it out. It turns out as3 will try to scale things behind your back, I'm guessing this is some kind of holdout from Adobe's ide (I detest the thing and program in notepad++). Anyways if you stick this:
stage.scaleMode = StageScaleMode.NO_SCALE;
In your main function it will stop it from scaling unless you say otherwise.
I'm trying to make a popup window class which will get a content DisaplyObject, and popup and display it in itself, but I'm cracking my head with matching the size of the content to the window or vise versa... I think that maybe the window is not display all of the stage or something ?!
The content get way too big..and goes out of bounds.
here is the code :
public class SubWindow extends NativeWindow{
public function SubWindow()
{
var windowOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
windowOptions.systemChrome = NativeWindowSystemChrome.STANDARD;
windowOptions.type = NativeWindowType.UTILITY;
windowOptions.resizable = false;
super(windowOptions);
this.stage.align = StageAlign.TOP_LEFT;
width = 400;
height = 400;
title = "Are you sure?";
alwaysInFront = true;
activate();
visible = false;
addEventListener(Event.CLOSING, closeWindow, false, 0, true);
}
public function closeWindow(e:Event)
{
e.stopImmediatePropagation();
e.stopPropagation();
e.preventDefault();
visible = false;
}
public function setContent(cont:DisplayObject)
{
visible = true;
//this.width = stage.stageWidth;
//this.height = stage.stageHeight;
trace(cont.getBounds(stage), width, height, stage.stageWidth,stage.stageHeight);
cont.height = stage.stageHeight;
cont.width = stage.stageWidth;
cont.x = cont.y = 0;
this.stage.addChild(cont);
trace(cont.width, width, height, stage.stageWidth,stage.stageHeight);
}
}
Thanks,
Mik
Now I've solved it i think!
First create your content:
var myContent:MyCustomContentClass = new MyCustomContentClass();
Then create your window and set size and position
var myWindow:NativeWindow = new NativeWindow();
myWindow.stage.align = StageAlign.TOP_LEFT;
myWindow.width = myContent.width;
myWindow.height = myContent.height
And set scale mode to no scale:
myWindow.stage.scaleMode = StageScaleMode.NO_SCALE;
And then add the content
myWindow.stage.addChild(myContent);
myWindow.activate();
I still have some minor ssues when running on osX, but I think is has to do with the size of the system chrome.
Maybe beacause native windows chrome dimension is different. Try this way:
http://tedpatrick.com/2009/12/23/sizing-air-nativewindow-to-stage/