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
Related
Using Surface pro touch screen to select element in viewer works sometimes other times it seems to translate to a rotate/zoom action. In this case the viewer rotates/moves and the element is NOT selected.
When logging the events there are plenty of mouse down/up events along with mouse moves when it doesnt work. When select does work a single click event occurs.
Double click seems to work ok.
Zoom/rotate etc using standard tools works ok.
Using the keyboard cover touch pad that you can get for the Surface pro to move and click works as expected and the element is selected.
Running same application on a GETAC Windows 10 ruggadised tablet the select element works correctly so it seems related to the Surface Pro.
Unable to change browsers as cordova apps use IE11 on windows and that is currently fixed.
The only solution i can think of for the moment is to remove the standard navigation tools completely (somehow) and recreate a select mode tool that would ignore any mouse moves and use button down event to select element.
Any suggestions on how to fix this?
Tech Details:
Windows 10 Pro,
Surface Pro,
Browser: IE11,
Viewer version 2.11,
Other: WINJS81 cordova application
Thanks for any help
We've had problems with touch events on the Surface Pro in the past. It sounds like the edges of the touch screen are overly sensitive and are triggering extra touch points.
Does the problem happen if you are holding the device up, gripping with one hand, and using your other hand to touch/select a 3D object ?
Could you try doing a selection again, but this time, make sure you other hand is not holding the edge of the screen? (Perhaps place the device on the surface of a desk, so you are not holding it up)
Found a fix to this issue. In viewer3D in the base toolcontroller there is line
var kClickThreshold = 2;
This value is used further down in code to determine if singleClick has occured. It does it by comparing XY on down and up events.
var deltaX = _downX - event.canvasX;
var deltaY = _downY - event.canvasY;
_downX = -1;
_downY = -1;
if( Math.abs(deltaX) <= kClickThreshold && Math.abs(deltaY) <= kClickThreshold )
_this.handleSingleClick( event );
If movement is above this threshold it does not trigger singleClick if below it does.
Did testing and increasing the value to around 5-7 means that the selection of elements worked consistently. (there is still a minor rotate or zoom at same time as select occurs but I assume that this would be another part of viewer that would need adjusting)
Unfortunately it does require edit of viewer code but easy enough. I added code to overwrite standard value if external variable existed.
Would be nice for future viewer dev if more of these types of properties be exposed so that direct edit of code is not required.
Still it is good to have the source code to be able to debug at this level.
At a guess the Surface Pro 4 must have a more sensitive touch system or it could just be related to IE11 as well.
I have few questions here, regarding creating app in Adobe Air using Starling and feathers.
I created yet a very simple app, which has Feathers list controller with static data provided to its dataProvider. According to the code it should work fine, but there are three major issues I am facing.
1: Touch/Click Positions
I am using:
list.addEventListener( Event.CHANGE, list_changeHandler );
Now the problem is, clicking coordinates are not correct. Clicking on 3rd Item triggered 4th item, to trigger 3rd, 2nd item needs to be clicked it's half way through etc.
2: Nothing, without Theme
I am using a custom theme, came along with a tutorial. If I don't use the theme, I am unable to see anything on the screen, somehow.
3: Resolution (Device Simulator) Problem
Though buggy, but it works with Theme, but my app doesn't fit with the resolution for each device simulator. Either its, iPad or iPhone 4 or any android simulator.
Also, can anyone please also explains, what is significance and use of Context3D render mode in starling class.
Any help is appreciated:
Thanks in advance
Waqar Iqbal
Starling is a Stage3D framework that displays content directly on graphic card using Context3D. Everything displayed by Starling is always under the regular display list. Feather is a component framework based on Starling.
Stage3D cannot handle any mouse operations so Starling and Feather simulate all their mouse event (those mouse event never really happen anywhere, they are created by calculation of mouse position on the stage)
not sure, never used Feather
Starling does not handle screen density and dpi calculation, if you want your app to fit any screen you'll have to handle it yourself.
I think you should see the example carefully. if u want to use any feathers component either you have to use feathers theme or custom theme.
if you use feather theme you need to provide theme path and before using any component you need to initialize that theme.Then use component any where.without theme you will not see any thing.
1: Touch/Click Positions
please provide minTouchHeight in class theme of DefaultListItemRenderer like:-
renderer.minWidth = this.gridSize;
renderer.minHeight = this.gridSize;
renderer.minTouchWidth = this.gridSize;
renderer.minTouchHeight = this.gridSize;
2: Nothing, without Theme,
3: Resolution (Device Simulator) Problem
Follow the example given in feather library
feathers-2.1.1\themes\MetalWorksMobileTheme\source\feathers\themes
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.
Okay I'm developing a win phone app, and I have buttons here and there and I want the phone to vibrate when someone hits a button.
I managed to do that with
using Windows.Phone.devices.Notification;
VibrationDevice v = VibrationDevice.GetDefault();
v.Vibrate(TimeSpan.FromSeconds(0.1);
However that vibration is rather strong and annoying to get everytime someone hits a button, I'm wondering, do we get access to the soft vibration? Like when someone hits the windows button / back key / search glass - those three buttons have a more soft vibration
For WP7.1 you could use XNA:
Microsoft.Xna.Framework.WindowsPhone.Input.GamePad.SetVibration(player, leftMotorStrength, rightMotorStrength)
However, for Windows Phone 8 this is not possible.
Please refer to MSDN for more details.
You can use a shorter timespan. Do some experiments on different devices. You might need to use different values for different devices.
I got a really nice soft vibration from Samsung ATIV Odyssey with TimeSpan.FromSeconds(0.01). However, HTC 8X seems to ignore a timespan this short - the results with 0.02 was somewhat inconsistent; 0.03 was a good one.
I developed a mobile app inside Adobe Flex (4.6) and it includes using pinch-to-zoom functionality to zoom in on pictures to make it easier to read words in the pictures. In previous android versions (2.1 to 2.3.3 and 2.3.4 if you're running cyanogenmod) the pinch-to-zoom works fine. But if the app is run on an ICS (Android 4.x) device, the axes seem to handle the enlargement of the picture individually. i.e. when you move your fingers apart horizontally, the image gets very wide, but stays the same vertical size, and vice versa.
First, does anyone know why this is happening?
And second, does anyone know of a way to fix it to work as it did before?
I will update to include screenshots.
Update: I have confirmed this is also an issue with Honeycomb. i.e., 3.x OS acts the same as 4.x ICS.
Sense, running the latest HTC update:
ICS, on AOKP, but verified this is an issue with standard ICS distros as well:
Solved this. Code was previously:
protected function onZoom(e:TransformGestureEvent, img:Image):void
{
DynamicRegistration.scale(img, new Point(e.localX, e.localY), img.scaleX*e.scaleX, img.scaleY*e.scaleY);
}
change the final e.scaleY to e.scaleX. This makes it scale based on only one portion of the zoom (in the x direction) and scales both X and Y accordingly. Not exactly perfect, but it works very well in practice.
Final code is this:
protected function onZoom(e:TransformGestureEvent, img:Image):void
{
DynamicRegistration.scale(img, new Point(e.localX, e.localY), img.scaleX*e.scaleX, img.scaleY*e.scaleX);
}