Blitzbasic Interpreter for Browsers now online


Tweet 2d blitzbasic html5 javascript rated
(Posted 1 month ago) jfkEO

I hereby proudly announce the release of BB2JS online editor version. Now you can by a single click make Blitzbasic Programs run in the browser. You can save it as html5, mod it and release it on your own server, or even run locally without a server. The editor is split into a global init part and a mainloop content part. Like in the original IDE, commands typed in are corrected automatically to their correct Notation (eg. drawimage is turned into DrawImage) - that alone was a challenge by it's own.

BB2JS is using a limited command set of Blitzbasic 2D. While not all BB commands are available, it provides a set that allows to perform almost anything possible in BB. Plus, as a goodie, Browsers support the alpha channel of 32bit PNGs. I'd really appreciate your Feedback, fellow Blitzers.

https://jfkeo1010etc.itch.io/bb2js-online-version

I hope some of You find this useful.

(Posted 1 month ago) RonTek commented:

Awesome release! btw, what percentage of the 2D commands are available? so you don't need or have to declare the window/canvas size?

(Posted 1 month ago) jfkEO commented:

Thanks, currently the set is kind of minimal, but yet allows to write real programs. For example, there is While Wend,but no Repeat Until or Do Loop. That said the program is already embeded in a mainloop, so
you only need to write the content of the mainloop, which will be executed at 30 fps, or slower, depending on cpu/gpu load. (it tries to reach 30fps and leaves the rest to the system, in any case leaves the system at least 5ms between execution of that main task of yours.) I may make the target framerate a parameter. This main loop content is executed in a function, so it will "forget" all internally declared variables. The right side editor is for Globals etc. Just try those features, like "Cheat sheet", it contains the command set and some additional help.

Graphics is not yet supported, it simply takes the browsers document.innerWidth and Height (or was it window.innerWidth?), not yet dynamically adjusted on window resize, but I guess people can live with that. This is returned by GraphicsWidth(), so you can take that into account. Forcing a certain window size, by eg. open a popup window, is a bit intrusive in a browser, many may have popup blockers...

A few commands are not supported by Blitz3D, they serve as substitute for things that are impossible in JS: DoLockPointer and EndLockPointer substitute PositionPointer, both ways capable of doing a real Mouselook (without to reack the end of the screen), and subsequently make use of MouseXSpeed() etc.

That said, to a certain degree it is possible to use javascript as inline code in the BB code, for instance:
grid(n)=document.innerWidth
should work just fine.

But other than that Code that runs in this editor should also run in Blitzbasic right away, while, if you develop something in Blitz and then copy it to the editor, you may have to tweak it a little, so it fits the special rules, described in the cheat sheet. One that I didn't mention is, except for program flow with While, For, If etc., all commands must use brackets for their parameters, or an empty bracket if there is no parameter. example: Cls must be written as Cls(), or Line x,y,x2,y2 must be written as Line(x,y,x2,y2). But this works also in Blitz, so it is possible to develop in Blitz, if those rules are followed.

From the cheat sheet:

BB2JS Online Editor


Supports the following reduced BlitzBasic Command Set:

//-------------------basic

remarks:
; this is a remark

variables:
a=0 int
a%=0 int
a#=0 float
a$="" string

comparing:
= , <> , <= , >= , < , >

arrays:
Dim a#(100)
Dim a$(10,10)

//-----------------program flow:
While, Wend
For, To, Next, Step
Exit
If, Then, Else, EndIf
And, Or (conditional comparators for If and While)
And, Or, Xor, Not, Shr, Shl, Sar (binary operators)
Function(), Return, End Function
Dim (limitation: at max 2 dimensions allowed, eg Dim c(10,10))
$ffffffff hex values
%1010... bin values

//-------------------input
x=MouseX()
y=MouseY()
x=MouseXSpeed()
y=MouseYSpeed()
b=MouseDown(1)
HidePointer()
ShowPointer()
DoPointerLock() this must follow a user action (key or click)
EndPointerLock()
GetKey() returns the last keystroke in ascii

For the keydown functions there is currently only a quick hack, allowing
to check the cursorkeys (Full implementation scheduled, meanwhile please use GetKey for other keys):

k=KeyDown(200) up
k=KeyDown(208) down
k=KeyDown(203) left
k=KeyDown(205) right

//-------------------graphics
w=GraphicsWidth() returns current screen size
h=GraphicsHeight()
Cls()
ClsColor(r,g,b) values 0 to 255
Color(r,g,b)
Line(x1,y1,x2,y2)
Plot(x,y)
Rect(x,y,w,h,fill) fill is one for filled, 0 for outline only
Text(x,y,t$)
f=LoadFont(f$,size) f$ is font familiy, eg. "Monospace"
img=LoadImage(path$) path may be local or URL. Use lashes instead of backlashes!
DrawImage(img,x,y)
img2=CopyImage(img)
w=ImageWidth(img)
h=ImageHeight(img)
CopyRect(x,y,w,h,x2,y2) (Browser CORS issues)
rgb=ReadPixel(x,y) (Browser CORS issues)

//-------------------sound
a=LoadSound(path$) path may be local or URL
PlaySound(a) must follow a user action (eg. start game keypress)
SetSoundVolume(a,vol) vol is 0.0 to 1.0
LoopSound(a,loop) loop is 0 or 1
StopSound(a)

