A HTML5/WebGL Journey (various fixes included to download)

Previous topic - Next topic

spacefractal

EDIT: THE TOOLS AND FIXES IS IN THIS THREAD TO DOWNLOAD

any changes and fixes is in this post (im will edit that post by now):
https://www.glbasic.com/forum/index.php?topic=11576.msg102262#msg102262

https://spacefractal.itch.io - All ported games.

____________________

Actuelly PowerUp Elevation works fine, but has some issues.

Etc for start, why that tiny window? We need to change the html file to get it looks much nicer.

Also arrows keys seens not work? but in this case, can been a bug in code of course (which im thinks its is), same with sound fx ingame as sound in meny works as intended.
Genius.Greedy Mouse - Karma Miwa - Spot Race - CatchOut - PowerUp Elevation - The beagle Jam - Cave Heroes 2023 - https://spacefractal.itch.io/

spacefractal

#1
soon im can get that window works correctly in near full screens (none options buttons also works at all), then im will get the gameinput api to works with that as well or will give that a try.

Also there is a stupid bug in the compiled js code. for some reasons the pachages name using full local path to its data file, which its should not do that. So soon you move it, its would not work anymore.

Easy to fix, even im might need to do that after compiling. Its just a search and replace issue. Most important is really get the tiny window to work as excepted.

Then im have plans to put my some of games online on my webpage, so even im might have removed some of my Android games, you would still play them.
Genius.Greedy Mouse - Karma Miwa - Spot Race - CatchOut - PowerUp Elevation - The beagle Jam - Cave Heroes 2023 - https://spacefractal.itch.io/

spacefractal

Found out SOUNDPLAYING() does not work with HTML5 (but ISMUSICPLAYING() does).

HTML5 with music so then works best with music commands and not sound, totally opposite of the Steam Deck (where music commands breaks the game, due a fullscreen window). Lol (but both works with wav throught).

Now im did added a USEMUSICOMMANDS, so music can uses either as a sample or streaming in the game. But managed to fix it throught.

Im do still wonder why that tine window, and no when im change the canvas, its still using 300x150 upscaled. would have been nice if im could get it to do it in 1280x720 as that game uses by default. Im do still have a strange issue with one of the font, that should been tiny too, but does very much opposite.

And also if the game can save its status? Here im have no idea im should uses document or appdata folder? or require a upload to a server. Not checked yet.

btw, if the canvas bug can been fixed, then PowerUp Elevation can been my first HTML5 game.
Genius.Greedy Mouse - Karma Miwa - Spot Race - CatchOut - PowerUp Elevation - The beagle Jam - Cave Heroes 2023 - https://spacefractal.itch.io/

spacefractal

Now PowerUp Elevation have two issues left:

