Steam HTML5 Compiler

Previous topic - Next topic

loftcat

Quote from: Qedo on 2022-Sep-23
about the local web server not working but are you sure you have python installed?
To check this, open a cmd and run python.exe

Aha! Installed Python and it works  :booze:
So simple when you know how. I'm going to do a little getting started guide for sure!

Qedo

#16
we never think about simple things :D

loftcat

First cut of some steps for another GLBASIC-HTML5 newbie like myself...  what do you think? Anything to add or amend ?

GLBASIC v16 (Steam edition) - Getting started with the HTML Compiler (Windows 10)

Pre-requisites: GLBASIC v16 Steam Edition

1. Purchase the HTML Compiler from Steam as GLBASIC DLC. Once purchased, the HTML Compiler should automatically install via Steam.
There isn't an obvious change to GLBASIC when you launch it, but under Project->Options on the menu, HTML5 and HTML5-webGL options should be available.

2. Install Python. This is not mandatory for the compiler to work, but is needed if you want to test your compiled html5 program in the simplest way. You can install the latest version of Python from the Microsoft App Store.

3. Create a new project with the following code:

SETLOOPSUB "MainLoop1"
SUB MainLoop1:
   PRINT "Hello World",10,10
   SHOWSCREEN
ENDSUB

The key thing is a SETLOOPSUB should be used for main loops when compiling to HTML5.

4. On the menu go to Project->Options and set Platform Configuration to 'HTML5-WebGL' and click OK.

5. Go to Compile->Build Multiplatform. Click on HTML5-WebGL to compile your project.

6. Locate your project folder in your GLBasic home folder. Navigate to the ..\<projectName>.app sub-folder of your project. If there isn't a Media folder, create one. Inside your Media folder, if you do not have any files, create a simple dummy text file. It doesn't matter what it is called, as long as a file exists here.

7. Go to Compile->Build Multiplatform. Click on HTML5-WebGL to re-compile your project

8. Navigate to the ..\distribute\HTML5 folder and you should see several files of these types: .data, .html, .js, .wasm and .bat. Providing you have installed Python in step 2, you should be able to click on the run_local_test.bat file to run your project in a browser using a local web server.

erico

Thanks for the heads up, I will sure be trying web compile this year and this will help.

dreamerman

I completely forgot about Python requirement, but wasn't it included with older (v14 / v15) instllation of html5 target, hm not sure about that. Any specific Python version is required, like 2.x or newer 3.x?
Good job for testing this, few new question comes to my mind, for example what about simple OpenGL inline like glTranslate etc, will something like that work in WebGL?
It would be great to see additional platforms as such DLC, Linux should be first.
Check my source code editor for GLBasic - link Update: 20.04.2020

Qedo

#20
it seems so, see https://www.glbasic.com/forum/index.php?topic=6569.msg52954#msg52954
I tried to compile Opengl.bas and compile it though the result does not seem correct to me
My Python version is 3.8.3

loftcat

My Python version is 3.10.7

svenart

hey everyone. I just have bought steam glbasic and the html5 compiler and got very frustrated because it was not working "right from the start". However, after reading this thread I followed the instructions and now my first game runs almost perfectly in a browser yiehhhaaa.....

Only 2 problems are there right now.

1. The right mouse button is not working :( Is there a way to fix this?
2. it seems that getscreensize is not working correct.

However, can´t wait now to finish a first working demo for browser and upload it on Itch.IO or my own website. Great!
https://spagetticoder.itch.io/

www.medievalworlds.com

svenart

Tried to compile 4 of my 4 games for html5, 1 of them worked fine without much changes needed.  =D

Uploaded a first version for testing on Itch.io.

My most important question now: How can I get rid of this annoying blue menu in the bottom area?

When using playsound, the volume seems not to. Samples will always be played at 100% volume.

https://spagetticoder.itch.io/

www.medievalworlds.com

Kitty Hello

The blue menu is in the template html page. I have to check the volume thing.

hardyx

Quote from: loftcat on 2022-Sep-26
...
Good guide for GLB HTML5, is good to know all this things.
You can download Python in the offlicial page too, but I think in MS Store is easier for begginers.
https://www.python.org/downloads

svenart

Is there any hope to get a solution for the mouseproblem in html5?

Tried everything but can´t get it to work

- Mouseposition is only available when button is clicked. (no mouseover effects)
- Mousbutton 2 is not working
- mousewheel (button3) is not working
- also input and some keys are not working as they should.

Honestly, this html5 compiler is quite useless without proper mouse and keyboard controls. Please, PLEASSSE fix it.
https://spagetticoder.itch.io/

www.medievalworlds.com

loftcat

Hope we see some improvements too. An updated HTML version of GLBASIC will really help extend it's life and make it worth purchasing on Steam.

Kitty Hello

I'll try to update the HTML5 libraries. Did you try the "fulscreen" option and/or the MOUSEAXIS instead MOUSESTATE?

svenart

I tried Mousestate but it is not working. My HTML Games are all running in window mode, have not tried fullscreen.
https://spagetticoder.itch.io/

www.medievalworlds.com