I'm currently developing a Game via Starling and AS3.
I came across a wierd issue. My Simulator does not display the full stage.
Image for better explanation: http://i.stack.imgur.com/OoMzt.png
I tested around a bit and i found out that a Quad with a 775 height fills the whole height of a 800 stageHeight. Why is it like that? There should be a 25 space.
Is this because i am running on mac and the window displays it wrong?
//////////////////////////////////////////////////
//this is the size used to test NOT the device size
var widthDevelop:int = yourStageWidth;
//Example var widthDevelop:int = 480;
var screenWidth:int = stage.stageWidth;
var screenHeight:int = stage.stageHeight;
var viewPort:Rectangle = RectangleUtil.fit(
new Rectangle(0, 0, widthDevelop, screenHeight*(widthDevelop/screenWidth)),
new Rectangle(0, 0, screenWidth, screenHeight),
ScaleMode.NO_BORDER);
this._starling.viewPort = viewPort;
this._starling.stage.stageWidth = widthDevelop;
this._starling.stage.stageHeight = screenHeight*(widthDevelop/screenWidth);
Related
I am considering updating my app to take advantage of iphone5's bigger screen but not sure how to achieve this is as3.
I have tried a few suggestions online however unable to get them working. The app works and looks fine with no modification but just letterboxes top and bottom.
This is my code:
var stageWidth:int = Constants.STAGEWIDTH; // Hardcoded to 320
var stageHeight:int = Constants.STAGEHEIGHT; // Hardcoded to 480
var screenWidth:int = stage.fullScreenWidth;
var screenHeight:int = stage.fullScreenHeight;
Constants.FULLSCREENWIDTH = stage.fullScreenWidth;
Constants.FULLSCREENHEIGHT = stage.fullScreenHeight;
var iOS:Boolean = Capabilities.manufacturer.indexOf("iOS") != -1;
Starling.multitouchEnabled = false;
Starling.handleLostContext = true;
var viewPort:Rectangle = new Rectangle(0, 0, stage.fullScreenWidth, stage.fullScreenHeight);
var startupImage:Sprite = createStartupImage(viewPort, screenWidth > 320);
Many thanks!
Add a launch image named Default-568h#2x.png to the package. The resolution of this launch image should be 1136*640 pixels. In case you are already using a namespace schema for your launch images, you can just append ”-568h#2x” to the namespace schema.
taken from
http://blogs.adobe.com/airodynamics/2012/11/07/deploying-air-apps-on-iphone-5/
also, stageWidth on starling will be 568 now, not 480 like in 3.5" screens
try to hardcode this now.
var screenWidth:int = 640;
var screenHeight:int = 1136;
var viewPort:Rectangle = new Rectangle(0, 0, screenWidth, screenHeight)
starling = new Starling(Game, stage, viewPort);
starling.stage.stageWidth = 320;
starling.stage.stageHeight = 568;
If this works, it means that you get wrong stageWith and stageHeight from stage.stageWidth.
here you can see how to correctly get stageView and stageHeight but that is different topic
http://forums.adobe.com/message/3712344
I'm currently using Chart.JS on Phonegap and every time I make a new chart on the same Canvas, it gets twice as big. It's very strange and I don't know if I'm describing it properly. I'll clarify upon suggestions/questions, thanks guys.
Here is the javascript used to make the chart:
var ctx = $("#myChart").get(0).getContext("2d");
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
new Chart(ctx).Pie(data);
canvas.width = canvas.width
EDIT:
I don't know why this bug happens, but I fixed it by hard-setting the width and height each time:
var ctx = $("#myChart").get(0).getContext("2d");
// set canvas dimensions
ctx.canvas.width = chartWidth;
ctx.canvas.height = chartHeight;
// draw chart
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
drawChart(avgMin[1],avgMin[0], ctx);
// maintain canvas dimensions
ctx.canvas.width = chartWidth;
ctx.canvas.height = chartHeight;
I am developing an app in AS3 and AIR for iOS and Android that has a lot of labels and wondering if anyone knows what the best method of decreasing the size of the font if the label text length is too long.
I basically want the text in a label to always fit regardless of the length.
Thanks
This can be accomplished in a variety of ways.
You could call a fitLabel() passing the text field and a bounding box:
fitLabel(textField, new Rectangle(0, 0, stage.stageWidth, stage.stageHeight));
One approach would be scaling the text field to the bounds:
protected function fitLabel(textField:TextField, bounds:Rectangle):void
{
var metrics:TextLineMetrics = textField.getLineMetrics(0);
var ratio:Number = Math.min(bounds.width / metrics.width,
bounds.height / metrics.height);
textField.scaleX = ratio;
textField.scaleY = ratio;
}
Another approach would be implementing an algorithm that adjusts font size accounting for dpi:
protected var dpi:uint = 72;
protected function fitLabel(textField:TextField, bounds:Rectangle):void
{
var metrics:TextLineMetrics = textField.getLineMetrics(0);
var format:TextFormat = textField.getTextFormat();
format.size = (stage.stageWidth / dpi) * 13;
textField.setTextFormat(format);
textField.width = bounds.width;
textField.height = bounds.height;
}
Yet another approach would be iterating through a while loop increasing font size each pass until the maximum width reaches the bounds.
Example SWF:
I have a flash photo booth (web cam) application that I'm trying to wrap up but seem to be having issues trying to save a 640x480 image from a scaled down video window. The video seems to be scaling down fine but when I draw it to a bitmap it's shrinking the photo even more so I had to create a matrix scale of 2.0 to resize it back to 640x480 and I'm not sure if doing so is hurting the quality of the image. I don't want to use any resize hacks (especially up-scaling).
I'm new to AS3 so please forgive me.
import flash.display.Bitmap;
import flash.display.BitmapData;
import com.adobe.images.JPGEncoder;
var cam:Camera = Camera.getCamera();
cam.setQuality(0, 100);
cam.setMode(640,480,30,true); // setMode(videoWidth, videoHeight, video fps, favor area)
var video:Video = new Video();
video.attachCamera(cam);
video.x = 382;
video.y = 225;
video.width = 256;
video.height = 192;
addChild(video);
var bitmapData:BitmapData = new BitmapData(640,480);
var bitmap:Bitmap = new Bitmap(bitmapData);
bitmap.x = 648;
bitmap.y = 225;
bitmap.width = 256;
bitmap.height = 192;
addChildAt(bitmap, 18);
photoCapture.buttonMode = true;
photoCapture.addEventListener(MouseEvent.CLICK,captureImage);
here is the dirty part...
function captureImage(e:MouseEvent):void {
var scale:Number=2.0;
var matrix:Matrix = new Matrix();
matrix.scale(scale, scale);
bitmapData.draw(video, matrix, null, null, null, true);
var jpgEncoder:JPGEncoder=new JPGEncoder(100);
var byteArray:ByteArray=jpgEncoder.encode(bitmapData);
var fileReference:FileReference=new FileReference();
fileReference.save(byteArray, ".jpg");
}
Basically I just want two small box's about 256x192 showing the video stream (640x480) and captured photo (640x480) and when I save it actually saves a 640x480 image.
var video:Video = new Video(640, 480);
This should prevent having to use a matrix. Video by default is 320x240.
First you create a video 256x192
then you create a bitmapData 640x480
then you shrink this bitmapdata (well, the bitmap actually) to 256x192
then you try to draw a small video into a large bitmap(data) - no wonder that you have to upscale
Create a BitmapData, Bitmap and Video in the same size and everything should be OK.
If you want the final image to be 640x480 you should create video, bitmap, bitmapdata in this size, then add the video to an empty MovieClip/Sprite (container) and scale container in order to fit it on the screen.
private var cam:Camera;
private var myVideo:Video;
private function attachCamera():void
{
cam = Camera.getCamera();
cam.setMode(8192,6144,30,true);
cam.setQuality(0,100);
myVideo = new Video(160,120);
//Flip preview on camera and result!
var flip:Matrix = new Matrix();
flip.scale(-1,1)
flip.translate(myVideo.width,0)
myVideo.transform.matrix = flip;
myVideo.attachCamera(cam);
videoDisplay.addChild(myVideo);
}
private function takePicture():void
{
var bd:BitmapData = new BitmapData(cam.width,cam.height);
//fill db with source bitmap!!!
cam.drawToBitmapData(bd)
//Then the bd contains the highest possible camera source!
// But videoDisplay show's small preview!
}
I have run into a small graphics glitch in Flash. It seems to be both in FP9 - Exported via Flash CS3, and FP10 - Exported via the Flex 4 beta SDK.
The glitch / problem manifests itself as embedded text at a small point size "blooming" under certian conditions. It basically looks like the antialiasing becomes fatter at some level of text brightness. I have made a small test case below. (Obviously) You will need to embed the Arial font in your compiled SWF for the below code to work.
var myText:TextField = new TextField();
myText.embedFonts = true;
myText.antiAliasType = AntiAliasType.ADVANCED;
myText.autoSize = TextFieldAutoSize.LEFT;
var myFormat:TextFormat = myText.getTextFormat();
myFormat.size = 8;
myFormat.font = 'Arial';
myFormat.color = 0x663300;
myText.defaultTextFormat = myFormat;
myText.text = 'Bloom Example';
addChild(myText);
var composit:ColorTransform = new ColorTransform();
var timestamp:Number = getTimer();
function enterFrame (event:Event):void{
var n:Number = (getTimer() - timestamp) / 1000.0;
composit.redMultiplier = 1-n;
composit.greenMultiplier = 1-n;
composit.blueMultiplier = 1-n;
composit.redOffset = 250 * n;
composit.greenOffset = 250 * n;
composit.blueOffset = 0;
myText.transform.colorTransform = composit;
if ( n >= 1 ) removeEventListener(Event.ENTER_FRAME, enterFrame);
};
addEventListener(Event.ENTER_FRAME, enterFrame);
You can see an example of the problem by rolling over the graphical element here: http://bandcamp.fieldsofnoise.org/dump/bloom.swf
It's not really an option to change to AntiAliasType.NORMAL as it makes the text way less readable at this point size.
Any help finding an appropriate resolution to this problem would be appreciated.
I think when you change the brightness then you're maxing out the values for all pixels the font is rendered with including the anti-aliasing pixels. Have you tried changing the color rather than increasing the brightness? Or even applying a simple tint?