Love2D WebPlayer (WebGL)

[ghoulsblade]

update : pixelfont now working, check out sinescroller =)
http://ghoulsblade.schattenkind.net/lov ... escroller/

[allxumuk]

It's realy cool

[Nixola]

Code: Select all

MyCheckGLError(UpdateGlFloatBuffer) : gl.getError() : 1285 : OUT_OF_MEMORY stack=MyGetStackTrace()@http://ghoulsblade.schattenkind.net/love-webplayer/js/utils.webgl.js:157
MyCheckGLError("UpdateGlFloatBuffer")@http://ghoulsblade.schattenkind.net/love-webplayer/js/utils.webgl.js:169
UpdateGlFloatBuffer([object WebGLRenderingContext],[object WebGLBuffer],[object Array],35044)@http://ghoulsblade.schattenkind.net/love-webplayer/js/utils.webgl.js:184
DrawSpriteAux([object WebGLTexture],[object WebGLBuffer],17,2,872,207,0,1.169607843137255,1,0,0)@http://ghoulsblade.schattenkind.net/love-webplayer/js/love.render.js:83
DrawSprite([object WebGLTexture],17,2,872,207,0,1.169607843137255,1,0,0)@http://ghoulsblade.schattenkind.net/love-webplayer/js/love.render.js:38
([object Object],872,207,0,1.169607843137255)@http://ghoulsblade.schattenkind.net/love-webplayer/js/love.graphics.js:90
lua_rawcall((function (drawable, x, y, r, sx, sy, ox, oy) {var o = drawable._data;if (o.IsImage()) {DrawSprite(o.GetTextureID(), o.getWidth(), o.getHeight(), x, y, r || 0, sx || 1, sy || 1, ox || 0, oy || 0);} else {o.RenderSelf(x, y, r || 0, sx || 1, sy || 1, ox || 0, oy || 0);}return LuaNil;}),[object Array])@http://ghoulsblade.schattenkind.net/love-webplayer/js/lua-parser.js:1262
lua_call((function (drawable, x, y, r, sx, sy, ox, oy) {var o = drawable._data;if (o.IsImage()) {DrawSprite(o.GetTextureID(), o.getWidth(), o.getHeight(), x, y, r || 0, sx || 1, sy || 1, ox || 0, oy || 0);} else {o.RenderSelf(x, y, r || 0, sx || 1, sy || 1, ox || 0, oy || 0);}return LuaNil;}),[object Array])@http://ghoulsblade.schattenkind.net/love-webplayer/js/lua-parser.js:1274
()@http://ghoulsblade.schattenkind.net/love-webplayer/js/lua-parser.js:117
lua_rawcall((function () {var tmp;lua_call(lua_tableget(lua_tableget(G.str.love, "graphics"), "setColor"), [33, 33, 40]);lua_call(lua_tableget(lua_tableget(G.str.love, "graphics"), "quad"), ["fill", 0, 300, 0, 600, 800, 600, 800, 300]);var var_13 = 1, stop_13 = lua_assertfloat(lua_call(lua_tableget(G.str.string, "len"), [G.str.textstring])[0]);for (; var_13 <= stop_13; var_13++) {var _i_13 = var_13;lua_call(lua_tableget(lua_tableget(G.str.love, "graphics"), "setColor"), [lua_subtract(255, lua_tableget(lua_tableget(G.str.stars, _i_13), "speed")), lua_subtract(255, lua_divide(lua_tableget(lua_tableget(G.str.stars, _i_13), "speed"), 2)), 150, lua_multiply(lua_tableget(lua_tableget(G.str.stars, _i_13), "speed"), 0.9)]);lua_call(lua_tableget(lua_tableget(G.str.love, "graphics"), "draw"), [G.str.star, lua_tableget(lua_tableget(G.str.stars, _i_13), "x"), lua_tableget(lua_tableget(G.str.stars, _i_13), "y"), 0, lua_add(lua_divide(lua_tableget(lua_tableget(G.str.stars, _i_13), "speed"), 255), 0.55)]);var _yflip_14 = lua_add(lua_add(lua_add(G.str.yBase, 40), G.str.scrollerHeight), lua_divide(lua_multiply(lua_call(lua_tableget(G.str.math, "sin"), [lua_tableget(G.str.angle, _i_13)])[0], G.str.scrollerHeight), 2));var _y_14 = lua_subtract(lua_subtract(G.str.yBase, G.str.scrollerHeight), lua_multiply(lua_call(lua_tableget(G.str.math, "sin"), [lua_tableget(G.str.angle, _i_13)])[0], G.str.scrollerHeight));G.str.c = lua_call(lua_tableget(G.str.string, "sub"), [G.str.textstring, _i_13, _i_13])[0];if (lua_lt(lua_multiply(2, lua_unm(G.str.letterSize)), lua_tableget(G.str.x, _i_13)) && lua_lt(lua_tableget(G.str.x, _i_13), 850)) {lua_call(lua_tableget(lua_tableget(G.str.love, "graphics"), "setColor"), [255, 255, G.str.col, 40]);lua_call(lua_tableget(lua_tableget(G.str.love, "graphics"), "setFont"), [G.str.flippedfont]);lua_call(lua_tableget(lua_tableget(G.str.love, "graphics"), "print"), [G.str.c, lua_call(lua_tableget(G.str.math, "floor"), [lua_tableget(G.str.x, _i_13)])[0]].concat(lua_call(lua_tableget(G.str.math, "floor"), [_yflip_14])));lua_call(lua_tableget(lua_tableget(G.str.love, "graphics"), "setColor"), [255, 255, G.str.col, 255]);lua_call(lua_tableget(lua_tableget(G.str.love, "graphics"), "setFont"), [G.str.font]);lua_call(lua_tableget(lua_tableget(G.str.love, "graphics"), "print"), [G.str.c, lua_call(lua_tableget(G.str.math, "floor"), [lua_tableget(G.str.x, _i_13)])[0]].concat(lua_call(lua_tableget(G.str.math, "floor"), [_y_14])));}}lua_call(lua_tableget(lua_tableget(G.str.love, "graphics"), "setColor"), [255, 255, 255, 175]);lua_call(lua_tableget(lua_tableget(G.str.love, "graphics"), "setFont"), [G.str.planetfont]);lua_call(lua_tableget(lua_tableget(G.str.love, "graphics"), "print"), [G.str.textstring2, lua_call(lua_tableget(G.str.math, "floor"), [lua_tableget(G.str.scroller2, "x")])[0]].concat(lua_call(lua_tableget(G.str.math, "floor"), [lua_tableget(G.str.scroller2, "y")])));return [];}),[object Array])@http://ghoulsblade.schattenkind.net/love-webplayer/js/lua-parser.js:1262
lua_call((function () {var tmp;lua_call(lua_tableget(lua_tableget(G.str.love, "graphics"), "setColor"), [33, 33, 40]);lua_call(lua_tableget(lua_tableget(G.str.love, "graphics"), "quad"), ["fill", 0, 300, 0, 600, 800, 600, 800, 300]);var var_13 = 1, stop_13 = lua_assertfloat(lua_call(lua_tableget(G.str.string, "len"), [G.str.textstring])[0]);for (; var_13 <= stop_13; var_13++) {var _i_13 = var_13;lua_call(lua_tableget(lua_tableget(G.str.love, "graphics"), "setColor"), [lua_subtract(255, lua_tableget(lua_tableget(G.str.stars, _i_13), "speed")), lua_subtract(255, lua_divide(lua_tableget(lua_tableget(G.str.stars, _i_13), "speed"), 2)), 150, lua_multiply(lua_tableget(lua_tableget(G.str.stars, _i_13), "speed"), 0.9)]);lua_call(lua_tableget(lua_tableget(G.str.love, "graphics"), "draw"), [G.str.star, lua_tableget(lua_tableget(G.str.stars, _i_13), "x"), lua_tableget(lua_tableget(G.str.stars, _i_13), "y"), 0, lua_add(lua_divide(lua_tableget(lua_tableget(G.str.stars, _i_13), "speed"), 255), 0.55)]);var _yflip_14 = lua_add(lua_add(lua_add(G.str.yBase, 40), G.str.scrollerHeight), lua_divide(lua_multiply(lua_call(lua_tableget(G.str.math, "sin"), [lua_tableget(G.str.angle, _i_13)])[0], G.str.scrollerHeight), 2));var _y_14 = lua_subtract(lua_subtract(G.str.yBase, G.str.scrollerHeight), lua_multiply(lua_call(lua_tableget(G.str.math, "sin"), [lua_tableget(G.str.angle, _i_13)])[0], G.str.scrollerHeight));G.str.c = lua_call(lua_tableget(G.str.string, "sub"), [G.str.textstring, _i_13, _i_13])[0];if (lua_lt(lua_multiply(2, lua_unm(G.str.letterSize)), lua_tableget(G.str.x, _i_13)) && lua_lt(lua_tableget(G.str.x, _i_13), 850)) {lua_call(lua_tableget(lua_tableget(G.str.love, "graphics"), "setColor"), [255, 255, G.str.col, 40]);lua_call(lua_tableget(lua_tableget(G.str.love, "graphics"), "setFont"), [G.str.flippedfont]);lua_call(lua_tableget(lua_tableget(G.str.love, "graphics"), "print"), [G.str.c, lua_call(lua_tableget(G.str.math, "floor"), [lua_tableget(G.str.x, _i_13)])[0]].concat(lua_call(lua_tableget(G.str.math, "floor"), [_yflip_14])));lua_call(lua_tableget(lua_tableget(G.str.love, "graphics"), "setColor"), [255, 255, G.str.col, 255]);lua_call(lua_tableget(lua_tableget(G.str.love, "graphics"), "setFont"), [G.str.font]);lua_call(lua_tableget(lua_tableget(G.str.love, "graphics"), "print"), [G.str.c, lua_call(lua_tableget(G.str.math, "floor"), [lua_tableget(G.str.x, _i_13)])[0]].concat(lua_call(lua_tableget(G.str.math, "floor"), [_y_14])));}}lua_call(lua_tableget(lua_tableget(G.str.love, "graphics"), "setColor"), [255, 255, 255, 175]);lua_call(lua_tableget(lua_tableget(G.str.love, "graphics"), "setFont"), [G.str.planetfont]);lua_call(lua_tableget(lua_tableget(G.str.love, "graphics"), "print"), [G.str.textstring2, lua_call(lua_tableget(G.str.math, "floor"), [lua_tableget(G.str.scroller2, "x")])[0]].concat(lua_call(lua_tableget(G.str.math, "floor"), [lua_tableget(G.str.scroller2, "y")])));return [];}),[object Array])@http://ghoulsblade.schattenkind.net/love-webplayer/js/lua-parser.js:1274
call_love_callback_guarded("draw",[object Array])@http://ghoulsblade.schattenkind.net/love-webplayer/js/main.js:152
call_love_draw()@http://ghoulsblade.schattenkind.net/love-webplayer/js/main.js:210
MainStep()@http://ghoulsblade.schattenkind.net/love-webplayer/js/main.js:262
@http://ghoulsblade.schattenkind.net/love-webplayer/js/main.js:322

