I'm trying to use CreateJS to export a Flash game to HTML5 and then package the result with PhoneGap for mobile devices. This works fine.
But now I'm trying to handle orientation changes, and I'm not sure how to do this. The Flash scene has a fixed landscape orientation, and CreateJS preserves this. But if I rotate the device, I would either need to re-layout the screen objects or switch to a different screen layout.
Redoing the layout would be hard, because the original scene doesn't do this, and so the emitted CreateJS code doesn't either, and I can't see how to override the massive machine generated code base.
But switching to a different layout seems like it would lose the state of the original screen, and that's no good.
Or is this issue why a lot of games seem to pick a single orientation and don't allow rotation at all?
Related
So we're using Adobe Air to develop iPad games from Flash for an educational kiosk that we're building. The issue is that some of the games are in portrait mode, and some of them look best in landscape mode. To account for this, we've ordered a swiveling kiosk that users can turn to either orientation depending on the game. All of the games are opened from a central app that we've developed as a "launcher" for them, so they're opened from within that other app instead of from the iOS home screen.
I'm using the "Aspect Ratio" command when publishing the game and setting to portrait or landscape depending on which game it is. I'm also setting the "Auto-Orientation" to false (though I've tried it on true as well and had similar issues). However, the two landscape games are showing up incorrectly as you can see in the image below. How can I force those games to show up properly on the iPad?
Keep auto orientation = false. Create your 'portrait' games on a portrait-oriented stage. Now create your 'landscape' games on that same portrait-oriented stage. Make them at their proper scale, so that they run off the stage. You can use a temporary landscape-stage-sized rectangle, on the lowest layer, to represent a proper landscape-oriented stage that you can compose on top of. When your game is all laid out select all layers and rotate the whole magilla 90-degrees. Presto! You just rotate the Pad to play the landscape games.
You may have to switch 'width' and 'height' references in your code for those games, and also 'x' and 'y' references. If you have many of those some simple matrix math will help with the transposition.
I am a bit confused with how the project dimensions I set up in Flash Develop will affect my AIR Application's appearance on Retina and non-Retina iPad displays, and how to work with Bitmaps under these circumstances.
When I run in Flash Player on PC to debug the 2048x1536 is off of my monitor it's so big. I've heard that the stage will scale with the size of the screen, and is just a reference coordinate system, but I don't understand how Bitmaps would work in these conditions... Are the Bitmaps scaled automatically all too? Does it matter whether I set my project dimensions to 2048x1546?
My hesitance to get started with this is that I will be using some spritesheets via Starling and I am confused with how to treat their dimensions in these circumstances.
Plz set me straight if you have knowledge and a minute. Appreciated.
You don't have to use 2048x1536. You can just use 1024x768 for your project dimensions. Make sure that stage.scaleMode = StageScaleMode.SHOW_ALL; but that's the default if I'm not mistaken.
Retina iPads will just show it doubled, so everything gets scaled up to 2048x1536. That means your bitmaps won't look as sharp as they can be, but vector graphics DO look sharp because Flash uses the extra resolution on a retina screen.
You could write some code to use higher-resolution bitmaps if you're on a retina display but I don't actually know of a good way of detecting retina resolution other than checking the screen dimensions. Or you could use high-resolution bitmaps that will be scaled down on non-retina screens (make sure to allow smoothing).
Also, I don't have experience with Starling myself so that may behave differently. Hope this helps a bit anyway.
We're building a game in starling, and we want it to be multiplataform, but we found some problems with resolutions,
we have designed the game for iPad, and we want it to run in samsung galaxy tab 10.1 and iPhone,
The problem we have in SGT 10.1 is that we want to center the content and add an extra background to fix the black tires in the sides, and in iPhone 4, the content is bigger that the screen...
do you know a way to solve it?
Thanks
Here is a link that explains how to develop for multiple resolutions in starling:
http://wiki.starling-framework.org/manual/multi-resolution_development
If your assets were created from vector graphics, and don't want to stretch the result bitmap. or you don't want to include several texture atlases.
There's an open source library that should do the trick: https://github.com/XTDStudios/DMT
This library renders the vector assets according to what you give it, and cache it on the device.
online tutorial: http://goo.gl/6NhQk
I have an HTML5 page using CSS3 and SVG graphics in development. I tried using media queries to enlarge the SVG graphics when the device pixel ratio is 1.5 or 2. This works fine. Now I view my page on a small device like the Motorolla Xoom. The reported ratio is 1. This means the Xoom displays everything quite small as compared to a regular monitor. The most annoying part is that it looks great in landscape mode, but in portrait mode the full page is resized to fit in the same width. The ratio number does not change at this point.
I did try using something like 'width: 3in;' but again, it was only the correct size in landscape.
Ultimately, I'd like to use some ratio of device size vs pixel size, and scale everything this way. Is this possible?
My issue was that my graphics were never rendered again when orientation was changed. When I hit refresh again, all is coming up as expected. This was an issue that existed somewhere between my keyboard and my chair. The media queries are in fact working, I just need to rerender some stuff upon orientation change.
Im currently working on a mobile web app and am wondering if I should use individual images or continue with using image sprites like I would for my desktop site? Im just worried about the increased file size from combining all the images and how this could have an effect on the load time of my pages?
Kyle
I don't see anything wrong with using a sprite set, just bear in mind that if you target the app for iPhones, they will only cache files under 25kB in size. So, if your image grows too much, it would, paradoxically, be a better idea to split it into separate images. This will account for more HTTP requests on the first run of the app - but will not generate the additional HTTP request continuously with each subsequent page load, saving both your and the iPhone user's bandwidth :). Oh, same applies for JavaScript and CSS files :).
Sprites work just fine on the vast majority of phones (barring older Nokia Series 40, BlackBerry pre v. 6.0 and any legacy devices (anything without a full HTML 4.01 browser).
What you should be aware of is that if you are using a flexible/responsive layout with primarily flexible units, it can be very hard to properly position the sprites while retaining the flexibility in the layout.