Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
Tags

RetroLab

Early access to simulations and prototypes in development for RetroFab · By Itizso

Touch screen support

A topic by Itizso created Jun 19, 2023 Views: 505 Replies: 26
Viewing posts 1 to 6
(4 edits)

I've  finally got around to adding support for touch screens  :) 

This means you can play a simulation using any touch enabled device, including mobile phones and tablets. You should be able to do everything using touch gestures,  like rotating the 3D model (finger drag), zoom in and out (two finger pinch) and most importantly pressing buttons (finger tap) to play the game. 

In addition, for mobile phones and tablets, I've added some additional changes like removing the the keyboard and gamepad controls from the settings menu, and updating the zoom function to fill as much of the screen as possible while still keeping all buttons visible.

You can test this on your touch enabled device with this prototype build of Nintendo's
Parachute Game & Watch. 

Touch screen prototype

If you do test this build on your touch screen device please provide feedback to help improve this new feature.

If it's working well, all simulations on RetroFab will receive this update in the next general release (v0.9.8) and be playable on mobile devices! 

This is amazing!! Plays perfectly on my smartphone. 

I like that the buttons still get pressed even if my fingers aren't always on target especially when the game speeds up  ;-) 

Only suggestion I have is the options in the settings menu on the left are bit small for my fat fingers, so maybe add some space between the options or increase the font size.

Great job! I look forward to playing more of your games on my phone.

Thanks for the feedback!
I'll look into increasing the size of menu items on the settings menu.

I've added some space between menu items on the latest parachute build. Thanks again for the suggestion.

(1 edit)

Nice! Works great. Controls are amazingly responsive. 

The only issue I had was the instructions are too small to read on my phone. And if you zoom in then the ends of each page is cut off and you can't pan left or right. Maybe you can show one page at a time?

But otherwise this is really impressive!

Thanks for the feedback!
You're right, viewing the instructions on a phone without being able to scroll left of right is a problem. I'll work on a solution.

(1 edit)

I now only show one side of the instruction guide at a time in latest parachute build. Thanks again for the great suggestion. The instructions are much more  readable now :)

Just tried it out. Works great!

I suggest an ability to disable the camera movement as mashing the touch screen may disrupt the "drag" input and tilt the camera instantly.

(2 edits)

Yeah, camera rotation was an issue in initial testing as well when your finger missed the button even slightly, so the solution was to increase the size of the touchable area around each button which prevents rotation (and also means if you're slightly off from the button with your finger it will still register as a press). 

Maybe I'll disable camera rotation when playing in zoom mode on mobile. Let me think about it. 

Thanks for the feedback and suggestion :)

Thanks again for your great suggestion. In the latest build the camera is now disabled if you zoom in using the zoom button in the game toolbar. Also, when a game starts (by pressing Game A or Game B) it automatically zooms in to prevent accidental rotations during gameplay. You can rotate again by zooming out. 

(1 edit)

Awesome news.

I'm using an iPhone 8 and unable to go full screen in Safari in landscape orientation even after selecting the "Hide Toolbar" option after clicking the "aA" button in Safari (it still leaves a small thin URL bar at the top). Does anyone know of a way to get it fullscreen without any bars or is it something that Itizso needs to look at fixing?

When you tap the play button to launch the game does Safari attempt to go to fullscreen or does the game load inside the page like on a PC browser? 

If so, try running this test build on your phone. If you click on the fullscreen icon in the bottom right does Safari go fullscreen? And what is the  screen dimensions shown when you tap on the info icon?

With Parachute, it attempts fullscreen on launch, but still has the browser's URL and toolbar visible. Pressing the "aA" icon in the browser's toolbar allows you to hide the toolbar but it still shows a very narrow strip at the top with the URL.
After doing some reading this seems like a Safari limitation on iOS (at least on my iPhone 8, unsure about newer iPhones). See https://forum.unity.com/threads/fullscreen-webgl-mobile-on-ios.476006/

A solution mentioned in that thread is to save the website address by clicking safari's icon that looks like a square with arrow pointing upwards (share/options icon?) and choosing the "Add to homescreen" option.