That's the error I get when I open that link. When I click ok the sinescroller starts, but I can't hear anything

[ghoulsblade]

OUT_OF_MEMORY Oo
urrr. do you know what graphics card you have and/or how much video-ram it has ? or was it on smartphone rather than pc ?
what browser +version did you use ? maybe there's a limit to how much vram webgl can use in some browsers.
Very weird, there's not really big textures or stuff like that, i'll double check if geometry buffers are reallocated everytime they're just supposed to be updated or something like this.

no sound/audio : that's normal so far, not implemented yet in webplayer =)
thanks for testing!

[Nixola]

I was using Firefox on Windows XP, I've got 1GB ram (doesn't matter, I think) and an Intel Display Adapter 945 or something like that

[Felipe Budinich]

I had written a long, comprehensive, insightful post, and then... my session timed out. So, you'll get a link dump instead:

Audio sucks, but web audio api sucks more, as it is ridden with obscure bugs, use flash for sound instead, and fallback to <audio> (yes mobiles do not have flashplayer, newsflash: mobile browsers play 1 sound at a time, tops, using html5 audio):

http://www.schillmania.com/projects/soundmanager2/
http://www.lostdecadegames.com/audia-is ... audio-api/ <- if you feel like going bald young.

I was using Firefox on Windows XP, I've got 1GB ram (doesn't matter, I think) and an Intel Display Adapter 945 or something like that