//-------------------file io
h=ReadFile(path$)
h=WriteFile(path$)
s$=ReadString(h)
WriteString(h,s$)
CloseFile(h)

//-------------------math
r#=Rnd(lo,hi) (note: needs both Parameters)
r=Rand(lo,hi)
a#=Sin(a)
a#=Cos(a)
a#=Floor(a)
a#=Ceil(a)
a#=Sgn(a)
a#=Abs(a)
a#=Sqr(a)
a#=Tan(a)
a#=ASin(a)
a#=ACos(a)
a#=ATan(a)
a#=ATan2(a,b)
a#=Exp(a)
a#=Pi()
a#=Log(a)
a#=Log10(a)

//-------------------string
a$=Left$(lin$,l)
a$=Right$(lin$,l)
a$=Mid$(lin$,w,l)
a$=Replace$(lin$,ol$,nu$)
a =Instr(lin$,search$,start)
a$=Upper$(lin$)
a$=Lower$(lin$)
a$=Chr$(a) may cause troubles when used with non-printable chars, eg. 27.
a =Asc(c$)
a =Len(lin$)

//-------------------time
a =MilliSecs()
a$=CurrentTime()
a$=CurrentDate()

Code in the left side editor, called "Mainloop Content", is executed every frame.
Code in the right side editor is for Globals, Arrays, Functions and Media-Preloading
of Audio and Images. Note: in this section you may not execute Drawing operations,
DrawImage, PlaySound, LoadFont. because the page is not yet fully loaded and therefor
the Canvas and Media is not ready. To run these commands before the game starts, please use a global
switch variable, eg:
(global side:)
veteran=0;

(Mainloop side:)
If veteran=0
; this is run only once
veteran=1
PlaySound(mymusic)
LoopSound(mymusic,1)
EndIf
; the rest is run every frame
...

Note: Variable names are case sensitive. Commands are converted automatically
to their correct notation.

The "Then" is for one line IFs only.
This is ok:
If a=0 Then b=1

This is also ok:
If a=0
b=1
EndIf

This is not working:
If a=0 Then
b=1
EndIf

Also, in general multiple Commands on one line are allowed when separated by ":".

"If" and "While" conditions may not contain boolean "And" and "Or" operations. Example:

This works:
If (a=0) And (b=1)

This doesn't:
If (a And 255) =0

Variables that are used as an argument must be declared before hand, Example:
old_x=x
x=MouseX()

x must be declared earlier, in the globals section, or in a init part of the main loop section.
(see example with variable "veteran" above)


So, I fell in love with Blitz more than 20 years ago, and this is my little tribute to her, and hopefully by doing so I'm adding a little bit to the eternal life of the Blitzbasic Syntax.

(Posted 1 month ago) jfkEO commented:

BTW if you manage to write something there, pls post it in the comments section right below the editor, so people can copy-paste and run it as well. (use the "export BB" link, then copy paste to comment), thanks.

(Posted 1 month ago) RonTek commented:

Graphics is not yet supported, it simply takes the browsers document.innerWidth and Height (or was it window.innerWidth?), not yet dynamically adjusted on window resize, but I guess people can live with that. This is returned by GraphicsWidth(), so you can take that into account. Forcing a certain window size, by eg. open a popup window, is a bit intrusive in a browser, many may have popup blockers...

Yes, there are graphic/windowing features that are not applicable or a bit off with HTML5 canvas and JS. I guess I meant to talk about having certain resolutions or virtual resolution.

A few commands are not supported by Blitz3D, they serve as substitute for things that are impossible in JS: DoLockPointer and EndLockPointer substitute PositionPointer, both ways capable of doing a real Mouselook (without to reack the end of the screen), and subsequently make use of MouseXSpeed() etc.

I see. I actually ported RemiD's FPS controls template to Monkey with HTML5 as target and had to do something similar to simulate mouse locking.

So, I fell in love with Blitz more than 20 years ago, and this is my little tribute to her, and hopefully by doing so I'm adding a little bit to the eternal life of the Blitzbasic Syntax. BTW if you manage to write something there, pls post it in the comments section right below the editor, so people can copy-paste and run it as well. (use the "export BB" link, then copy paste to comment), thanks.

Nice! and sure thing!

(Posted 1 month ago) hardcoal commented:

wow.. im impressed im gonna check it

(Posted 1 month ago) Grindalf commented:

This is very interesting and I am probably going to play around with this at some point

(Posted 4 weeks ago) jfkEO commented:

Thank you guys.
RonTek, you can have a fixed resolution, and also scale the canvas independently, by modding the function bb2jsmyinit(), where the canvas is set ( seems like double underscore is a code for bold here). You can modd the template (the html, then convert to js include using the bb program that is in the zip), or modd the actual output of the converter. V8 is up and has fixed most bugs, comes with 3 examples.

(Posted 4 weeks ago) RonTek commented:

Ah I see and good to know! nice update with new examples

Related to the graphics width and height, I think it will be an issue in case you would like to fill-up a screen with an image, say for the game background.. perhaps a scale or resize image will come in handy.

(Posted 4 weeks ago) Doggie commented:

So how feasible would it be to write blitz code to translate and use in CopperCube?
I guess you would have to have a feel for how things work in JS or would your translator
handle that? Meaning if I wanted to load an anim strip and include it on screen would that
sort of thing work?

Reply To Topic (minimum 10 characters)

Please log in to reply