All Uzebox Games Online! (Cuzebox and Emscripten)

The Uzebox now have a fully functional emulator! Download and discuss it here.
User avatar
Artcfox
Posts: 1382
Joined: Thu Jun 04, 2015 5:35 pm
Contact:

Re: All Uzebox Games Online! (Cuzebox and Emscripten)

Post by Artcfox »

What I have done in the past is to download the Git repo as a .zip file, and then extract only the part of the zip file where the games and data files are stored, telling my zip program to not create directories when extracting. That quickly put everything in the same directory for me, though it doesn't solve the issue of duplicate incompatible files.

Just the games libraries with subdirectories seems like the best option, then the user can choose the games they want by hand, or extract all (or a particular selection) using the "do not create directories" option in their zip program.
User avatar
nicksen782
Posts: 714
Joined: Wed Feb 01, 2012 8:23 pm
Location: Detroit, United States
Contact:

Re: All Uzebox Games Online! (Cuzebox and Emscripten)

Post by nicksen782 »

I've merged the new Online Emulator into master and it is available online.

There were 3 versions of the Online Emulator live. The original one, the newer one that I put in place for a couple months, and the new one. I disabled the older versions and configured them to do a redirect to the new version URL. If a gameid was passed on the URL then it will be passed too. So, old links should continue to work and did when I tested them.

I also went through each game on the Uzebox wiki and updated the "Play In Browser" link to point to the new URL.

This is version 1.9.0. I want to release 2.0.0 when I have all features completed. I still have some work to complete concerning the delegation of games database tasks to people other than myself. I'll talk about that later when it is closer to being done.

Okay, the new feature list is pretty long. Here we go!
  • Can run independently of UAM. Or, if you have a UAM login you can get some additional features depending on permissions.
  • The Emscripten instance does not use an iframe anymore. Speed?
  • The buttons you press in the games will be displayed on the two on-screen gamepads.
  • The on-screen games work!
  • Supports gamepads! You will need to configure your gamepad button mapping at least once. After that, those settings are saved to LocalStorage for next time. Configure gamepad link is at the bottom of the page. The dev console will report if your gamepad connected. I don't have that displayed in the GUI.
  • Gamepad configurations can be uploaded or downloaded from the gamepad config view.
  • The EEPROM file is saved to LocalStorage when the emulator stops (stop, reload, unload, page refresh.) It is loaded each time you load a game. This means that you can keep your hi scores. Also, the Emuze program can be used to edit that EEPROM data. This all happens automatically.
  • Fixed a bug with the Play In Browser links where the game sound would not start. This is a default browser config. The solution is to have you click the screen to actually start the game. The emulator canvas will let you know if you need to do this. This isn't a problem with games loaded in other ways.
  • There are now 2 emulation "cores" available. Web Assembly and ASM.JS. If your browser supports WASM then that will be used. Otherwise the ASM.JS core will be loaded. If you want, you can toggle which core you use.
  • The Emscripten CUzeBox will start with the lower resolution and the debug view off by default.
  • I made a few small modifications to CUzeBox (on-the-fly at compile time) that allows the Online Emulator to "ask" CUzeBox what the current buttons pressed are and some of the flags. This means that the application can display your keypresses (keyboard and gamepad) for some visual fun and the indicator buttons above the emulator canvas will always show the correct state. Concerning player 2, ALT+A and ALT+SPACE cannot be used by the keyboard because they are reserved by the browser. Normally you hold either ALT to redirect input to player 2. I added in BACKSPACE as an additional player 2 modifier key.
  • If you load a game from the database selector you will be provided with a game files list below. You can click any file to download it individually or you can click the download as .zip button to download all game files as a zip. The Direct Play In Browser link is in that section too.
  • There is an optional "Auto-Pause" feature that you can turn on. If enabled and your mouse cursor is not over either the on-screen gamepads or the emulator canvas the Emscripten instance will pause. This is NOT the CUzeBox pause. This actually pauses Emscripten. Move your mouse over to one of those areas to unpause the game.
  • A game can be cached. This is due to how I load the files. Upon selecting a game they are downloaded and stored in RAM. If you stop the game you can use the reload button to start the game again without another download of the game files. Or, you can just press the reload button and the game will just restart. This is handy for some games that do not allow you to return to the main screen... and it is convenient. If you click the unload button then the game will be stopped and the files in RAM will be removed. The cache only applies to the current game. Any new game is a new download.
There is still room for missing features. If you have a good idea please share it with me and I'll see what I can do.
User avatar
Jubatian
Posts: 1564
Joined: Thu Oct 01, 2015 9:44 pm
Location: Hungary
Contact:

Re: All Uzebox Games Online! (Cuzebox and Emscripten)

Post by Jubatian »

Huh, great progress here, too! I particularly like that you added high score saving.

