Working on a new HTML5 GCS

Discuss how totally awesome Bang! is here.

Moderator: Terryn

wcgcs
newcomer
Posts: 27
Joined: Tue Apr 07, 2015 1:06 am

Re: Performance issues

Post by wcgcs »

Honestly I sort of like the idea so long as it was served faster. It invites the possibility that you could post a link to a game in medias res.
It has many pros like dynamically generating boards with backend technology such as PHP, .NET, Java etc. The start board @ http://webchars.com is generated randomly with PHP. The ZZT games are converted on demand from ZZT format to HTML with a PHP utility called zzt2wc.php.

It also makes a web project maintainable by using the existing web infrastructure and keeping everything cleanly in their own files without the need of generating a binary world file.
One can link multiple worlds together easily with a simple hyperlink.

It allows styling with CSS and requires no uploading or downloading of worlds as everything is cloud based.

HTML is an open standard and is supported on every major platform from mobile to PC.

The con of course is that the load time is subject to the bandwidth of the web server that is hosting the project.

The terms simply get changed from passage -> link, board -> page, and world -> site.
User avatar
bitbot
Official Clamp School Defender
Posts: 328
Joined: Thu Mar 01, 2012 3:00 am
Location: earthbound
Contact:

FYI

Post by bitbot »

wcgcs here is an old friend and fellow rival. We tried collaborating but there was a clear fork in the road. Still, this has my blessing... Go Link, yea! Get some.

Image
Image Image
wcgcs
newcomer
Posts: 27
Joined: Tue Apr 07, 2015 1:06 am

Re: FYI

Post by wcgcs »

bitbot wrote:wcgcs here is an old friend and fellow rival. We tried collaborating but there was a clear fork in the road. Still, this has my blessing... Go Link, yea! Get some.

Image
Thanks Dave. I would eventually like to add mmo features in the future with https://nodejs.org and maybe we can collaborate.
wcgcs
newcomer
Posts: 27
Joined: Tue Apr 07, 2015 1:06 am

Re: Working on a new HTML5 GCS

Post by wcgcs »

Some new enhancements:

Cloud world hosting:
Launch editor with 'E', create board and use View Source file manager to manage your cloud.
Worlds now become http://<WORLDNAME>.webchars.com ex: http://town.webchars.com

Gravity board flag
Ladder terrain type
Jump Action:
These 3 items are used for creating platformer levels. ex: http://gravity.webchars.com

New menu interface:
Click or tap the slide button at bottom right and note new interface.

Resolution toggle:
Click +/- in top left of screen to toggle original and scaled resolution.

SZZT mode:
Toggle with 'Z' key.

Debugger breakpoints now work on text commands:
Launch editor with 'E', create an object and edit it's code. Within editor add a breakpoint by clicking on line number. Run board in debugger and note that breakpoints now work on text commands.

Mp3 support with #sound command
#sound load "/My sound.mp3"
#sound play

Mathematical expressions get replaced by parser on demand by using the backtick operation: ex:
@guy
#set cnt 0
:loop
#set cnt `${cnt}+1` ' increment by 1
#char `${cnt}`
#loop

3 types of variable support: scalar, 1D & 2D vectors ex:
#set myvar[10] 3 ' creates a 1D array with 10 elements defaulting to 3

Variables have 3 scopes, Global, Object, and Label:
#if `${label.myvar} == 3` then /w/w/n

Labels now support parameters such as
ex:
:dist(x, y, z)

Function calls with new #call command. ex:
#call dist(1, 2, 3)
wcgcs
newcomer
Posts: 27
Joined: Tue Apr 07, 2015 1:06 am

Some more updates.

Post by wcgcs »

The OOP can now reference any CSS color like so:

#change #ffffff gem "rgba(255, 0, 0, 0.5)" gem
#bgcolor #ff0000
#fgcolor #000000

Actions, Status Menu items and types are now programmable, here is an example:

The following registers a new type called "shell"

Code: Select all

