Tiara: HTML5 Game Engine
January 22nd, 2011
Update 3: The demo page has been updated to feature an index of currently completed demos. After a long day of working on image/sprite support I took a break from engine development and built up a quick demo, Example 3, that features some actual gameplay elements!
Update 2: Redditor gramathy just informed me it’s also working in Safari, if those of you in that world are willing to run a quick test for me. @erikbrannstrom told me it’s also working in Firefox 4 Beta.
Update: If you run Google Chrome, I have a demo running publicly right here – if you could reply with your FPS count (lower-left) and system info you feel is relevant, it would be much appreciated.
Gaming has always been a passion of mine and as any of my friends can tell you, I’m constantly coming up with ideas for new games. Unfortunately, my expertise in this little programming world has been primarily delegated to the world of web development. Thankfully, with HTML5 on the horizon, I can finally combine these two passions of mine into one package of pure awesome and peak out my nerdometer to its maximum.
I’ve spent the last 6 hours working on a JavaScript game engine, using HTML’s new canvas element, that is based off of the extremely fun and easy to use Love2d game engine for Lua. Now, there is a bare minimum of functionality here thus far but I’m having a lot of fun working on this and I think it’s a great foundation to continue working off of. I shared a few quick screenshots on Forrst, of my first and second example demos – complete with code and performance summaries; but, I also wanted to record a quick demo so everyone could see this bad boy in action.
The video below (HD available on YouTube) sits just under 10 minutes and will introduce you to the engine, I discuss what my goals are in basing the API off of Love2d’s API and I actually rebuild my second example demo and bounce a square around the screen! Check it out and let me know what you think in the comments!
January 22nd, 2011 at 10:53 am
You know, HTML5 doesnt exist anymore?
But still! GOOD WORK!
January 22nd, 2011 at 11:18 am
208 fps. chrome 9 beta mac. macbook air 1.8ghz, 2gb ram. looking good
January 22nd, 2011 at 11:34 am
~180-190 FPS.
Chromium 9.0.597.67.
Gentoo Linux.
Sony Vaio with 3GB RAM, 2.0Ghz dual-core processor.
Shitty Intel integrated graphics
January 22nd, 2011 at 11:36 am
~215 fps
9.0.597.67 beta
Linux c60 2.6.32-27-generic #49-Ubuntu SMP Thu Dec 2 00:51:09 UTC 2010 x86_64 GNU/Linux
Intel(R) Core(TM)2 Duo CPU P9500 @ 2.53GHz
MemTotal: 3952172 kB
MemFree: 2201772 kB
Buffers: 116368 kB
Top 6 processes:
5297 me 20 0 867m 41m 16m R 31 1.1 0:22.00 chrome
1318 root 20 0 191m 27m 16m R 27 0.7 53:35.18 Xorg
1945 me 20 0 46588 4332 1260 S 8 0.1 30:18.59 gconfd-2
1130 me 20 0 622m 102m 38m S 5 2.7 0:56.93 chrome
1883 me 20 0 186m 7660 1248 R 4 0.2 11:34.79 gnome-session
2001 me 20 0 326m 8436 1968 S 4 0.2 8:17.72 compiz
January 22nd, 2011 at 11:41 am
Hovers from ~180-210. Chrome 9 beta windows 7. Intel Core 2 Duo 2.3 ghz, 4gb ram
January 22nd, 2011 at 11:58 am
61fps in Firefox 3.6.13 on Mac 10.6.4 – Macbook with 2.1 GHz Intel Core 2 Duo, 2 GB 667 MHz DR2 SDRAM
January 22nd, 2011 at 12:09 pm
Saw this over at reddit.
Using Nvidia 9600m GT 512 MB
Chrome for Mac: 208 – 217 fps
Chromium r: 201 – 217fps.
Using NVidia 9400m 256 MB (shared)
Chrome for Mac: 210 – 216 fps
Chromium r: 203 – 219 fps
System: Dual-GPU Macbook Pro 5,1; 4 GB RAM
FWIW, I noticed that if the box clips past any of the four edges, it has difficulty getting out of it and will stay on that edge moving up/down or left/right along the edge for a while.
January 22nd, 2011 at 12:12 pm
@lowell: Thanks, I’ve seen that a few times as well. When I get around to adding collision detection I’ll be sure that gets fixed.
January 22nd, 2011 at 12:20 pm
I get 100 fps on 64-bit Firefox beta 9 on Ubuntu.
January 22nd, 2011 at 12:20 pm
19fps on iPad
January 22nd, 2011 at 12:22 pm
max 231fps, Chrome 8, windows 7, asus laptop, 2.1GHz, 4gb ram. Good luck man
January 22nd, 2011 at 12:34 pm
245 fps
Chrome 8.0.552.237
Win7 on 2.93 Ghz dualcore, 4gb ram, and an ATI Mobility Radeon HD 4670 w/ 1gb dedicated video memory
January 22nd, 2011 at 12:46 pm
130 to 155 fps. Windows 7 on a Lenovo S10 netbook, Chrome 8.0.552.
January 22nd, 2011 at 12:47 pm
The demo works on ie9 beta x64 as well.
60fps, windows 7
January 22nd, 2011 at 12:55 pm
Opera 11.01 (Build 1164 Linux)
90 – 390 FPS
January 22nd, 2011 at 12:57 pm
Windows 7
Chrome
Turian Dual-Core M520 2.3ghz
Mobility Radeon 4200
FPS ~219
January 22nd, 2011 at 1:03 pm
220 fps on latest chrome-dev build from SVN. Running ArchLinux with xfce4.8 and kernel 2.6.37. Core 2 Duo P8400 @2.26GHz, 4GB DDR3 Ram, Intel MHD4500 GPU.
January 22nd, 2011 at 1:12 pm
steady 251fps
windows 7 64bit
core i7 920
xfx 5770
chrome 8.0.552.237
January 22nd, 2011 at 1:36 pm
If/when you decide to release the source officially, could you please add it to the JS GE list [1]. Thanks.
Btw if you want to write about some basic GE tech etc. to the wiki go ahead! It’s open for expansion.
[1] https://github.com/bebraw/jswiki/wiki/Game-Engines
January 22nd, 2011 at 2:18 pm
Hovering around 100FPS on a Google Cr-48
January 22nd, 2011 at 2:20 pm
Jumping between 180 and 199 FPS pretty nice
Spec:
google chrome
X2 5800+
NVIDIA GTS 450 1024 MB RAM
Windows 7 64 Bit
January 22nd, 2011 at 2:21 pm
Chromium 10.0.634.0, Phenom II, Radeon HD 4350, xf86-video-ati. 222fps. Nice.
January 22nd, 2011 at 2:26 pm
About 215-250 FPS
Chrome 9.0.597.67
4GB Ram
Win 7 64 Bit
Intel Core 2 Duo @ 2Ghz
January 22nd, 2011 at 2:33 pm
@Complete
Yep – iPad at 19fps.
January 22nd, 2011 at 3:04 pm
Hovers a bit above 420. Has gone as 700 and as low as 1 (though only for an instant) However, if I leave the tab and come back it drops to 100. Refreshing shoots it back to 400
Opera 11 [yes, it works on Opera]
Core i7 Q720
Mobility Radeon 5730
6.0 GB DDR3 1333 Mhz RAM
Windows 7 64 Bit
January 22nd, 2011 at 3:05 pm
Solid 250 FPS
Google Chrome 8.0.552.237
Windows 7 64bit
ATI Radeon HD 5870
4GB DDR3 RAM
Amd Phenom ii x4 955 3.2GHz
January 22nd, 2011 at 3:12 pm
I got from 115 to 150 fps.
specs: HP Laptop, 1.66 ghz dual core intel cpu (non duo),4 GB ram, integrated intel graphics (Intel64 Family 6 model 15 stepping 13, if that means anything lol) Shared memory for the graphics, I believe.
I also have a bunch of tabs open and like 3 youtube videos loaded and a few flash programs running.
January 22nd, 2011 at 3:13 pm
251 FPS
Nvidia GTX 460
Intel Quad Core i5-760 Processor (2.80 GHz)
8 GiB ram
Chrome 9.0.597.67 beta, Windows 7
January 22nd, 2011 at 3:36 pm
Opera 11 (Build 1176)
64 bit linux
2×2.5ghz processor
350fps (give or take 20)
January 22nd, 2011 at 4:01 pm
Looks great! Can’t wait to see what gets built with it!
Google Chrome 10.0.642.2 Dev
Windows 7 64bit
Intel T5800 @ 2.00ghz / 3GB Ram
Ati Radeon 3450 Mobility
FPS 210 – 220
January 22nd, 2011 at 4:02 pm
Are you hoping to eventually turn this into an open source project?
January 22nd, 2011 at 4:05 pm
@ys: Absolutely!
January 22nd, 2011 at 4:07 pm
197-205 FPS
Google Chrome 8.0.552.237
Snow Leopard 10.6.6
2.4 GHz Intel Core 2 Duo
2 GB RAM
January 22nd, 2011 at 4:07 pm
Oh, and additional note. If I turn on GPU Accelerated Canvas in Dev Chrome then it seems to get the FPS capped at 60 (screen refresh rate presumably).
It spikes up while its not the active tab, but goes back to 60 in less than a second once the tab is selected.
With GPU Acceleration on the black box also seems to get stuck bouncing along one of the sides of the field and actually disappeared from it all together a few times. These glitches only seem to occur if you leave the tab and then return.
January 22nd, 2011 at 4:11 pm
Around 235 FPS for me. Google Chrome, Windows 7 64-Bit, Intel Pentium Dual Core 1.87 Ghz. 3 GB RAM
January 22nd, 2011 at 4:20 pm
MacBook Pro running Mac OS X 10.6.4 / 2.53 GHz Intel Core i5 / 4GB Ram
Chrome 8.0.552.237 = 219 FPS
Safari 5.0.2 (6533.18.5) = 90 FPS
January 22nd, 2011 at 4:26 pm
205, Google Chrome, Linux
January 22nd, 2011 at 4:27 pm
Topped out at ~135 and bottomed at ~107
Laptop:
1.6 GHz AMD Athelon 64
ATI HD3200 graphics
3 gigs of ram
Windows 7, running the blog tab and the sample tab in Chrome
Great work
January 22nd, 2011 at 4:32 pm
15″ 2.66ghz i7 macbook pro, 8gb ram
running chrome on macos x – 208fps
January 22nd, 2011 at 4:37 pm
iPhone 4 Safari: 5 FPS! w00t!
January 22nd, 2011 at 4:47 pm
Chrome 8.0.552.237
Windows 7 64-bit
4 gb ddr2 800 RAM
ATI 3200 HD (laptop graphics)
AMD Turion Neo X2 L625 (dual 1.6 ghz) CPU
This is a Toshiba T135 netbook.
It gets around 139-145 fps.
January 22nd, 2011 at 5:25 pm
@Wales: Awesome! Looking forward to contributing. I will be watching this page closely.
January 22nd, 2011 at 5:27 pm
200-240 FPS in Chrome 8.0.552.237
61 FPS in IE 9.0.7930.16406 (Beta)
I’m guessing the 60/61 FPS in IE is due to GPU acceleration, which George noted is the cap in Chrome dev too.
Win7 x64
1.3 Ghz Intel U7300
4 GB RAM
January 22nd, 2011 at 6:06 pm
200-215fps
chrome 10.0.642.2 dev
ubuntu 10.10
2.6ghz quad-core
4gig ram
January 22nd, 2011 at 6:07 pm
This is so awesome
204-205 FPS
Windows 7
9.0.597.67 beta
Nvidia GTS 250
3.57 GHZ quad core (Intel i7 920)
4GB RAM (2x2GB)
January 22nd, 2011 at 6:09 pm
@Wales: This is cool. I tested in Opera 11 build 1156 and it worked!
January 22nd, 2011 at 6:13 pm
300-500 FPS
Opera 11 Build 1156
250 FPS
Google Chrome 8.0.552.237
Windows 7 Pro x64
Intel Core i7 Mobile Q720 @ 1.67GHz
8gb RAM
January 22nd, 2011 at 6:44 pm
Hardware: Apple MacBook Pro 15″
2.66 GHz i7
4 GB DDR3
NVIDIA GeForce GT 330M
Software:
Mac OS 10.6.4
Chrome 10.0.642.2: ~215 (~50% CPU)
Opera 11 Build 1156: ~350 (~80% CPU)
Firefox 3.6.13: ~80 (~50% CPU)
January 22nd, 2011 at 7:35 pm
Jumps between 20 and 30 FPS on my Droid…
January 22nd, 2011 at 8:34 pm
Chrome 8.0.552.237 – 240FPS
Firefox 3.6.10 – 71 FPS
Intel Core 2 Quad Q95500
HD 5870
4GB RAM
Windows Vista SP3 (fully updated as of 1/22/2011)
January 22nd, 2011 at 9:27 pm
Opera 11 (build 1156)
Windows XP SP3
Atom 230 (1.6GHz)
1gb RAM
Stays pretty stable, between 65 and 80 fps.
January 23rd, 2011 at 9:25 am
251 FPS
Radeon HD 6970
Intel 2600K
Windows 7 64-Bit
Google Chrome 8.0.552.237
January 23rd, 2011 at 10:05 am
46fps on the iPad
January 24th, 2011 at 11:45 pm
Hi, i like what you did here. I was browsing through your tiara.min.js source and came across this:
newImage:function(a){
var b=new Image;
b.src=a;
return b
}
I looked for the ‘Image’ constructor but cannot find one.
January 25th, 2011 at 12:42 am
Image()is just a standard DOMElement – the MDC has some information on it. That area of the code does have some issues in Firefox – still ironing them out.February 21st, 2011 at 5:39 am
nice work!
sorry i couldn’t open youtube, (blocked in office).
i was wondering, are you planning to enhance your idea to support simple 3d graphics? even if simple blocks?
regards,
February 21st, 2011 at 5:42 am
@dinx
No, I don’t – I have no ambition to strive for 3D at this point. Plus, the canvas element is designed with a 3D context in mind – but 2D is the only one currently “developed”. No need to force it with 2D when 3D will come in time.
February 27th, 2011 at 9:38 am
Nice website and really cool demostration. My FPS was about 243-250 using Chrome. I can’t wait to see more!!
March 6th, 2011 at 7:26 am
Wow. Basing your framework off of Löve is a fantastic choice. I can’t wait for a publicly available version to be released.
Browser: 11.0.686.1 dev
OS: Ubuntu 10.10
Processor: Intel Core i5 650
FPS: 208
March 6th, 2011 at 7:34 am
This looks interesting!
I also know why your objects stick on the edges, it happens when the velocity keeps being inverted before the object gets away from the edge, instead of inverting it, you should actually use the absolute value for top and left, and the negative of the absolute value for bottom and right.
The task that dawns upon you now, is a way to convert between love and tiara games
.
March 6th, 2011 at 8:25 am
~100 fps for example 2
~80 fps for example 3
Chrome 9
Windows 7
AMD Turion neo X2 l625 1.60GHz
This looks really really really awesome!
August 31st, 2011 at 10:40 am
Are you going to port the full LÖVE2D engine to js? Because that would be awesome!!!
October 3rd, 2011 at 9:20 am
@Guillermo Estrada: Yes, that is the eventual goal; although I must admit I haven’t had much time to work on it as of late. A reddit user is teaching a game programming class – I’ve decided to follow along with that class, using TiaraJS. This should give me a bit more motivation to continue along the development of TiaraJS as well as provide a “timeline” as to which features to implement (rather than just running through the Love2D API from top-to-bottom).