123 basic - HTML5 for GLBasic

Previous topic - Next topic

spacefractal

Greedy Mouse is one of the game that require a lots and using POLYVECTORS, shadows and such thing (but I did avoid using problem commands like GRABSPRITE and other typical OS limit issues) as well I also using GOTO as well.

So its could been fun to checkout how its really perform with this game. Also I can change resoulution, details as well as well removing scaling to save cpu time.

Would been fun to do a light version of this game in html5 (even the game got delayed around a month throught).

So all in all this is a pretty cool project to show on as Flash is also not required to do a internet game, hehe.

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

metzzo

Changelog:
Code (glbasic) Select
Fixed: Negative width/height with STRETCHSPRITE work on Firefox
Fixed: SYSTEMPOINTER TRUE works
Fixed: Castings are much faster
Fixed: Some memory improvement (less micro freezes in Firefox) hard to find these memory "leaks"
Fixed: WHILE 0.1 WEND <- Was never executed... same with REPEAT - UNTIL
Fixed: More Unnecessary CAST2FLOATs are removed from the source code => faster execution
Fixed: Array access in 3 or 4 dimensional array was incorrect
Fixed: TYPE TFoo; f AS TFoo; ENDTYPE <- throws syntax error, because of a cyclic references!


Added: LOADANIM
Added: DRAWANIM
Added: STARTPOLY (experimental!)
Added: ENDPOLY
Added: POLYVECTOR
Added: POLYNEWSTRIP
Added: ZOOMANIM
Added: ROTOZOOMANIM
Added: ROTOANIM
Added: STRETCHANIM
Added: SETSPRITEANIM
Added: EXPORT (exporting functions to JavaScript)
Added: REQUIRE (includes source code)


Quote from: spacefractal on 2012-May-10
Greedy Mouse is one of the game that require a lots and using POLYVECTORS, shadows and such thing (but I did avoid using problem commands like GRABSPRITE and other typical OS limit issues) as well I also using GOTO as well.

So its could been fun to checkout how its really perform with this game. Also I can change resoulution, details as well as well removing scaling to save cpu time.

Would been fun to do a light version of this game in html5 (even the game got delayed around a month throught).

So all in all this is a pretty cool project to show on as Flash is also not required to do a internet game, hehe.

POLYVECTOR: does work but no tinting is performed, not sure whether it will ever work...
GRABSPRITE: should work.
GOTO: works 100%

Basically it _should_ work but there are some (hidden) problems at the moment. For example: ddgui is compiling and executing but it doesn't work properly yet.
That's no Bug, that's my project!

http://programming-with-design.at/

MrTAToad

It might be advisable to (aside from some sort of demo), to release 2D and 3D parts separately.

That way any major problems for the former can be found and dealt with before any work starts on the latter - after all, you wont want to stop anything in order to fix problems...

metzzo

#33
Quote from: MrTAToad on 2012-May-11
It might be advisable to (aside from some sort of demo), to release 2D and 3D parts separately.

That way any major problems for the former can be found and dealt with before any work starts on the latter - after all, you wont want to stop anything in order to fix problems...
Yes that's what I'm aiming for.

Changelog
And of course the current changelog since last post:
Code (glbasic) Select
Fixed: GETFILELIST infinite loop under mysterious circumstances...
Fixed: INI parser (for the INI... commands) can handle comments properly.
Fixed: STARTPOLy now with optional parameter and colored polygons (no gradients)
Fixed: Some array speed improvements

Added: EXPORT now with custom name: EXPORT MyAwesomeFunction, "FunnyName" <- generates function called "FunnyName" in JavaScript
Added: Case insensitivity (optional)
Added: Very very very experimental C# target (compiles but does not execute because no library function is ported...) basically it was just a test whether the abstract syntax tree is generic enough...
Added: POLYVECTOR with image tinting (no gradients possible...)


Very experimental C# generator
This was just a test. I wanted to see whether the compiler can also generate valid code for statically typed languages (since they are much stricter in terms of type system) and the test was very successful. In around 5 hours of programming the compiler generated valid C# code (it was bootstrapping itself - I have now GLBScript compiled into C# :D). Of course the code is not runnable because I didn't port the standard library of GLBasic. As i mentioned this is just a test, so I won't port the library, but maybe in future? C# is a much simpler target than JavaScript because it has all the missing features I had to emulate in JavaScript (pointer for BYREF and ALIAS; goto; ...)

