I've updated the package with @ar2rsawseen HTML/CSS styled dialog, which the HTML5 port fully support Gideros native dialogs API. I also added stubs for geolocation API, which is the only missing standard part. Let me know how it behaves for you.
@pie, do you still have issues with JSON ? I looked through the code and couldn't find anything wrong yet...
Yes, it is available for testing, but only to those who pledged more then €50 in the KS (it was the €50 reward). All €50 backers should have received instructions on how to do that by email. If you are in one of them and didn't receive the email, then PM me (indicating your name as it appears in your kickstarter profile).
I've trying my current game and there are a few things I've noticed ...
1. The game doesn't utilise 'retina' screens. I have upto @4x resources available, but it only loads @2x on my Mac Book Pro. I have there same game running with the Panda engine (which has a retina setting) and my game correctly loads the @4x resources.
2. Touches respond very sluggishly on iOS Safari (iPhone5s). Sometime you touch and it registers as two touches one of the being delayed by a second.
3. Changing orientation / rotating the phone, makes the game go stretched and off to one side.
4. On iOS Safari (iPhone5s), my game doesn't always load the next level (works fine on desktop) - this could be due to atlas loading / memory?
@Ninjadoodle, 1. I don't know much how retina support changes from standard support, nor how we are supposed to detect it and enable it. Must some Safari specific extension... 2. I think iOS safari tries to handle touch event by itself, scrolling the page and so on, leading to some weird behaviors. Once again there may be safari specific extensions to deal with 3. Yes resize events are not handled correctly, nor actual app orientation 4. I suspect a memory issue, is it possible to get a console log from iOS Safari ?
It is possible to debug iOS safari, inside Safari on Mac, when device is connected to this Mac. Pretty neat feature actually, wish Android had something similar
BTW, I just fixed sound issue on safari by adding a resampler within audio path. Space invaders should now work on Safari: http://apps.giderosmobile.com/invaders/
1. With the retina issue - I know that both Panda Engine and Construct 2 support (high dpi / retina). This is not just related to Safari (happens on all browsers), but whether the device the game is running on, is magnifying the graphics to be readable on screen. @2x images are also used on a lot of HTML5 websites and loaded if on a 'retina / high dpi' device.
'Retina' is only an Apple specific word, but the same thing is used on many devices.
Lets say your devices display is 2880x1800 pixels. If stuff is to be shown at this size, it would be to small to read, so the device magnifies everything x2. This in turn makes images look blurry, unless the html5 program knows that they are being magnified and shows @2x images instead.
What I'm guessing is that there needs to be a check whether the device is running in 'high dpi /retina mode' and @2x images need to be loaded to counteract, otherwise graphics will look blurry on any device using this mode.
Like I said, I know there are a lot of engines using this, so maybe we could ask for advice?
If anyone could elaborate on this or explain it better, that would be awesome
@Ninjadoodle you probably already know, but should mention, that you also need to enable Retina in your Gideros project settings inside Gideros Studio.
Thank you, I have @2x and @4x setup in my project settings
This works really nicely, but as I mentioned before, it still only loads the @2x images on my 2880x1800 screen, as it thinks its only 1440x900 (because of the zooming).
I think the tag you mentioned above, is what the other engines use to make sure images show up nice and crisp and actually utilise the hi dpi display.
Thank you heaps for posting it ... I'm sure that it will help @hgy29 out!
Hi all, I have updated the template once again as well as the demos. This time, I tried to fix orientation issues, i.e. always display the app in a natural way whatever the browser dimensions are. This is a little hackish though, what happens is that orientation settings are now simply ignored, and scale mode is fixed to letterbox. There is probably better to do about scale mode, but the result is not so bad ATM...
If you try changing between Portrait and Landscape, the game is nicely centred.
Is there a way to achieve this?
PS. I was playing with the touch on mobile and it looks like every touch is registered as two. Like you said, I thing this "might" be attributed to the fact, that you can move the game frame up and down with you finger on the mobile browser. Try this with the Invaders game, put your finger on screen and drag the game around (it should stay locked, but it doesn't). Is there a way to lock it in place so it doesn't move (again, like in the example Construct 2 game I've posted).
Another thing, I saw luasocket.lua in template. Is it mean that game with lua socket will work on Web? Is there any wrapper for websocket or something?
According to emscripten doc, sockets calls will use websocket. This means that luasocket should work in client mode, and provided the server is websocket compatible. On the other hand, DNS functions may not work at all... Better not hoping too much from luasocket in HTML5!
I'm looking to potentially use it with Noobhub, where luasocket would be client only I believe. Would be keen to test as and when it becomes available!
Comments
Likes: hgy29, SinisterSoft
Let me know how it behaves for you.
@pie, do you still have issues with JSON ? I looked through the code and couldn't find anything wrong yet...
Likes: SinisterSoft
Is the html5 export available for testing now? Maybe I'm just misunderstanding
If yes, where do I go? haha
Thank you in advance!
I sent you a pm
Thanks again for the hard work on this exporter!
I've trying my current game and there are a few things I've noticed ...
1. The game doesn't utilise 'retina' screens. I have upto @4x resources available, but it only loads @2x on my Mac Book Pro. I have there same game running with the Panda engine (which has a retina setting) and my game correctly loads the @4x resources.
2. Touches respond very sluggishly on iOS Safari (iPhone5s). Sometime you touch and it registers as two touches one of the being delayed by a second.
3. Changing orientation / rotating the phone, makes the game go stretched and off to one side.
4. On iOS Safari (iPhone5s), my game doesn't always load the next level (works fine on desktop) - this could be due to atlas loading / memory?
Thanks again!
1. I don't know much how retina support changes from standard support, nor how we are supposed to detect it and enable it. Must some Safari specific extension...
2. I think iOS safari tries to handle touch event by itself, scrolling the page and so on, leading to some weird behaviors. Once again there may be safari specific extensions to deal with
3. Yes resize events are not handled correctly, nor actual app orientation
4. I suspect a memory issue, is it possible to get a console log from iOS Safari ?
You may want to try some of the tags described here: https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html and see what happens...
Pretty neat feature actually, wish Android had something similar
Space invaders should now work on Safari: http://apps.giderosmobile.com/invaders/
Template package updated too!
Likes: SinisterSoft
Thanks for the reply
1. With the retina issue - I know that both Panda Engine and Construct 2 support (high dpi / retina). This is not just related to Safari (happens on all browsers), but whether the device the game is running on, is magnifying the graphics to be readable on screen. @2x images are also used on a lot of HTML5 websites and loaded if on a 'retina / high dpi' device.
'Retina' is only an Apple specific word, but the same thing is used on many devices.
Lets say your devices display is 2880x1800 pixels. If stuff is to be shown at this size, it would be to small to read, so the device magnifies everything x2. This in turn makes images look blurry, unless the html5 program knows that they are being magnified and shows @2x images instead.
What I'm guessing is that there needs to be a check whether the device is running in 'high dpi /retina mode' and @2x images need to be loaded to counteract, otherwise graphics will look blurry on any device using this mode.
Like I said, I know there are a lot of engines using this, so maybe we could ask for advice?
If anyone could elaborate on this or explain it better, that would be awesome
An example article on how to deal with this ...
https://www.quora.com/Responsive-Web-Design/What-is-the-best-method-for-adding-2x-images-to-webpages-that-will-be-displayed-on-the-new-iPad-with-Retina-graphics
*************
2. When trying to debug using console, often the game crashes (on iOS Safari) and therefore also closes the console (so I can't see any errors).
@hgy29 searching for emscripten retina provides this flag:
https://kripken.github.io/emscripten-site/docs/api_reference/html5.h.html#c.EMSCRIPTEN_FULLSCREEN_CANVAS_SCALE_HIDEF
Thank you, I have @2x and @4x setup in my project settings
This works really nicely, but as I mentioned before, it still only loads the @2x images on my 2880x1800 screen, as it thinks its only 1440x900 (because of the zooming).
I think the tag you mentioned above, is what the other engines use to make sure images show up nice and crisp and actually utilise the hi dpi display.
Thank you heaps for posting it ... I'm sure that it will help @hgy29 out!
Likes: SinisterSoft
Likes: SinisterSoft
This is a little hackish though, what happens is that orientation settings are now simply ignored, and scale mode is fixed to letterbox. There is probably better to do about scale mode, but the result is not so bad ATM...
Tell me what you think about that
I've tried the new version and it actually works very nicely on both desktop browser and mobile.
I've noticed one thing ...
On Mobile - if you rotate the screen into 'landscape' mode. the game moves up slightly (it's not centred).
Here is an example of a game made with Construct 2 ...
https://td2tl.com/license-html5-games/stay-on-the-road
If you try changing between Portrait and Landscape, the game is nicely centred.
Is there a way to achieve this?
PS. I was playing with the touch on mobile and it looks like every touch is registered as two. Like you said, I thing this "might" be attributed to the fact, that you can move the game frame up and down with you finger on the mobile browser. Try this with the Invaders game, put your finger on screen and drag the game around (it should stay locked, but it doesn't). Is there a way to lock it in place so it doesn't move (again, like in the example Construct 2 game I've posted).
I've found this link ...
http://www.ibm.com/developerworks/library/wa-games/
It looks like there are some ways to prevent the dragging of the canvas window.
Thank you for the awesome work!
Ok, so adding this to gideros.html, prevents the window from dragging ...
document.body.addEventListener('touchmove', function (ev) {
ev.preventDefault();
});
But, it doesn't help with the touch problem ...
Every touch is still treated as two for some reason.
I've played with the touches some more and noticed ...
... on Mobile Browsers - if I hold my finger down for a moment, I get a normal one Touch response.
However, if I simply tap the object, I get two touches instead of one.
This doesn't happen on the desktop, or when testing on the device using the Gideros Player. It only happens in HTML5.
Hope this helps!
I've had a look around and it looks like the touch issue is related to this ...
http://giderosmobile.com/forum/discussion/5959/touchmouse-events-for-desktop/p1
I've tried unpicking the options ...
Touch events generate mouse events
Mouse events generate touch events
... in the project settings, which seems to fix the issue.
Hopefully this helps
Another thing, I saw luasocket.lua in template. Is it mean that game with lua socket will work on Web? Is there any wrapper for websocket or something?
On the other hand, DNS functions may not work at all... Better not hoping too much from luasocket in HTML5!