Then launch your website from that new homescreen button. You need to make sure to then rotate your screen to landscape before pressing play to load the game. It seems if you don't rotate first before doing this, then the Safari toolbar is still shown onscreen.

Another bug on my phone is that the audio doesn't work with this game,  also when pressing the graphics detail button, the popup appears mostly offscreen at the bottom and to the left side of the screen so I cant change detail or background image, I can just make out the word "detail" and the top of the menu box (cant see the menu at all if the Safari toolbar is onscreen.

Regarding Popeye, same issues with no sound, I can see the fullscreen expand icon but it doesn't seem to do anything (app is already semi fullscreen I guess but with the safari toolbar showing). Same issue as above when clicking graphics setting button, cant see menu at all.

Additionally, even if I use the "Add to homescreen" method for Popeye, I cant get it to launch in true fullscreen as the safari menu is still there.

Popeye screen info size says 375x667 iPhone.

I tried parachute on my Android tablet and it works well in fullscreen with sound but I first needed to get it to load the mobile site version as it defaulted to desktop page loading.

Some other suggestions:

Hide the game's menu away when playing, or have it accessible so that it pops up by pressing a single ghosted icon.

When clicking the zoom button, perhaps have an option to "fill screen", "fill height" or "fill width". Or automatically check to see if a particular game is wider than it is tall, if it is wider then expand the game to fit screen width. If the game is taller than it is wide (donkey kong dual screen for instance), make the game fill the vertical space instead.

It could also be good to be able to play in portrait mode for games that are taller than they are wide, it seems to currently automatically switch to landscape mode even if I launched the app in portrait orientation.

Thanks for the feedback!

Yeah, it seems like Safari on iOS doesn't fully supports fullscreen :( That's unfortunate. 

As for the sound, again it seems like another limitation of Safari on iOS that requires a user gesture (tap or click) in order to  play each sound. See https://stackoverflow.com/questions/53059288/safari-browser-audio-play-is-not-working. I'll try to code a workaround. I don't have an iPhone so I might need you test again when I do.

In the meantime, see if this browser setting works: https://audiomovers.com/help/faq/i-cant-hear-any-audio-playback-in-the-safari-web-browser

Thanks for testing on your tablet. I'm currently working on adding logic that will display the fullscreen icon for tablets so you can go fullscreen if you launch the game as a desktop site.

 Thanks for the suggestions :) I'll keep them in mind while working on the next test build.

(1 edit)

I just tried Parachute on an old Galaxy S7 and it runs really well, fills the screen better too compared to the iPhone's 8 aspect which doesnt quite match the aspect of the game when you click the zoom button. I'm transported back in time and feel like I'm looking at the real thing.

Would it be possible for you to access the phone's vibrate feature so you could feel some tactile feedback every time you press a button? That would add an extra level of immersion.

I'll be away travelling for most of July into early august so may not be able to give any feedback during that time.
I think the audio issue link you mentioned is only in relation to Safari on Mac, doesnt seem to apply to iPhone as those options are not available.

(1 edit)

I'll see if I can access the phone's vibrate feature to add some haptic feedback.

I've updated the parachute build with a potential fix for the iOS audio issue. Let me know if works on your iPhone.

There does seem to be some advance with the iOS sound issue, sounds now play for a short while albeit a bit distorted but then it goes quiet again shortly after, gameplay also seems to be a lot less responsive with newer version in iPhone 8.

I did find an easier way to get fullscreen on my iPhone without needing to add your website to my homescreen. Load the game's page in portrait mode but before pressing the play button to load the actual game, scroll up slightly on the page and the toolbar should hide, then press play and game will load into full screen mode with no URL or toolbar.

I also tested on a 7th gen iPad and it seems to go to fullscreen in safari but has similar issues with audio after a little while of play, it also has same issue with regards to game graphics popup menu being mostly offscreen and impossible to reach the buttons to change those settings.

Android seems to be the best way to play so far.

Thanks for your efforts... it's all very impressive even if there are iOS issues.

Thanks for the feedback. I'll keep trying to resolve the issues on iOS.