Image tinting with POLYVECTOR
HTML5 does not support image tinting per se. There is a wonderful trick to do so (http://www.playmycode.com/blog/2011/06/realtime-image-tinting-on-html5-canvas/)

Gradients with POLYVECTOR does not function, because this technique does not allow this. Soon I will try to find a solution.

Some other minor changes are implemented. For example: optional case insensitivity and a few bugs were also fixed.

bye!
That's no Bug, that's my project!

http://programming-with-design.at/

okee

What payment methods will you be accepting ? as "Throwing money at the screen" doesn't seem to work  =D
Android: Samsung Galaxy S2 -  ZTE Blade (Orange San Francisco) - Ainol Novo 7 Aurora 2
IOS: 2 x Ipod Touch (1G)

metzzo

Quote from: okee on 2012-May-17
What payment methods will you be accepting ? as "Throwing money at the screen" doesn't seem to work  =D
Stones :D

Just kidding. I think I'll use PayPal.
That's no Bug, that's my project!

http://programming-with-design.at/

diceless

You are mother flipping awesome! I haven't used this yet but you're saving me the trouble of learning how to do a lot of web stuff myself!

MrTAToad

I wonder, with a suitable manifest file, the resulting HTML 5 file could be published in the Chrome web store ? :)

erico


MrTAToad

According to Google, all that is needed is a manifest file and the HTML file zipped up :)

metzzo

I think this is perfectly possible!

Code (glbasic) Select
Improved: Faster compilation: Instead of tokenizer -> preprocessor -> tokenizer -> analyser ->... it's now tokenizer -> preprocessor -> analyser!
Fixed: Some bugs due to the new preprocessor
Fixed: Array bug (DIM had wrong behaviour when passed a float)
Improved: CAST2INT much faster when casting to integers (uses ~~ in JS)
Fixed: LEN() on uninitialized arrays (LOCAL arr[]; STDOUT LEN(arr[])) failed
Fixed: TYPE TGameObject; ABSTRACT FUNCTION Test:; ENDTYPE <- Failed (needed second function)
Fixed: XML parser can handle now tabs!
Fixed: DOESFILEEXIST / DOESDIREXIST function better
Improved: code cleanup
Fixed: ?IF works better (more robust, can handle NOT and much more)
Improved: Some optimizations compiler side - faster compiling (still too slow...)
Added: New Targetsystem - 100% extensible with XML files - no platform/target specific stuff is hardcoded.
Removed: ?BLACKLIST command - now configurable with XML
Improved: Compile time MUUUUUCH faster - One bootstrap (= compiles its own source code) takes 25s instead of 110s on my pc :) but still: GLBScript is not the fastest compiler...
Fixed: String prototypes in JavaScript
Improved: Ressource handling much (is not embedded into the  JavaScript file -> much slimmer!)
Fixed: Really strange compiler crash (did some weird assignments to get rid of the crashes in "CreateExpression")
Fixed: DOESDIREXIST/DOESFILEEXIST returned sometimes wrong results
Added: Little HTTP Server to test your games easily
Fixed: GLOBAL myGlobal = myConstant; CONSTANT myConstant = 100 <- works now (use constants before they are defined)
Fixed: GLOBAL myGlobal = MyFunc(); FUNCTION MyFunc: .... <- works again (use of functions in GLOBAL definitions before they are defined)
Improved: Casting faster
Added: FOR i = 0 UNTIL 10 <- syntactical sugar for: FOR i = 0 TO 10 - 1, useful for things like: FOR i = 0 UNTIL LEN(MyArray[])
Fixed: Late binding with ABSTRACT methods
Added: SPRITE2MEM
Fixed: INC/DEC with floats/strings function now (INC a, 0.5 <- with out cast to integer internally)
Improved: OOP system cleaned up -> more rubust
Added: super.MyFunction() in methods.
Added: MyBaseClass(myDerivedClass) <- Casting!
Fixed: INTEGER(1)/INTEGER(2) returned in JS 0.5 instead of 0
Fixed: If FILESEEK goes beyond the file size it does not throw an error but it sets the position of the file to the last byte!
Fixed: STARTPOLY without POLYNEWSTRIP and mode = -1 works!


In the mean time I was of course spending my time on GLBScript. There are several topics I want to highlight:

Bug fixing and some other improvements!
I fixed tons of bugs and did a lot of debugging.  I have also rewritten the whole  file management under the hood. Before every file got embedded into the JavaScript file and was put into an array. Now there is for every writable/readable file a ".GLBSCRIPT_DATA" file which contains all the bytes of your file as a string representation. This is because JS does not allow a synchronous file access with byte data, so I had to workaround this. Because of this system there is no need of the "?BLACKLIST" preprocessor command anymore, which basically said that the compiler should not embed this file.

Compiling time much improved
Initially compiling of 7000 lines of code took around 130 seconds. I optimized a lot (I even wrote my own HashMap implementation) and was fixing a lot of bottle necks. Now compiling of 7000 lines of code take around 30 seconds. Not the fastest compiler on the world, but much better than the previous time...

Target system
I have rewritten the whole target system and now it's 100% extensible without changing code. So if you want for example running GLBScript via node.js you can write your own target. GLBScript uses XML for defining the targets.

Currently the "settings.xml" looks like this:
Code (glbasic) Select
<target name="html5" lang="js">
<template path="HTMLTEMPLATE_CONSOLE" name="GLBFile.html" mode="console" />
<template path="HTMLTEMPLATE_GRAPHICS" name="GLBFile.html" mode="2d" />

<lib path="lib.js" mode="console 2d 3d" />
<lib path="array.js" mode="console 2d 3d" />
<lib path="math.js" mode="console 2d 3d" />
<lib path="string.js" mode="console 2d 3d" />
<lib path="file.js" mode="console 2d 3d" />
<lib path="ini.js" mode="console 2d 3d" />

<lib path="2d.js" mode="2d 3d" />
<lib path="sound.js" mode="2d 3d" />
<lib path="input.js" mode="2d 3d" />
<lib path="sprite.js" mode="2d 3d" />
<lib path="collision2d.js" mode="2d 3d" />
<lib path="screen.js" mode="2d 3d" />

<extension name="exe" action="ignore" />
<extension name="png" action="ignore" />
<extension name="bmp" action="ignore" />
<extension name="tga" action="ignore" />
<extension name="jpeg" action="ignore" />
<extension name="mid" action="warning" />
<extension name="ac3" action="mp3 ogg" />
<extension name="wav" action="mp3 ogg" />
<extension name="png" action="ignore" />
<extension name="mp3" action="ogg" />
<extension name="ogg" action="mp3" />
<extension name="ddd" action="ignore" />
<extension name="ddw" action="ignore" />
<extension name="DIR_DATA" action="ignore" />
<extension name="GLBSCRIPT_DATA" action="ignore" />

<file name="GLBScript.js" action="ignore" />
<file name="GLBFile.html" action="ignore" />
<file name="GLBScript_opt.js" action="ignore" />
<file name="GLBScript_unopt.js" action="ignore" />
<file name="GLBScript_beautiful.js" action="ignore" />
<file name=".svn" action="ignore" />

<action type="embeddata" />
<action type="appbeforelibs" />
<action type="optimize" name="closure" />
<action type="save" name="GLBScript.js" />
<action type="run" command="$COMPILERDIRTools/GLBServer/GLBServer.exe '$PROJECTDIRGLBFile.html'" />

</target>


During this I also removed the definition of the built in commands (DRAWSPRITE, SETCURRENTDIR, ...) into an extra file called "Header.gbas" which basically is included into every project you compile with GLBScript.

Improved OOP
Now it's much more robust and has many features. "super.myClass()" works in methods. You are able to cast between classes: "(MyClass(DerivedFromMyClass).hello". You can also define ABSTRACT methods. Quite cool I think!



Here is a little demo I've ported to GLBScript: http://programming-with-design.at/files/GLBScript/Isometric/GLBFile.html
That's no Bug, that's my project!

http://programming-with-design.at/

MrTAToad

Yes, thats just as fast as the standard executable :)

MrTAToad

Yes, I saw that IE didn't like it.  In addition, the Dolphin webbrowser on Android doesn't either :)

Darmakwolf

That 3dish one runs smooth on chrome and choppy on firefox. Chrome seems to be the best bet for HTML5 performance, really. I still prefer firefox though.... will their HTML5 performance improve over time??? Also... what's the word on this project? Not to rush - I'm just excited!   :D

MrTAToad

Hopefully Firefox will improve things - but you just don't know :)