- The main canvas 320x150, which im wanted it should been in 1280x720, but have fixed a ingame font, that can been too big on those small resolutions. hihi.
- Im can not read files after a session. But its could been due a localhost issue. No idea here.
- Also im found out arrows keys and property also right mouse key (which we been honest should not been used as touchscreens dont have them) also not work. But for me they are low priotity issue as im have seen that before on other webgl games. So im in GameInput might move the arrows keys to been IJKL keys instead (but you can remap them).
- Also SOUNDPLAYING() did not work, so you might cannot uses SAMPLES for music, if you using it to looping it. but require to uses the MUSIC commands instead. Totally opposite than Steam Deck, that diddent like the MUSIC commands (showed a empty Windows Media Player window, caused the games to been unplayable. But im got a workaround around those. So not important for me either.

Except the above, PowerUp Elevation is fully playable and seens to looks fine. Im want that one to been my first HTMl5 Webgl game as its actuelly quite close, and a game you dont needs those arrows keys anyway.
Genius.Greedy Mouse - Karma Miwa - Spot Race - CatchOut - PowerUp Elevation - The beagle Jam - Cave Heroes 2023 - https://spacefractal.itch.io/

spacefractal

im got a more progress on the game. trying to get the canvas in the right size.

Im got it partically to work, but the CANVAS does somehow upscaled by 1.5 and then the game still looks blurry due that upscaling.

Im cant get that work property, but still shows better and the game is now more playable. Not perfectly mind you.

PS. Im cant get any fullscreen/resize to work (hence im removed the buttons), but its actuelly not important right now at all.
Genius.Greedy Mouse - Karma Miwa - Spot Race - CatchOut - PowerUp Elevation - The beagle Jam - Cave Heroes 2023 - https://spacefractal.itch.io/

spacefractal

Im chossen to add level codes for the game, possible to perform them by mouse, keyboard and touch in the main menu and also possible to skip any levels as well.

So now PowerUp Elevation is completable without any save, if saves would been failed.

The only main issue im actuelly have left is that upscaling canvas issue and.... to get fullscreen working (which is not that important).
Genius.Greedy Mouse - Karma Miwa - Spot Race - CatchOut - PowerUp Elevation - The beagle Jam - Cave Heroes 2023 - https://spacefractal.itch.io/

spacefractal

The canvas issue was due a issue in Windows, when you doing font bigger than 100% general. This also cause canvas to been scaled too for some reasons. This wont works in a game like this.

Anyway here is a test version im have uploaded:
https://spacefractal.itch.io/powerup-elevation

Its not perfect mind you, but its should been playable (level skip might not work as it should, fixing that later).

Game still not included in search by now (because im want it to been tested first). but enable that later this week (as well comments).
Genius.Greedy Mouse - Karma Miwa - Spot Race - CatchOut - PowerUp Elevation - The beagle Jam - Cave Heroes 2023 - https://spacefractal.itch.io/

spacefractal

Im can confirm any mouse clicks is threated as a left button, dispite there is no right menu used in the canvas. so this is actuelly a bug. for this game mouse users could turn the burn with right button (or opposite the buttons showen, where the mouse pointer is).
Genius.Greedy Mouse - Karma Miwa - Spot Race - CatchOut - PowerUp Elevation - The beagle Jam - Cave Heroes 2023 - https://spacefractal.itch.io/

spacefractal

#8
got a another game playable, that is this one (and managed to fix the canvas issue, but its does still not auto resize, but a least on launch, so no more tiny window:
https://spacefractal.itch.io/the-beagle-jam

Etc from the 64x64 pixel jam ("converted using 96x64 pixel resolution).

That game diddent require save game or such at all. so a good candicate for such a version.
Genius.Greedy Mouse - Karma Miwa - Spot Race - CatchOut - PowerUp Elevation - The beagle Jam - Cave Heroes 2023 - https://spacefractal.itch.io/

spacefractal

im got most of the canvas issue fixed. The only main issue left with that imporant issue is notificy glbasic on a resize change. Then we soon get a nice and clean canvas.

This is the issue number one im want to get fixed, before checking other one, etc the arrow keys and right click. You can still get it playable without them really.
Genius.Greedy Mouse - Karma Miwa - Spot Race - CatchOut - PowerUp Elevation - The beagle Jam - Cave Heroes 2023 - https://spacefractal.itch.io/

SnooPI

Spacefractal, this is normal for the right mouse click, HTML5 was designed for browsers.

Encouragement for your new projects  :good:

spacefractal

actuelly....

im just got right click to work. There was no reason to not to do that really, because right click menu was not there and you can seperate mouse and touch events by code. Controllers and keyboard can been supported as well. but not checked those yet. We do need a bit more c++ bindings from java script.

Would been like to see if possible to could been in same style as we did with Android with the Java communication.

Genius.Greedy Mouse - Karma Miwa - Spot Race - CatchOut - PowerUp Elevation - The beagle Jam - Cave Heroes 2023 - https://spacefractal.itch.io/

spacefractal

#12
now, im finally got resize canwas to work. Looks insanely cool in PowerUp Elevation when you resize with the border im uses.

So status is:
- Canvas has finally property to works as intended. This does require some code as its not part of the source code. The main issue is GETDESKTOPSIZE does actuelly not refleks on the change, but you can workaround it quite easy.
- Right Click now works.

Missing is:
- Get Fopen functions to save.
- Get Arrow keys to works (property could do that directly in GameInput).
- Checkout if game controllers actuelly works, but since you can write JavaScript code directly as its was part of a c++ code, its can been a part of GameInput.
- Get fullscreen to work again.

Im will in this week start a new thread with all fixes.

Checkout:
https://spacefractal.itch.io/powerup-elevation

PS. Im will share this with othes of course. Its just sooner or later im send anything to Gernot.
Genius.Greedy Mouse - Karma Miwa - Spot Race - CatchOut - PowerUp Elevation - The beagle Jam - Cave Heroes 2023 - https://spacefractal.itch.io/

loftcat

This game is looking very cool...great work. Really fun and cute !  =D

spacefractal

he thanks. im do still working improvement the html5 part. Its now looks much more proff after the internal start.

Today found up, you can still flip pages directly from the c++ code. That could example leads to integrate ads, because im stil not have found up how do a div overlay over a canvas... but you can control pages and the canvas size directly from glbasic.

So the loading now looks better rather than a black screen.
Genius.Greedy Mouse - Karma Miwa - Spot Race - CatchOut - PowerUp Elevation - The beagle Jam - Cave Heroes 2023 - https://spacefractal.itch.io/