#register shell "gravity=true|movex=true|movey=true|cpumove=true"
#char 31
#walk flow
#cycle 0
#set this.cntr 0
:loop
#set this.cntr `${this.cntr}+1`
#if `${this.cntr} <= 10` then #char 31
#if `${this.cntr} > 10` then #char 118
#if `${this.cntr} > 20` then #set this.cntr 0
#loop
:hurtplayer
Ouch!
#take health 10
#sound effect play hurt
#die
:reverse
#walk opp flow
#sound effect play bump
#end
:thud(dir, x, y)
#zap thud
#if `${this.x} <= 0 OR ${this.x} >= ${board_width}-1` then #die
#query pos `${label.x}` `${label.y}` ".enemy=shot|breakable=destroy|@prizebox=touch(`SOUTH`)|SHELL=#die|player=shot" return label.idx
#if `${label.idx} == 4` then #call hurtplayer
#if `${label.idx} == 3` then #die
#if `${label.idx} != 0` then #call reverse
#restore thud
#loop
#end
The following removes the action "SHOOT" and adds a new action called "Shell". It also creates a variable called "shells" set to 15 and adds it to the Status Menu.

Code: Select all

#action remove shoot ' remove shoot action
#stats remove ammo ' remove ammo from status menu
#action add Shell onactionkick ' add new action called shell
#set shells 15        ' create a counter for new item
#stats add Shells shells  ' add it to status menu
The following is added to the global "SYSTEM" object and processes the new action

Code: Select all

:onactionkick(dir)
#if `${shells} <= 0` then #end
#set shells `${shells}-1}`
#if `${label.dir} == NORTH OR ${label.dir} == SOUTH` then #end
#tryput `${label.dir}` #ffffff shell
#sound effect play kick
#end
That's a complete example of a new type, status menu item, and action.

Sound effects have been changed to mp3's.

Some new commands:
#query - Allows you to query a position or direction and send messages to the object it finds
#bgcolor <CSS color> - change background color
#fgcolor <CSS color> - change foreground color
#mirror <obj name> - Mirrors movement of an object and is atomic meaning all mirror objects either suceed or fail in movement
#tryput - same as #put but will send a msg if cannot put object in direction
#create - Create an object of a type or send a message if position is occupied
#moveto - Move an object to a position or send a message if position is occupied
#draw - Draws to active object layer for animations or overlay layer

http://webchars.com
User avatar
Commodore
fgsdfs
Posts: 2471
Joined: Wed Mar 12, 2003 5:44 pm
Location: :noitacoL
Contact:

Re: Working on a new HTML5 GCS

Post by Commodore »

okay, what sort of computer are you running this on, because I've tried it on a more modern system, (chrome, 2Gb ram, intel i3 dual core at 3.3ghz) and it still doesn't run at a playable speed. it runs better than on my intel atom powered netbook using opera, but not by a whole lot. it runs at about 15 fps idling, but slower when stuff happens. how much of the code is client side and how much is server side?

also when I pressed P to play town.webchars.com, all that happened was that all the objects on the title screen disappeared!
*POW* *CLANK* *PING*
wcgcs
newcomer
Posts: 27
Joined: Tue Apr 07, 2015 1:06 am

Re: Working on a new HTML5 GCS

Post by wcgcs »

Commodore wrote:okay, what sort of computer are you running this on, because I've tried it on a more modern system, (chrome, 2Gb ram, intel i3 dual core at 3.3ghz) and it still doesn't run at a playable speed. it runs better than on my intel atom powered netbook using opera, but not by a whole lot. it runs at about 15 fps idling, but slower when stuff happens. how much of the code is client side and how much is server side?

also when I pressed P to play town.webchars.com, all that happened was that all the objects on the title screen disappeared!
Last night I have started using chrome profiler to analyze performance bottlenecks and have optimized a few problematic methods. I test on my Galaxy Note 4, iPad mini, MacBook air and work computer Dell Latitude e6440 all which give 60fps. The only device that doesn't achieve 60fps is my phone the Note 4 but comes in around 40fps. It is nearly all front end client side code except for the cloud storage which is back end PHP. It would be great if you could post a JavaScript CPU profile on the machine you're having trouble with. To do so in Chrome press ctrl+shift+C, click Profiles, make sure "Collect JavaScript CPU Profile" is checked and click start. Let it collect info for a minute or 2 and click stop and post the results.