However now I am certain whatever method you are currently using for the interface doesn't work at me at all. The database is emty (only the "choose a game" entry is in it), and neither of the buttons do anything when I click it (I can not import file or whatever). Firefox 60.4.0esr (64-bit) on Debian Linux.
User avatar
nicksen782
Posts: 714
Joined: Wed Feb 01, 2012 8:23 pm
Location: Detroit, United States
Contact:

Re: All Uzebox Games Online! (Cuzebox and Emscripten)

Post by nicksen782 »

... I just downloaded 60.4.0 and I can confirm what you have found. I'll look into this.

*EDIT*
Okay, the bug was due to a polyfill that did not succeed. It was for the Full Screen effect. I disabled the polyfill. The polyfiller is designed to fail if a loaded polyfill does not actually work. In Firefox ESR 60.4 it fails. Please try again. The full screen feature will not work right with ESR but it won't throw an exception anymore either. Actually, online gconvert doesn't actually use that feature, but the online emulator does.
User avatar
Jubatian
Posts: 1564
Joined: Thu Oct 01, 2015 9:44 pm
Location: Hungary
Contact:

Re: All Uzebox Games Online! (Cuzebox and Emscripten)

Post by Jubatian »

Thanks, it works now!
User avatar
nicksen782
Posts: 714
Joined: Wed Feb 01, 2012 8:23 pm
Location: Detroit, United States
Contact:

Re: All Uzebox Games Online! (Cuzebox and Emscripten)

Post by nicksen782 »

Hi everyone!

It has been a while since I last updated the online games list.

