Love.js - A Direct Emscripten Port

Discuss any ports of LÖVE to different platforms.
User avatar
Stifu
Party member
Posts: 100
Joined: Mon Mar 14, 2016 9:53 am
Contact:

Re: Love.js - A Direct Emscripten Port

Post by Stifu » Sun Sep 20, 2020 11:30 am

We've finally fixed our color swap shader to make it work on the web!
Here's the code change, for posterity: https://github.com/thomasgoldstein/zabu ... 227194eb29

Now to try and fix stage loading... I've got a hunch that one is a filepath-related issue.

Edit: I've filed a little issue: Suggestion: remove the <h1> element from the index.html page
Zabuyaki, our upcoming beat 'em up: https://www.zabuyaki.com

User avatar
D0NM
Party member
Posts: 244
Joined: Mon Feb 08, 2016 10:35 am
Location: Zabuyaki
Contact:

Re: Love.js - A Direct Emscripten Port

Post by D0NM » Sun Sep 20, 2020 5:44 pm

deleted: the reported problem in my post doesn't exist
Last edited by D0NM on Tue Sep 22, 2020 9:55 am, edited 2 times in total.
Our LÖVE Gamedev blog Zabuyaki (an open source retro beat 'em up game). Twitter: @Zabuyaki.
:joker: LÖVE & Lua Video Lessons in Russian / Видео уроки по LÖVE и Lua :joker:

User avatar
ivan
Party member
Posts: 1616
Joined: Fri Mar 07, 2008 1:39 pm
Contact:

Re: Love.js - A Direct Emscripten Port

Post by ivan » Mon Sep 21, 2020 6:37 am

Just managed to get my shaders to work with love.js and my game works perfectly
https://2dengine.com/arena/

Note that in WebGL you are not allowed to initialize your externs so:

Code: Select all

extern number scale = 1;
Should become:

Code: Select all

uniform float scale;
D0NM, I have never noticed this before, can you please post a test script.

User avatar
D0NM
Party member
Posts: 244
Joined: Mon Feb 08, 2016 10:35 am
Location: Zabuyaki
Contact:

Re: Love.js - A Direct Emscripten Port

Post by D0NM » Mon Sep 21, 2020 1:07 pm

ivan wrote:
Mon Sep 21, 2020 6:37 am
Note that in WebGL you are not allowed to initialize your externs so:

Code: Select all

extern number scale = 1;
Well. True. But it used to work. You do not see shaders compilation warnings automatically.
ivan wrote:
Mon Sep 21, 2020 6:37 am
Should become:

Code: Select all

uniform float scale;
I needed an integer length of a dynamic array. GLSL demands
constants to be able to unroll such cases:

Code: Select all

 for(int i=0; i< n; i++)
You cannot pass values as constants here...
Anyway, I just inject my constant right into the GLSL text source.
ivan wrote:
Mon Sep 21, 2020 6:37 am
D0NM, I have never noticed this before, can you please post a test script.
EDIT: Just fixed our game and found that there is no such bug. My bad.
Last edited by D0NM on Mon Sep 21, 2020 6:34 pm, edited 1 time in total.
Our LÖVE Gamedev blog Zabuyaki (an open source retro beat 'em up game). Twitter: @Zabuyaki.
:joker: LÖVE & Lua Video Lessons in Russian / Видео уроки по LÖVE и Lua :joker:

User avatar
pgimeno
Party member
Posts: 2318
Joined: Sun Oct 18, 2015 2:58 pm

Re: Love.js - A Direct Emscripten Port

Post by pgimeno » Mon Sep 21, 2020 1:35 pm

D0NM wrote:
Mon Sep 21, 2020 1:07 pm
ivan wrote:
Mon Sep 21, 2020 6:37 am
Note that in WebGL you are not allowed to initialize your externs so:

Code: Select all

extern number scale = 1;
Well. True. But it used to work. You do not see shaders compilation warnings automatically.
Löve does not perform any syntax analysis of the code beyond some very basic checks. Compilation of GLSL is performed by the GL driver, and the driver for web is inherently different from the driver for desktop (but similar to the driver in most mobile devices). See e.g. https://stackoverflow.com/questions/289 ... -webgl-use . Using shaders inherently means deferring shader compilation to the GL driver of the machine where Löve is running, and different drivers have different versions and accept different variants of the language. This has bitten people that found out that their Löve file worked e.g. in AMD but not in nVidia.

It's far beyond Löve's scope to include a desktop GLSL to web GLSL source translator in order to make it acceptable by WebGL, therefore this is not something that can be fixed on the Löve (or love.js) side. Just try to make your programs compatible with GLSL ES 1.0 when you write shaders.

User avatar
D0NM
Party member
Posts: 244
Joined: Mon Feb 08, 2016 10:35 am
Location: Zabuyaki
Contact:

Re: Love.js - A Direct Emscripten Port

Post by D0NM » Mon Sep 21, 2020 2:24 pm

pgimeno, You are right! I'll follow GLSL ES 1.0.

And to all the readers of this thread:
This LOVE2D function might help u finding some GLSL compilation warnings and errors.
https://love2d.org/wiki/Shader:getWarnings

I eventually found that I sometimes index var4 arrays with indexes that are greater then the array length.
These warnings are hidden by default. You have to use getWarnings function and log them yourself.

:awesome: :awesome: :awesome: :awesome: YASS! Finally made our Zabuyaki working.
here is the link to Zabuyaki
https://www.zabuyaki.com/play/
use keys ESC(back), Enter(Start) Arrows. X(Attack), C(Jump) for player 1.
Up to 3 Gamepads should be supported, too.

The problem was in a crashing/freezing implementation of the well known function:

Code: Select all

definitionFile, errorMsg = love.filesystem.load( spriteDef .. '.lua' )
It crashes (with love.js only!) on loading a non existing file.
IT should not crash/freeze, because there is errorMsg in its return.

So a simple wrapper saved a day!
I used function love.filesystem.getInfo() to check if the file exists.

Code: Select all

    if love.filesystem.getInfo( spriteDef .. '.lua', "file" ) then
        definitionFile, errorMsg = love.filesystem.load( spriteDef .. '.lua' )
        if errorMsg and type(errorMsg) == "string" then
            print("Error LOADING from existing file loadSprite: "..errorMsg)
            --you may use error( )
        end
    else
        print("Warning: loadSprite: missing "..spriteDef..'.lua')
        --I ignore missing files. It is some file caching func. lol
        return nil
    end
Last edited by D0NM on Tue Sep 22, 2020 9:54 am, edited 2 times in total.
Our LÖVE Gamedev blog Zabuyaki (an open source retro beat 'em up game). Twitter: @Zabuyaki.
:joker: LÖVE & Lua Video Lessons in Russian / Видео уроки по LÖVE и Lua :joker:

User avatar
D0NM
Party member
Posts: 244
Joined: Mon Feb 08, 2016 10:35 am
Location: Zabuyaki
Contact:

Re: Love.js - A Direct Emscripten Port

Post by D0NM » Mon Sep 21, 2020 6:40 pm

merged the message to the previous post
Last edited by D0NM on Tue Sep 22, 2020 9:52 am, edited 1 time in total.
Our LÖVE Gamedev blog Zabuyaki (an open source retro beat 'em up game). Twitter: @Zabuyaki.
:joker: LÖVE & Lua Video Lessons in Russian / Видео уроки по LÖVE и Lua :joker:

User avatar
Stifu
Party member
Posts: 100
Joined: Mon Mar 14, 2016 9:53 am
Contact:

Re: Love.js - A Direct Emscripten Port

Post by Stifu » Mon Sep 21, 2020 7:45 pm

D0NM wrote:
Mon Sep 21, 2020 6:40 pm
YASS! Finalle made our Zabuyaki working.
here is the link to Zabuyaki
https://www.zabuyaki.com/play/
Yay! :cool: Thanks, everyone.
Somehow, on my desktop PC, the game is super smooth with Firefox, but very laggy with Chrome. In my experience, Chrome generally outperforms Firefox, so this surprises me. I wonder what's the bottleneck here.

Edit: also, on my Windows 10 laptop, text size is set to 125% by default, which messes up the lovejs canvas size. I wonder how to fix this properly...

Edit 2: I see window.devicePixelRatio returns 1.25 in my case. This might be useful to fix this.

Edit 3: you can easily reproduce the problem by using Firefox, going to about:config, and setting the layout.css.devPixelsPerPx value to 1.25. I still haven't found a proper fix.

Edit 4: Another Kind of World is not affected by this issue (canvas size and content dimensions remain stable regardless of DPI settings). So maybe it's a problem with our game...

Edit 5: I figured out the performance problem with my Chrome. Hardware acceleration was off. I enabled it in the advance settings.
Last edited by Stifu on Thu Sep 24, 2020 9:08 pm, edited 1 time in total.
Zabuyaki, our upcoming beat 'em up: https://www.zabuyaki.com

User avatar
Stifu
Party member
Posts: 100
Joined: Mon Mar 14, 2016 9:53 am
Contact:

Re: Love.js - A Direct Emscripten Port

Post by Stifu » Wed Sep 23, 2020 10:48 pm

I reckon people are likely to miss my many edits, so I'm double posting.
A picture is worth a thousand words, so here are two images that show our problem.

Zabuyaki when DPI is 1.0 (looks fine):
dpi1.png
dpi1.png (12.62 KiB) Viewed 849 times
Zabuyaki when DPI is 1.25 (canvas is too big, 800x600 instead of 640x480, and a part of the game is truncated):
dpi1-25.png
dpi1-25.png (44.14 KiB) Viewed 849 times
Since Another Kind of World does not seem to suffer from this issue, I assume this is a problem with Zabuyaki's code. I compared the conf.lua of our games, and they're very different (AKOW does not set the width and height in that file, and does it elsewhere, for example). I tried messing with the highdpi and usedpiscale values, but it did not help.

Zabuyaki's code: https://github.com/thomasgoldstein/zabuyaki
Zabuyaki's web version: https://www.zabuyaki.com/play/

Any ideas? Thanks!
Zabuyaki, our upcoming beat 'em up: https://www.zabuyaki.com

User avatar
ivan
Party member
Posts: 1616
Joined: Fri Mar 07, 2008 1:39 pm
Contact:

Re: Love.js - A Direct Emscripten Port

Post by ivan » Thu Sep 24, 2020 5:11 am

Well done, it works fine. Just note that you don't need a quit button in the web version.

Post Reply

Who is online

Users browsing this forum: No registered users and 6 guests