WebGl sucks, there is a blacklist of unsupported video cards:
https://wiki.mozilla.org/Blocklisting/B ... cs_Drivers

Only use the 2d context of canvas, that way you'll be able to use stuff like appMobi's DirectCanvas, iOS Impact, CocoonJs (Phonegap, titanium etc, suck, they are only wrappers tha provide no performance boosts):

http://www.ludei.com/tech/cocoonjs
https://github.com/appMobi

good luck! (I've been doing HTML5 development the last couple of months, and it's awful)

edit: added the quote that made write this post.

[tsturzl]

Only use the 2d context of canvas, that way you'll be able to use stuff like appMobi's DirectCanvas, iOS Impact, CocoonJs (Phonegap, titanium etc, suck, they are only wrappers tha provide no performance boosts):

http://www.ludei.com/tech/cocoonjs
https://github.com/appMobi

good luck! (I've been doing HTML5 development the last couple of months, and it's awful)

edit: added the quote that made write this post.

I'd say at least fallback to canvas. Canvas drawing DOES have hardware acceleration in Firefox and Chrome. They are also implemented on mobile platforms.

I did read that they were implementing WebGL for mobile devices, but I'm not sure if that's dead or not, I have not seen any such code. Again mentioned, WebGL is not an HTML5 standard, its a khonos standard, because its not managed by W3C. Browsers do not have to support WebGL in order to be considered HTML5 compatible, and therefore I don't know if they will.

Canvas drawing might provide a better solution, you'll still get hardware acceleration. You won't get shaders, however as mentioned, at least use canvas as a fallback. You're target audience is still restricted by who's graphics cards work with WebGL and who's browsers work with webGL(FF and Chrome), and that's a lot of people.

[ghoulsblade]

I'm gonna stick with webgl, if you want canvas-only please send a pull request for a fallback implementation once you have the code ready =P
A few people in this thread and irc have already run the webgl demo on smartphones i think.

[TechnoCat]

I'm gonna stick with webgl, if you want canvas-only please send a pull request for a fallback implementation once you have the code ready =P
A few people in this thread and irc have already run the webgl demo on smartphones i think.

Android devices with Firefox Beta or Opera Mobile have WebGL implementations. Both browsers are free in the Android Market.

[allxumuk]

Doesn't work in Windows Phone 7 IE, iOS 5.1 Safari and Opera Mobile.