I'm having a difficult time getting an HTML5 app I designed in Game Maker to scale for display on mobile-device screens. I've tried using this little bit of code, to set the width and height of a the main game room, in a setup object, before switching to that room:
room_set_width(rm_playspace,browser_width);
But that seems be doing absolutely nothing.
Have you successfully designed software for mobile devices with Game Maker? How did you get your software to scale for proper viewing on mobile devices with differently sized screens?
room_set_width( ind, w );
Description
With this function you can change (or set) the width of any room in your game except the current one.
so you need to go to another room, and then resize the first room and go back into it.
another option that you can try - just restart the room immediately after resizing, like
room_set_width(room, 640)
room_set_height(room, 480)
window_set_size(640, 480) // also you can use window_set_rectangle
room_restart()
(room should not be a persistent)
Don't forget to set view_port_xxx and view_size_xxx for proper sizes. You can use window_get_width() and display_get_width() etc. for that - refer to manual for more info.
You could also just resize the surface and before, the view.
Related
I'm creating a mobile web application (HTML5/JavaScript/CSS only) that allows a user to take a picture. The picture from the camera is then loaded into a canvas HTML element. The user may rotate their phone when taking a photo so ultimately I want to rotate the output appropriately. Is there a way in a web page only to determine which degree a user has rotated when taking a picture? I'm not simply talking about whether they are in landscape mode. I'm meaning if you hold your phone straight up in portrait mode face it down at your desk (its now parallel with your desk) and then rotate it to landscape. This will not trigger an orientation change, but you will now be holding your phone in a "landscape" position if that makes sense. This will be a common way users will be taking the photos. I want to be able to rotate the image appropriately when uploading it.
Thank you
Is there a way in a web page only to determine which degree a user has rotated when taking a picture?
Yes there is! When photos are taken, they contain metadata - information about the image. This is called EXIF data.
It tells you things like the make of camera, whether the flash went off, and - usefully for you - the orientation of the camera.
If you are using JavaScript to draw the image onto the canvas, I can recommend BlueImp's JavaScript Load Image Library
Once you have loaded the image, you'll be able to do a call like:
var orientation = data.exif.get('Orientation');
That will tell you which way the camera was held when the photo was taken. Depending on the phone, you may also get rotation data, GPS data, compass heading, etc.
In my Adobe Air application, I have a room and my player that can walk around it. I set it so it automatically opens in fullscreen, however, when you exit fullscreen it doesn't scale anything, so it just shows you the edge of the room, where you can't see the player or anything else. How do I make it so that when you exit fullscreen, everything will scale down to the windowed version, and back again? This is in Adobe Flash Builder 4.7.
I tried scaling everything down by putting an If statement in an update function, that constantly checks if the window is full screened or not, and if not, it'll scale the x and y down by .5, and if full screened again, it'll scale it back up by 1. The player however changes position, and if I try to make the X equal it it just does it again if I move the player, so it doesn't work. I've also tried verticleCenter and horizontalCenter on both the player and room, it also doesn't work.
What I'm wondering is if there is a stage.autoScale line that can solve everything, or if I have to do it manually another way like I've tried.
So you got 2 options here.
Check for fullscreen event and then in the listener function scale everything according to your logics. This will give you more control over the scaling and visual display of your components and graphics. You can find a working example for fullscreen event handling at http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS2E9C7F3B-6A7C-4c5d-8ADD-5B23446FBEEB.html
Allow FP to scale the stage according to the window size. This can be achieved by setting up stage.scale mode. There are couple options which you can find at http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/StageScaleMode.html. Use the one best suit for your application.
I would prefer using first method. Hope that make sense.
For the last couple of days I've been wondering if it would be possible to let the user define the resolution to be used, when building for an AIR application.
Say if I have my SWF set up at a 1280x720 resolution by default, would it be possible to have, in the main menu, a set of resolutions, for instance 1366x768 or 1024x768, that the user can choose and then scale the window that contains the game to that size?
With AIR, you can manipulate a window's size from your code.
For the window of the current code's scope, you can do:
stage.nativeWindow.width = 1280;
stage.nativeWindow.height = 720;
OR, if you want to move the window to a particular spot and size:
stage.nativeWindow.bounds = new Rectangle(0,0,1280,720);
Or, you can use NativeApplication.nativeApplication.activeWindow or one of the items (windows) from NativeApplication.nativeApplication.openedWindows
I've just been able to setup a Cocos2d-x for a multiresolution environment. Ie supporting all/most of the available iPhone screen sizes.
My next step is to scrap the individual files (bunch of pngs) and use sprite atlases (aka sprite sheets) instead.
How does this work in Cocos2D-x? Does anyone have a working sample setup?
Once again, Google and existing documentation (well, I don't think that exists) fail me.
For cocos2d-x v3.5...
The cocos2d-x test classes are always a great place to look to see how things can be done with cocos2d-x.
Check out the AppDelegate.cpp in:
Cocos2d-x/cocos2d-x-3.5/tests/cpp-tests/Classes/AppDelegate.cpp.
In that class the window size is tested to see which set of assets should be loaded. That is part of the issue, deciding which assets to load.
For iOS retina, you can check the size of the screen and then set the content scale factor to either 1.0 for standard resolution or 2.0 for retina resolution.
Unfortunately, cocos2d-x doesn't seem to ever detect certain screen sizes and call Director::getInstanct()->setContentScaleFactor(2.0) for you, so I think we have to do this our self.
I have not tested the impact of setting contentScaleFactor on non-apple devices yet...
Check out the code below. Try running it in your AppDelegate::applicationDidFinishLaunching() method to get an idea of how cocos2d-x sees screen pixels and points; the result is not exactly what I expected. The output below is for an iPhone 5 device.
director->setContentScaleFactor(2);
Size winSizePoints = director->getWinSize();
Size winSizePixels = director->getWinSizeInPixels();
Size visibleSize = director->getVisibleSize();
CCLOG("Content scale factor set to 2.0.");
CCLOG("winSizePoints:%.2f,%.2f", winSizePoints.width, winSizePoints.height);
CCLOG("winSizePixels:%.2f,%.2f", winSizePixels.width, winSizePixels.height);
CCLOG("visibleSize:%.2f,%.2f", visibleSize.width, visibleSize.height);
director->setContentScaleFactor(1);
winSizePoints = director->getWinSize();
winSizePixels = director->getWinSizeInPixels();
visibleSize = director->getVisibleSize();
CCLOG("Content scale factor set to 1.0.");
CCLOG("winSizePoints:%.2f,%.2f", winSizePoints.width, winSizePoints.height);
CCLOG("winSizePixels:%.2f,%.2f", winSizePixels.width, winSizePixels.height);
CCLOG("visibleSize:%.2f,%.2f", visibleSize.width, visibleSize.height);
Output of above code:
Content scale factor set to 2.0.
winSizePoints:1136.00,640.00
winSizePixels:2272.00,1280.00
visibleSize:1136.00,640.00
Content scale factor set to 1.0.
winSizePoints:1136.00,640.00
winSizePixels:1136.00,640.00
visibleSize:1136.00,640.00
So it seems we have to check the the screen size and then choose assets.
One option is to then use code like this to decide which assets to load based on if the screen is retina or not. You could use a similar approach to also loading different size background images to deal with different aspect ratios (more aspect ratios below).
float scaleFactor = CCDirector::getInstance()->getContentScaleFactor();
if (scaleFactor > 1.99)
{
SpriteFrameCache::getInstance()->addSpriteFramesWithFile("spriteSheet-hd.plist", "spriteSheet-hd.png");
}
else
{
SpriteFrameCache::getInstance()->addSpriteFramesWithFile("spriteSheet.png", "spriteSheet.plist");
}
For sprite sheets, I highly recommend Texture Packer. Awesome tool that can create SD and HD sheets and .plist files for you with the press of one button.
If you publish to multiple platforms, you will also want to use the macros to detect the device type and use that information in deciding which assets to load.
e.g.
if (CC_TARGET_PLATFORM == CC_PLATFORM_WIN32)
elif CC_TARGET_PLATFORM == CC_PLATFORM_WP8
elif CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID
elif CC_TARGET_PLATFORM == CC_PLATFORM_IOS
elif CC_TARGET_PLATFORM == CC_PLATFORM_MAC)
endif
Another thing to consider is that on low power CPU and RAM devices, loading large assets might make your frames per second (FPS) go to crap. Or worse, the device might not be able to load the asset or could crash the game. So be sure to test/profile on least common denominator devices that you plan to support.
Aspect Ration is another important issue (landscape width:height).
iPad aspect ratio is 4:3
iPhone 4 is 3:2
iPhone 5 & 6 are 16:9
Android throws in a bunch more width:height ratios.
WP8.1 is 15:9... not sure if others.
The point is that you probably don't want to stretch your backgrounds to get them to fill the screen, or have black bars on the edges where assets are not tall or wide enough.
To deal with this I create background assets that are wider than they need to be going off the right side of the screen. That content looks good but is not vital to convey the meaning of the background. That extra content can be clipped on devices that have narrower aspect ratios, i.e. ipad, and is visible on wider aspect ratio devices, i.e. iPhone 6.
The background images are then scaled up/down to match the screenSize height and retain their aspect ratio.
I develop a simple html5 based game. In this game has 4 control keys left,right,up and down arrows (keydown event). It worked good in my laptop browser.I like to customize this game for mobile phones. What are the suitable events for read input in mobile phones(Android,IOS). And standard dimension(height and width) of canvas in mobile browser?
answer to title:
canvas is globally supported by iOS and Android phones,
show on caniuse.com for more details:
http://caniuse.com/#feat=canvas
answer to message:
mobile don't have keyboard.
For keys you can use pointer events API (and its polyfill) to make virtual joystick, show this tutorial for more detail:
http://www.codeproject.com/Articles/594186/Create-a-Cross-browser-Touch-based-Joystick-with-Hand-js
Controls
This is where you can get creative. A virtual keypad will do or maybe divide the screen in to sections. Left section is left, right section is right, etc. Really depends on your type of game.
A really good tutorial for a virtual keypad can be found here. Check out the demo!
Events
Check out Apples guide on how to add events.
Basically it's the following:
element.addEventListener("touchstart", touchStart, false);
element.addEventListener("touchmove", touchMove, false);
element.addEventListener("touchend", touchEnd, false);
element.addEventListener("touchcancel", touchCancel, false);
Alternatively, I recommend a library like hammerJS. It handles touch events and simplifies gestures for you.
Screen sizes
Apple is easy, you have
320×480, 640×960, 640×1136
Android is a little more complex. Best answer is to check out the following page provided by Google: Screen size analytics.
They're generally divided in to the following categories
xlarge screens are at least 960dp x 720dp
large screens are at least 640dp x 480dp
normal screens are at least 470dp x 320dp
small screens are at least 426dp x 320dp