Super Easy HTML5 Project Previewing on Mac
Armelline
Member, PRO Posts: 5,331
Note: You may have to run Xcode and install the various command line tools it install with it. I'm working on the assumption that if you're making GameSalad games you'll already have done that.
Although GameSalad has an HTML5 preview engine build right into the Mac app, it doesn't give an entirely accurate view of how projects will look and play. The two most prominent differences are the lack of custom collisions and the lack of custom fonts.
This means that to get a fully accurate view of how your project will play you have to publish it, generate an HTML5 version, download that HTML5 version, then upload it to a web server.
That last step is problematic for some. It may be that you have no web server available. But if you're on a Mac... you do!
Skip to the end if you just want a nice easy Quick Action and don't care how it works!
Introduction to Python's Web Server
macOS ships with Python installed, and Python includes a web server. This makes it super easy to test your HTML5 projects on your Mac without needing to upload them to a web server.
To test this, just open up the Terminal app and input this command:
python3 -m http.server 8080
This will start your Python web server. This python web server will take the current directory when you run it and turn that directory into a web site.
Then all you need to do is open the web browser of your choice and go to the following URL:
localhost:8080
Since we aren't trying to run a game during this test, you should see a directory listing, likely of your home folder. You see your home folder because Terminal windows default to that folder (~/) in macOS.
Note 1: If you're on a version of macOS old enough to not have Python 3 installed (fa, you can still do this, you just need a slightly different command:
python -m SimpleHTTPServer 8080
Note 2: I found that if I used a port other than 8080, scene changes would break. I didn't investigate it further, I just stuck with 8080.
Navigating to your Game
Now we need to run the server from within your game's folder. I just published and downloaded a copy of my game Sand, so we'll need to navigate to that directory. Doing this in Terminal is really easy.
First we type in cd, which stands for "change directory".
cd
I can either type the full path of the folder in, or I can drag the folder onto the Terminal window. Either way, I'll end up with the following, since the folder for my game is still in my Downloads folder:
cd /Users/Armelline/Downloads/Sand
If I'm typing it in I can save a little time by using ~/ to indicate my Home directory.
cd ~/Downloads/Sand
Once there, if I can run the web server command above again and voilà, I have my game running on a web server on my own computer.
Putting It All Together
Let's put it all together into some simple steps.
- Open the Terminal app.
- Navigate to my game's folder location.
- Run the Python web server.
- Open the URL in a web browser.
cd /Users/Armelline/Downloads/Sand python3 -m http.server 8080
Two commands in Terminal and opening a URL (which I recommend you bookmark if you do a lot of HTML5 testing).
Note: If you renamed your "sample-index.html" file to "index.html" you'll be taken directly to your game when you load up "localhost:8080" in your browser. If you didn't, you'll be shown the directory listing and can click on "sample-index.html" to be taken to your game.
But surely... it can be easier? Surely some of you are... as lazy as me?
Read on to see how you can make this even easier!
Contact me for custom work - Expert GS developer with 15 years of GS experience - Skype: armelline.support
Comments
A Quick Action
macOS features a handy function called Quick Actions. These actions can be run on any folder or file in Finder. To access them, you just need to right click/command-click on any folder or file in Finder. If you have any quick actions, you can just click on them and they'll be run with the selected folder or file as the input.
I made a quick Quick Action to let me run the web server this way. So all I have to do is right click on the game's folder, select "Web Server" from my Quick Actions, and then tab back to my web browser to test.
You can download the Quick Action at the end of this post, but if you want to set one up yourself, it's really easy.
Open up Automator and choose "File>New>Quick Action".
Once you have your new Automator project open, you need to add a "Run AppleScript" action, and put in the following ApplesSript code:
on run {input, parameters} set gamePath to POSIX path of input tell application "Terminal" do script "cd " & gamePath in window 1 do script "python3 -m http.server 8080" in window 1 end tell end runYour window should look like this:
Then you can save your new Quick Action, naming it whatever you want. Once you're done, it can be accessed through Finder any time you want. Super quick HTML5 testing with no uploading to a server is then yours to use!
Just Give Me The Download
If you just want to download and use the Quick Action, you can do so right here. Enjoy!
(If you don't trust me but are also too lazy to make it yourself using the instructions above, you can just open the Quick Action file in Automator and confirm it does only what it says above.)
Contact me for custom work - Expert GS developer with 15 years of GS experience - Skype: armelline.support
What about MAMP? That's what I use to test HTML5 games. Super easy to set up and run the server.
Another great option. This one doesn't require anything to be installed and should work out-of-the-box on all Macs, and doesn't require the game to be put in any specific folder - the server runs from where the game is.
Contact me for custom work - Expert GS developer with 15 years of GS experience - Skype: armelline.support
Hi @Baguvix If it is not a bother for you, could you explain to me how MAMP is used and what is the procedure to test an HTML5. or where could I read about this?
Thank you
@CasualEvolution there's some more modern / better ways to do preview now. Also, some of this is no longer an issue because we have implemented custom collison shapes and fonts in the HTML5 engine.
The quickest way is to import your game into the HTML5 creator (creator.gamesalad.com).
You can do that by publishing your game, then going to creator.gamesalad.com, and then importing the game from your published projects. When you preview in the web creator, you'll see the most accurate HTML5 preview.
Hope that helps!
Hi @adent42 thank you very much, this looks much better! :)
Hi @CasualEvolution, I remember when I first set up MAMP I followed a tutorial from yoyogames. I can't find the link anymore but this guide from html5hive might help: https://html5hive.org/how-to-setup-a-localhost/
I didn't know about @adent42's approach and perhaps it is better, but when I was developing games for Legends of Learning I needed a local server for their test harness and MAMP fitted just fine. All my 3 games currently live on LoL were developed with GS and tested with MAMP.
Oh when I mentioned newer ways to handle local web server:
https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server
Basically python comes with a web server, so you can run it from the command line.
If you need https to test:
https://stackoverflow.com/questions/19705785/python-3-simple-https-server
Hi @Baguvix and @adent42 thanks
For now what I did was publish the game as html5, then download it and upload it to a folder where I have my website hosted and then I ran it from there and it seems to "work".
There are a lot of things, at least visual, that aren't right, that don't look the way they should... but that's why it's hard for me to see what works well and what doesn't.
I tried to import it from creator.gamesalad.com, but the project loads with many errors and the play button says that I have 351 errors to fix! 😳
Is there a guide on what things don't work or work differently in the online version of GS compared to the Mac version?
Thanks
So the creator errors are likely due to things the windows creator allows that it's not supposed to (mostly related to using scene attributes in prototypes).
As for visual errors, send me the publishing link and a description of what to look for and, if I have time, I'll take a look.
That's literally what this post was about :D
Talking of HTML5 though, @adent42, is there any way to tell device orientation when publishing as HTML5?
Contact me for custom work - Expert GS developer with 15 years of GS experience - Skype: armelline.support
So we don't detect it with the engine, we just render at the original orientation. You'd have to add something custom, maybe with the code we using in the redraw delegate.
Thanks. A publisher asked for it but it really doesn't seem worth trying to learn to do that just to limit how people can play the game!
Contact me for custom work - Expert GS developer with 15 years of GS experience - Skype: armelline.support
Hi, could someone tell me what is the difference between these indexes? which one should be used?
Thanks
You'll want to use sample-index.html, @CasualEvolution
Just a quick tour:
@Armelline i have a feeling i know where they were going with it. some publishers and sites want to throw up a warning for you to rotate your device to ensure the correct orientation for the game.
Exactly that!
Contact me for custom work - Expert GS developer with 15 years of GS experience - Skype: armelline.support
Thank you very much for the detail, I take note of this!
I did another HTML5-focused project recently and did a lot of previewing so ended up editing my Automator script to be a little more robust. Now it opens Terminal if it isn't open and will make a new window to run in. If any mod would like to edit it into the second post, that would be appreciated! Still probably not the most efficient way to do this but saved me a ton of time with testing!
on run {input, parameters} set gamePath to POSIX path of input tell application "Terminal" activate delay 1 -- Add a small delay to ensure Terminal is frontmost do script "cd " & gamePath & " && python3 -m http.server 8080" end tell -- Open the address in the default browser do shell script "open http://127.0.0.1:8080" return input end runContact me for custom work - Expert GS developer with 15 years of GS experience - Skype: armelline.support
Hi @Armelline in these days I plan to return to GS, I'm super disconnected and forgotten about everything 🤣 BUT if I can help you in some way or with a test, tell me it will be a pleasure!
Drop me a PM and let's see!
Contact me for custom work - Expert GS developer with 15 years of GS experience - Skype: armelline.support