Also can you try toggling resolution with the +/- in the top left corner and let me know if that affects performance?
User avatar
Commodore
fgsdfs
Posts: 2471
Joined: Wed Mar 12, 2003 5:44 pm
Location: :noitacoL
Contact:

Re: Working on a new HTML5 GCS

Post by Commodore »

There you go:

Edit: OK pressing - does help quite a bit, now it's a bit more playable, running at about 25-35 fps, but watching the thing move i'm not sure I trust the FPS counter, I guess it makes sense that the objects wouldn't move 60 times a second though, even if it was running at top speed.
Attachments
CPU-20150507T120625.zip
(45.98 KiB) Downloaded 359 times
*POW* *CLANK* *PING*
wcgcs
newcomer
Posts: 27
Joined: Tue Apr 07, 2015 1:06 am

Re: Working on a new HTML5 GCS

Post by wcgcs »

Commodore wrote:There you go:

Edit: OK pressing - does help quite a bit, now it's a bit more playable, running at about 25-35 fps, but watching the thing move i'm not sure I trust the FPS counter, I guess it makes sense that the objects wouldn't move 60 times a second though, even if it was running at top speed.
Thanks a lot for the feedback Commodore. I've glanced at the CPU profile and the most expensive operation seems to be drawing the back buffer to the canvas screen. Not much I can do to optimize that except set the display to non-scaled mode by default which reduces the fill area.

Shockingly the best graphics performance is seen on IE11. However, processing the HTML document (switching boards) is slow on IE11 but once it's processed the performance is great; whereas Chrome gives the most consistent results. Firefox is just terrible on Windows for drawing text to a canvas.
User avatar
Commodore
fgsdfs
Posts: 2471
Joined: Wed Mar 12, 2003 5:44 pm
Location: :noitacoL
Contact:

Re: Working on a new HTML5 GCS

Post by Commodore »

Well I had a bright idea but it didn't turn out so hot, I turned off the scale and used the browser zoom, but it slowed back down, a little better, but not much.

Unrelated, I think I found a bug, I was using the shield and while holding shift I pressed A, but the shield stayed out and I could not shoot/sword or whatever.
*POW* *CLANK* *PING*
wcgcs
newcomer
Posts: 27
Joined: Tue Apr 07, 2015 1:06 am

Re: Working on a new HTML5 GCS

Post by wcgcs »

Commodore wrote:Well I had a bright idea but it didn't turn out so hot, I turned off the scale and used the browser zoom, but it slowed back down, a little better, but not much.

Unrelated, I think I found a bug, I was using the shield and while holding shift I pressed A, but the shield stayed out and I could not shoot/sword or whatever.
Yep, that was definitely a bug, it should be fixed now. I have made a few more optimizations in hopes of increasing rendering speed and board loading.

It almost sounds like your Canvas isn't being hardware accelerated Commodore. Can you post a pic of your chrome://gpu/ screen?
User avatar
Commodore
fgsdfs
Posts: 2471
Joined: Wed Mar 12, 2003 5:44 pm
Location: :noitacoL
Contact:

Re: Working on a new HTML5 GCS

Post by Commodore »

You are correct sir.

I guess this computer is not as modern as I thought, but it does have more oomph than my little netbook. see below where it says drives are older than 2009. I am staying at a friend's place right now using his, so I'm not really in a position to install driver updates.

Running XP btw.

It does run faster now. Without scaling it is chugging along at about 40fps.