Hey I tried this out on Asus Zenfone 9, Android 13, Firefox 114.20 and Chrome 114.0.5735.147.

It worked pretty well but there was one issue on Firefox: tapping the left and right buttons quickly and repeatedly eventually leads one button or both to get stuck and will not accept input. It occurs every time I reload. I could not reproduce the issue in Chrome.

(3 edits)

Ah thanks! I've included a fix for this Firefox issue in the latest build. Let me know if it's now resolved. 

You'll find a few other enhancements as well that should improve usability:

  • The toolbar is now moved to the top of the screen
  • You can tap the play button for a quick way to start a new game
  • You can now pause a game. The play button changes to a pause button when the game starts.
  • The toolbar is now hidden during gameplay. It reappears when the game is paused or ends.
  • Buttons now generate a vibration on your phone when pressed. You can change the intensity or turn it off in the settings.
  • You can now change the default zoom to your own preference:
    • Tap on the padlock icon next to the zoom button when zoomed in to unlock the camera.  
    • Resize the screen using the pinch gesture.
    • Tap the padlock to lock in the zoom as the new default. Next time you zoom in it will restore your custom zoom.

This build is getting so close to reality on my Galaxy S7 that it's almost tricking my brain into thinking I'm playing the real deal. The haptics really add to the experience and ability to resize and lock is great.

I would recommend adjusting the transparency on the pause/play button when playing so that it's barely visible as that's about the only thing that takes me away from the simulation a little. It might even be worth adding a settings option to hide it completely, but still make the top left corner clickable to reveal the menu, once people know where the button is hiding it they should be able to remember where the menu activation area is. Not sure if others would agree?

I also wonder if any of these two button games originally had an auto key repeat if you held the button down? I notice that you do mimic key repeat on games with a DPad.

Can't wait to relive the Octopus experience on my Android phone. Thanks again for all your efforts, you have some amazing skills.

Thanks for the suggestion for the pause button.  And no, these early Game & Watch games did not have auto key repeat.  

You don't need to wait for Octopus. Here's a test build to try out on your phone! Enjoy :)

Awesome stuff thankyou, plays really well on Android. Certainly a trip down memory lane for that particular game and it has really good gameplay in terms of the risk/reward mechanism (grabbing the loot from the chest whilst staying in that position as long as you can). You don't get that same game mechanic with Parachute.

One more suggestion, it would be good if there was a solid black background available, the grey background is not quite dark enough to make the the gap between the phone screen and a black bezel seamless on some some screen ratios (and will vary between handheld simulations as well). You probably added the grey to create some slight contrast with the darker edges of some heldhelds?

I've found the the star background works best at the moment to hide any gaps around the game.

iOS playback on iPhone 8 is suffering badly with the last few updates (I think the attempt at a sound fix created some major performance issues). Might work ok on new iPhones but probably best to get some feedback from other iPhone owners on that topic.

(1 edit)

There are two things which will add even more realism. (not sure if I mentioned one of these previously)

1) I notice that when rotating the viewpoint of the game around with my finger that you have a light source and this reflects off the surface at different angles depending on the view, it certainly adds a lot of realism.

What if you were able to access the gyro sensor of the phone/tablet in play mode so that adjusting the physical tilt of the phone affected the lightsource direction and hence gave you some simulated changes in lighting as you tilt your phone up/down/left/right. The full screen view would still be locked into place but just the illumination would change and trick your brain into seeing a bit more 3D depth.

2) I've seen some apps on phones such a labyrinth, pinball etc. which fill the screen but adjust the view angle in realtime depending on the tilt detection of the gyro sensor. If you look carefully at the following video you will see what I mean, notice how the viewpoint changes very slightly when they tilt the phone. So when you tilt the phone to the right you would see slightly more of the right side of the buttons for instance. Tilting the phone upwards would allow you to see slightly more of the top edge of the buttons. Perhaps getting a bit complex but something to consider for maximum realism (with ability to turn the feature off). For example, see 

Thanks for the great suggestions. I'll look into it. Perhaps after the next release.

Yep the button issue is fixed and all of the changes in this update are a nice improvement.