I just added "Circuit Puzzle" from artcfox. (https://nicksen782.net/UAM/APP_emu/emu.php?gameid=275)

If any other entries are missing or need to be updated then please let me know either in this thread or in a private message.
User avatar
Artcfox
Posts: 1382
Joined: Thu Jun 04, 2015 5:35 pm
Contact:

Re: All Uzebox Games Online! (Cuzebox and Emscripten)

Post by Artcfox »

Hey Nick!

I was playing around with the online emulator, and I figured out the parameters to make the output window of the online emulator match that of cuzebox running locally pixel for pixel.

Here is the first part (changes to emu.css):

Code: Select all

--- emu.css     2023-02-14 00:00:49.758325274 -0500
+++ /home/user/emu.css  2023-02-13 23:57:43.914320594 -0500
@@ -193,7 +193,7 @@
 
 html {
        max-width: 1200px;
-       width: 940px;
+       width: 988px;
        margin: 0 auto;
        /*scroll-behavior: smooth;*/
        /*font-family: "Times New Roman, Helvetica, serif";*/
@@ -336,7 +336,7 @@
 #emu_gameSelector    {left: 5px;top: 40px;width: 320px;height: 120px;z-index: 100;}
 #emu_gameFiles       {width: 320px;height: 130px;position: absolute;top: 170px;left: 5px;z-index: 18;padding: 0px;border-radius: 5px;overflow: hidden;}
 #emu_onscreenGamepads{width: 320px;height: 290px;position: absolute;top: 310px;left: 5px;z-index: 18;}
-#emu_emulator        {left: 335px;top: 40px;width: 580px;height: 490px;overflow: hidden;/* background-color: #346cda; *//* background-color: black; */}
+#emu_emulator        {left: 335px;top: 40px;width: 630px;height: 490px;overflow: hidden;/* background-color: #346cda; *//* background-color: black; */}
 #emu_emulator .sectionWindow_content{/* background-color: #22205c; */position: relative;top: 0px;left: 0px;}
 
 #emu_view_uam{
@@ -883,8 +883,8 @@
        background-color: #0c0a38;
        /* background-color: #070707; */
        margin-top: 5px;
-       width: 570px;
-       height: 460px;
+       width: 620px;
+       height: 456px;
 }
 
 .verticalAlign {
And then I had to go in with Firefox's HTML Inspector, and manually edit both of the height and widths in the active canvas line to say:

Code: Select all

<canvas tabindex="0" id="emuCanvas" org_width="310" org_height="228" style="width: 614px; height: 452px;" width="614" height="452"></canvas>
I tried finding that in the original HTML, but I didn't see it there, so I'm not sure how to fix that canvas size properly.

And once those two sets of changes are made, the online emulator matches pixel for pixel with a local cuzebox instance (after you press F3 to disable the debug view, and then press F4 twice in a row to force cuzebox to properly resize its window). :D

Oh, and I like to link people to the online version of my games, do you think it would it be possible to make good quality with flickering disabled be the default, so the games look as intended by their developers?

The Flicker feature in cuzebox makes the games not only run slow, but it also makes games that don't need it look terrible. Maybe the proper way would be a bit flag stored in the database that indicates whether a game would benefit from flickering, otherwise default it to off? Just some stuff I've been thinking about. (Oh, and way back in the beginning of this thread Jubatian said that it should probably be disabled by default, since no games in existence currently require it.)

Edit: Though no matter what I do, it runs super slow for me on a Core i7 desktop machine. Using the latest Emscripten, I compiled cuzebox myself and loaded it locally on a web page, and it runs at native speeds, so I'm not sure what might be causing the slowdown. I thought it might be a shadow effect, but I turned that off and it didn't make a difference. Let me know if I can help debug the speed issue!
User avatar
nicksen782
Posts: 714
Joined: Wed Feb 01, 2012 8:23 pm
Location: Detroit, United States
Contact:

Re: All Uzebox Games Online! (Cuzebox and Emscripten)

Post by nicksen782 »

I will look into this.

You provided a diff, thank you. How could I integrate it to test it out?

I could add something for url params that would set those flags too.

I've been a bit busy and have changed my dev environment. I want to try to do this and add your game this week.
User avatar
Artcfox
Posts: 1382
Joined: Thu Jun 04, 2015 5:35 pm
Contact:

Re: All Uzebox Games Online! (Cuzebox and Emscripten)

Post by Artcfox »

Thanks!

If you save the diff into a text file, called emu.patch, you can run the command

Code: Select all

git apply emu.patch
I am not sure what is slowing things down versus the raw output from emscripten though, but I can run the raw output from the latest emscripten on either my phone or desktop at full speed, so it should be possible.

URL parameters sounds good too. Flicker defaulting to off, can turn it on with a parameter? The flicker should probably also default to off in the desktop version of cuzebox as well.

Thanks, but I would say don't add my WIP quite yet, I am still actively working on improving it (before I switch it over to requiring the SD card).

Totally unrelated, but I thought I remembered that you have a tool that can go from a compiled game or .inc file back into the .png file. My use case is editing levels by the pixel, but now I want to swap all of a certain tiles throughout the level. I would rather just change the pixels of tile #N in my .inc file, and then run something to reconstruct the tileset+map into a PNG file with that tile now swapped everywhere it was being used. Right now I just have to copy and paste by hand and it is very tedious. I thought you had written something to do similar.

Edit: Oh wait, I found it here: https://github.com/nicksen782/inc2img
User avatar
Artcfox
Posts: 1382
Joined: Thu Jun 04, 2015 5:35 pm
Contact:

Re: All Uzebox Games Online! (Cuzebox and Emscripten)

Post by Artcfox »

I discovered a technique to easily enable mouse/touch controls for an Emscripten compiled version Cuzebox.

My changes are here: https://github.com/artcfox/cuzebox/tree ... h-enhanced

I didn't have to make too many changes to Cuzebox for this, though I did optimize the audio buffers to remove lag. JavaScript can't really tell the difference between the left and right shift, so I added additional 'j' and 'k' keybindings for Shoulder Left and Shoulder Right.

To enable mouse/touchscreen controls, I just added SVG buttons that call dispatchEvent with a new Keyboard event to the canvas with the proper keyCode:

Code: Select all

    <rect style="fill:#3f3f3f;stroke:#1f1f1f;stroke-width:0.25"
	  id="BTN_START" width="14.856842" height="8.6144733" x="103.08696" y="156.66455" rx="2" ry="2"
	  onmousedown="canvas.dispatchEvent(new KeyboardEvent('keydown', {bubbles: true, cancelable: true, keyCode: 13}))"
	  onmouseup="canvas.dispatchEvent(new KeyboardEvent('keyup', {bubbles: true, cancelable: true, keyCode: 13}))"
	  ontouchstart="canvas.dispatchEvent(new KeyboardEvent('keydown', {bubbles: true, cancelable: true, keyCode: 13}))"
	  ontouchend="canvas.dispatchEvent(new KeyboardEvent('keyup', {bubbles: true, cancelable: true, keyCode: 13}))"
	  ontouchcancel="canvas.dispatchEvent(new KeyboardEvent('keyup', {bubbles: true, cancelable: true, keyCode: 13}))"
	  />
So I'm essentially just injecting keyboard events into the emscripten canvas that are generated from mouse/touch events.

If the screen is narrow (mobile), I skip displaying the keyboard instructions/fullscreen button, because it is too easy to accidentally select them and then the button presses don't work. I also disabled zooming for the same reason. The keyboard interface still works, though you need to have it on SNES controls in order for the touch events to work.

Here is an example of my Circuit Puzzle game using this technique: https://artcfox.github.io/circuit/

I suspect this can be improved for touch screens using a multitouch technique that adds a proper joystick instead of a D-pad, and multi-touch enabled buttons, similar to how https://sneslive.com/ does it.

Edit: I also think that one could probably use the same technique with the HTML5 Gamepad API for Bluetooth or USB game controllers, and turn those inputs into injected keydown and keyup events.
Last edited by Artcfox on Fri Jul 14, 2023 1:14 am, edited 1 time in total.
Post Reply