Graphics Feature Status
Canvas: Software only, hardware acceleration unavailable
Flash: Hardware accelerated
Flash Stage3D: Hardware accelerated
Flash Stage3D Baseline profile: Hardware accelerated
Compositing: Hardware accelerated
Multiple Raster Threads: Disabled
Rasterization: Hardware accelerated
Threaded Rasterization: Enabled
Video Decode: Hardware accelerated
Video Encode: Hardware accelerated
WebGL: Hardware accelerated
Driver Bug Workarounds
clear_uniforms_before_first_program_use
disable_d3d11
exit_on_context_lost
scalarize_vec_and_mat_constructor_args
use_current_program_after_successful_link
Problems Detected
Drivers older than 2009-01 on Windows are possibly unreliable: 72979, 89802, 315205
Disabled Features: all
Hardware video decode is only supported in win7+: 159458
Disabled Features: accelerated_video_decode
Disable GPU on all Windows versions prior to and including Vista: 315199
Disabled Features: all
GPU rasterization is blacklisted on non-Android: 362779
Disabled Features: gpu_rasterization
Always call glUseProgram after a successful link to avoid a driver bug: 349137
Applied Workarounds: use_current_program_after_successful_link
Some drivers are unable to reset the D3D device in the GPU process sandbox
Applied Workarounds: exit_on_context_lost
Disable use of Direct3D 11 on Windows Vista and lower
Applied Workarounds: disable_d3d11
Clear uniforms before first program use on all platforms: 124764, 349137
Applied Workarounds: clear_uniforms_before_first_program_use
Disable D3D11 on older nVidia drivers: 349929
Applied Workarounds: disable_d3d11
Always rewrite vec/mat constructors to be consistent: 398694
Applied Workarounds: scalarize_vec_and_mat_constructor_args
Raster is using a single thread.
Disabled Features: multiple_raster_threads
*POW* *CLANK* *PING*
wcgcs
newcomer
Posts: 27
Joined: Tue Apr 07, 2015 1:06 am

Re: Working on a new HTML5 GCS

Post by wcgcs »

Some new updates:

Minified library and setup gzip encoding on server for faster load times.
Added a font editor and increased characters up to 1024 by default.
Tested out editor by creating base board @ http://webchars.com
Added board level wide flag for doubling width of characters.
New #path command for setting path movements for characters.
Removed midi support by default as the instruments added too much bulk to library.

Next step is creating documentation and tutorials...
User avatar
Appetite4
Official Clamp School Defender
Posts: 204
Joined: Tue Nov 18, 2014 4:57 am
Contact:

Re: Working on a new HTML5 GCS

Post by Appetite4 »

Performance is a LOT better. Not sure what changed, but Firefox seems to work okay.

However, the load of each board over HTTP is still a dealbreaker. That adds up to a lot of waiting time just to go from board A to board B, let alone play through a full game.

About the default page--is this a lead-in to a new Zelda adventure? It wasn't difficult to recognize the town despite the pixelation.

Think about what you are going to do for sound. It's nice to see Code Red load, but it's all very...silent right now.

It took me a while to polish my sound system in AS3; I can help you if you are interested in putting together waveform audio in real-time.
wcgcs
newcomer
Posts: 27
Joined: Tue Apr 07, 2015 1:06 am

Re: Working on a new HTML5 GCS

Post by wcgcs »

Appetite4 wrote:Performance is a LOT better. Not sure what changed, but Firefox seems to work okay.
That is probably due to switching to bitmaps. Firefox seems to lag when writing fonts to a canvas. If you press 'F' and select any of the fonts other than "DOS" or "Game Font" I suspect you will run into the framerate problems you previously encountered. There are now 2 rendering pathways, fonts and bitmaps. I got tired of inconsistent results such as certain Operating Systems applying font smoothing so I bit the bullet and went the bitmap route.
Appetite4 wrote: However, the load of each board over HTTP is still a dealbreaker. That adds up to a lot of waiting time just to go from board A to board B, let alone play through a full game.
Perhaps I can apply some kind of background caching system to preload boards. However, since everything is cloud based including the state of the board it would still need to be fetched after the 1st load unless the cloud flag is turned off in which case it uses html5 localstorage. I'm debating whether to have the flag turned on/off by default.
Appetite4 wrote: About the default page--is this a lead-in to a new Zelda adventure? It wasn't difficult to recognize the town despite the pixelation.
I would love to create a new Zelda adventure being a huge fan of the series but right now it's just intended on being an introduction to the GCS. You explore and talk to villagers and such and it introduces you to the different aspects of the system.
Appetite4 wrote: Think about what you are going to do for sound. It's nice to see Code Red load, but it's all very...silent right now.

It took me a while to polish my sound system in AS3; I can help you if you are interested in putting together waveform audio in real-time.
Sure, it would be appreciated, however, I suspect most new creations are simply going to use MP3s.
Post Reply