What is Reddit's opinion of PixiJS?

From 3.5 billion Reddit comments

I think the decision is largely performance-based. The current one is custom-written by Lucky and we're outgrowing it. He's a great developer — but his specialty isn't writing 2D game engines.

The new one -- pixi.js -- is a true-blue, battle tested game engine. It's fast, cross-platform (raising my hopes for future mobile support), and it's going to be a more stable base to build on.

I'm guessing the particle effects won't stay and other issues will be ironed out.

EDIT: So I described the reason for changing engines, but I didn't say the most important part. If Lucky is going to switch to a new engine, he has to figure that out and invest the time/effort to do it now. It makes no sense to add these cool features you're describing and then switch engines later -- most likely duplicating work and having to rewrite even more stuff.

Have you looked into webgl? PixiJS is a really efficient 2d webgl toolkit.

PS If you like AS3 you will love typescript. Here's the pixijs official type definitions.

My friend (http://anumation.ca) did the illustrations separated into Photoshop layers, which I then imported to Spine (http://esotericsoftware.com). I was initially going to use GSAP, but trying to animate with code turned out be super overwhelming and spine offered an actual UI interface. The 2.5d animations that people have done with the software are amazing. Everything is also programmatic so 10/10 would recommend.

Pixi.js is the webgl renderer used to actually display all the content. http://www.pixijs.com/

pixi.js is pretty slick for web based games. Good support for taking advantage of webGL with fallback to canvas.

Basically, this (and other javascript/html5 solutions) are the future. Flash is dead.

^^^^^only ^^^^^slightly ^^^^^hyperbolic

quick edit: Unity is another great option, as it also opens up other platforms.

I mean, you could use React, but why not use one of the many HTML5 game frameworks out there (not engines)? A la pixie.js.

Basically the above will handle all of the annoying rendering of sprites and stuff so you can focus on building your engine how you'd like.

Or for more low-level (possibly a poor choice of words) three.js.

React wasn't made with games in mind. Also, checkout /r/gamedev for more resources :)

My first reaction is to suggest using a library where a decent amount of performance optimization can live under the hood, like Pixi.js (which is awesome and has a number of benefits like providing one consistent API for you, while automatically switching between Canvas and WebGL where supported to take advantage of hardware acceleration). Is there a reason you don't want to use a library like that?

You can have one container with objects of real dimensions positioned relative to its top left corner, then put it in another container and just scale the inner one and use the built-in overflow mechanism to get scrollbars on the parent, yes.

That said, rendering stuff using DOM elements is generally a bad idea due to DOM modification being a performance hog. You should rather use WebGl and <canvas>. There are libraries like three.js or PixiJs that abstract away all the arcane-graphics-programming stuff and give you a neat object interface to work with.

• A simple audio library, similar to this: https://github.com/kittykatattack/sound.js

• A full featured 2D sprite library like Pixi (http://www.pixijs.com) with a animation state player/manager, texture atlas support, and a fixed-time-variable-render game loop.

Canvas is always a CPU hog. It has to render shapes and do compositing and anti-aliasing and it ends up being slow. SVG and DOM aren't much better. The way to get fast graphics is by using WebGL, which offloads the work onto a separate processor. If you're doing 2D stuff then check out PixiJS which is hardware accelerated 2D with a Canvas fallback.

While I encourage the use of D3, I think specifically for this I would use Pixi, http://www.pixijs.com/ to have full capability of a webgl renderer. Also D3 isn't a graphic rendering engine and I wouldn't use it as such.

Cheers :)

I can recommned PIXI js. I've been using it for a new game I'm working on and I have found it easy to use and it will hit 60fps easily on almost any devices.

I think it would be pretty simple to create a 2D DDR clone with it.

If your game isn't too complicated you could even use regular canvas with no engine and get almost everything you need.

There are different needs for different projects. Check out http://www.pixijs.com/. Open source project hosted on github, has an extensive support site not hosted on github. They could have their support site hosted for free on the above mentioned service, with all the site building tools they offer. Sure you probably lose a bit of control over every pixel on the page, but if I was on the pixijs team, I'd rather work on cool webGL shit than maintain and pay for a static site.

You could use pixi.js which does webgl rendering with canvas as a fallback. Or for interactive stuff you might want to look into EaselJS.

The game Code Combat is done entirely with Canvas I believe.

Why not just use JavaScript? It has all the features you want and will run in a browser so will be super easy to share.

There's several libraries if you want more functionality like Phaser or Pixi but you can just do everything in pure JS + canvas.

Also adding multiplayer with Node.js becomes really straightforward.

Both actually. It uses webgl, but i've used http://www.pixijs.com/ library to handle it. Beside pixi.js i only used typescript. So, no engine / framework for browser version.

However, mobile apps were created in Unity3d. I could also used Unity3d for html export too, but i prefered to write it from scratch. That way it works on mobile browsers too.

I've been working on a Pong clone using PixiJS but mostly because it's used at work so I don't have much of a comparison to other frameworks or Unity. I can tell you it's very easy to get started with for simple 2D browser games.

It's more modern techniques than I originally thought. I just assumed it was vanilla cause the performance on mobile seemed less than optimised but it's actually canvas magic powered by http://www.pixijs.com/. Mystery solved.

Our chibi animations are rendered with pixi.js which draws on a normal HTML canvas. Try to find some tool which is able to record a HTML canvas or try to remove the background with some Web-Tools and make many screenshots

There should honestly just be a bot that sends people here if they ask about animations

It may not seem immediately relevant to your example but that library always finds a way to make itself relevant in the end if the task involves animations of some sort.

On the flip side if you want more cinematic / tvish (I dont have a word here and i'm trying not to say cartoons lol) you should check out Pixi.js It will probably remind you a lot of unity.

Since no one else has mentioned it, check out pixi. It's the rendering library that Phaser is built on top of. You'll have to roll your own on a lot of pieces like physics, etc, but I found it a lot more fun to struggle with those things myself than to try to figure out how Phaser thinks you should do it. Either way is good, it just really boils down to what your end goal is - just getting something out quicker, or if it's more about learning.

Absolutely stick with Node. If you're not familiar with it, look at WebSockets. For a multiplayer game you're going to want that. Cheers

TL:DR - Nope, haven't quit. Just in a weird transition phase as I'm looking at other ways of developing the game. Updates guaranteed this semester (2 months at the LATEST but probably within a week or two) since I am using this for a class.

When I first started this game it was sort of a side project that I was doing just to practice coding skills as I was learning to program.

Once rumors of RotMG dying started coming out with the death of flash and people were starting to entertain the idea of RotMG clones that sorta made me think it would be cool to speed up and actually do some more concentrated work on this project which is where I started the subreddit and doing the updates (somewhat) regularly.

Now that DECA has taken over and Realm seems to be here to stay for a while I don't have as much *pressure* sorta to work on this consistently. HOWEVER, I have not stopped this project. While I have taken a bit of a Hiatus from the development for a couple months, This semester in college for my Senior Capstone class in Computer Science the professor stated that we could do literally whatever we wanted for our final project and I am choosing to continue work on The Realm Project as it is going to be my final project.

Due to this I am looking to transition my code from raw JS on a game engine that I literally coded myself in raw JS into the game to an actual JS game engine. Right now it looks like pixi.js is the way I want to take the game, and I am currently looking through it and learning how it works. I have already downloaded the engine but I am waiting to make sure it does what I want before I continue development.

Right now I think I might use Pixi as the thing that does most of the rendering for my game but I will use my engine in order to do the game logic and other stuff.

I've had pleasant experiences with the following:

• cljs - with a rendering lib like http://www.pixijs.com/
• cljr - Unity and Arcadia https://github.com/arcadia-unity/Arcadia
• clj - with libGDX https://github.com/libgdx/libgdx/wiki/Using-libgdx-with-Clojure

Use some form of ctx.drawImage()? You can draw various image types, clip, convert between them etc. It uses the transform, see a few chapters down in the docs (Transformations, Compositing and clipping etc).

Keep in mind 2D canvas is slowish. At some point you'll wistfully look at webgl.

If you want AS3 Sprites in html5 with high performance, features, docs and everything and have it right now check Pixi.js, goes well with TypeScript and WebGL, never look back.

Very impressive! Nintendo reps avert your eyes, nothing to see here.

Just wondering: is there a particular reason you didn't use something like Pixi? Optimization and control, I assume? Or just for fun?

http://daneden.github.io/animate.css/ provides a lot of options when combined with jQuery.

Github has quite a few javascript libraries, and most sites combine more than one. Also check out http://www.pixijs.com/ and http://greensock.com/

There is a huge list of game engines. Choose one that supports a language you like, looks good to you and targets HTML5 / WebGL. It's really down to personal preference.

These are complete game engines. There are also frameworks like pixi.js that just do the rendering and leave the rest to you. More flexibility but also more work.

Pixi.js is nice. It uses WebGL... which is probably even more low level than canvas, but its abstracted away nicely. Adobe has a canvas library called easel.js but i've never really liked it the few times I used it.

Hey thanks! :)

I'm using a framework called http://www.pixijs.com/ .. I went through the examples on the site and copied what I needed. Pixijs has tons of effects filters built-in to make things easier.

If you've done some javascript before, check out the source of the page, it's not too crazy.

Works pretty well for me on chrome.
But I also had some pretty bad lags with just a very simple game example.
I'm pretty sure that if you used canvas naively in javascript, you'd get similar performance problems. A game engine does a lot of optimizations, many render using webgl (As does pixijs).
Another problem that elm has with games is the default game loop. You're using fps 35 which is not ideal. An ideal game loop has a fixed logic timestep and a variable rendering timestep (as described here). I don't know if this is even possible in Elm.

Wow that's insanely cool.

I hope you're talking about a "plugin" just for the slider part btw because there's no way a wordpress plugin would be able to do that effect. like others have said it's (probably) a custom made javascript effect.

I'll see if I can locate what each of those scripts they have are.. hopefully I can tell by searching them since I wish I was more familiar with javascript than I currently am..

• jquery
• underscore
• modest maps, used on the "get in touch" page
• matchmedia (polyfill/css query thing it seems)
• foundation
• hoverIntent (waits for mouse to decelerate before triggering an action)
• a general script to initialize the other scripts
• a script that binds some events and does some stuff to the mobile menu
• a separate script for the effects found on each of the contact, homepage, vacancies, blog, team, home, and main pages
• infinite scroll
• scroll effects
• packery (a pretty interesting layout "packer" ... think of a pinterest-style layout generator)
• pixi JS a 2d webGL renderer.. check out all the cool stuff on their projects page.. http://www.pixijs.com/projects/
• glMatrix .. a script that performs "fast" vector and matrix operations..
• particles.js <- yep this is it, damn that's cool. check out the project page, http://vincentgarreau.com/particles.js/

hopefully that was illuminating. I suddenly wish I had a reason to use this!!

To answer your first question, I know that Pixi.js and Phaser.js (which is built upon Pixi.js) are really popular for 2D games and have good performance. There are tons of JS game libraries out there though so I'm sure you'll get varying opinions on which has the best performance.

As for your second question, assuming you have the artistic abilities, going the web-game route shouldn't restrict you too much in what you want to make. In fact, you can go through the Pixi and Phaser websites and look at the games others have made to see what kind of artistic things are possible.

pixi.js tutorial: http://www.goodboydigital.com/pixi-js-tutorial-getting-started/

more: http://www.pixijs.com/resources/

Canvas basic: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

I'd recommend starting with a game engine. Way too many headaches and sleepless nights with starting from scratch. My favorite is phaser but I've heard nice things about pixi and kiwi.

If you don't want to use something as specialized as rot.js or the like, the other route is to use something like three.js or pixi.js, which just provide you with a wrapper for webgl for rendering stuff. Depends on how much of it you want to write yourself.

If you do go that route, I still recommend looking at rot.js &c, cause you'll learn some valuable lessons like the fact that you don't want to use javascript's builtin random number generator (because it doesn't allow you to specify a seed).

The title says it all really.

I've recently started learning the pixi.js framework and noticed there wasn't a sub for it on reddit, so I made one.

There isn't much there yet apart from a few experiments of my own and some links a friend and I found to be interesting or useful.

The pixi.js framework shows a lot of promise though, so join me on the sub and we can make cool things together!

The cool thing about the web is that you can just inspect the page and see what elements are invloved and the actual scripts used. They might be minified so you might not be able to make sense of them but you can see which libraries are loaded. You can also use something like BuiltWith although it might not give you the results you're looking for.

Inspecting the SpellUp page it seems they are using pixi.js which is a "Super fast HTML 5 2D rendering engine that uses webGL with canvas fallback". Check their site, they have lots of examples that can get you going.

Usually you would use a library to do the heavy lifting for you. This will take care of rendering (Canvas/WebGL), sprite sheets, etc. e.g. Pixi.js

Then you can use something like Browserify/NPM to handle dependencies and modularize your code. This way you don't end up with thousands of lines in a single file; but instead, you get a lot of small modules that work well together, and are easy to factor out for later projects.

Here is an example of a large (3D) project that uses NPM/browserify and WebGL. It's pretty advanced and not very well documented, but at least it should give you an idea of how you can break up files and use other people's code very easily:
https://github.com/smallmultiples/south.im

I'd look into a WebGL based renderer for more speed. Take a look at e.g. Pixi.js (http://www.pixijs.com/). It provides a very nice and performant API. It is OO and allows you per pixel manipulation through shaders (pixi.js calls those filters).

got this now

pixi-tilemap.js:15 Uncaught TypeError: Cannot read property 'registerPlugin' of undefined
at pixi-tilemap.js:15
at pixi-tilemap.js:16
at pixi-tilemap.js:17
pixi.js:4446 PixiJS Deprecation Warning: PIXI.WebGLRenderer class has moved to PIXI.RendererDeprecated since v5.0.0
pixi-picture.js:395 Uncaught TypeError: Cannot read property 'registerPlugin' of undefined
at pixi-picture.js:395
at pixi-picture.js:396
at pixi-picture.js:397
rpg_core.js:3947 Uncaught TypeError: PIXI.filters.VoidFilter is not a constructor
at rpg_core.js:3947
pixi.js:3995
PixiJS 5.2.4 - ✰ WebGL 2 ✰ http://www.pixijs.com/ ♥♥♥
rpg_managers.js:1954 TypeError: WebAudio.initialize is not a function
at Function.SceneManager.initAudio (rpg_managers.js:1868)
at Function.SceneManager.initialize (rpg_managers.js:1817)
at Function.SceneManager.run (rpg_managers.js:1806)
at Function.SceneManager.run (YEP_CoreEngine.js:1207)
at window.onload (main.js:8)
SceneManager.catchException @ rpg_managers.js:1954
DevTools failed to load SourceMap: Could not load content for chrome-extension://njgcanhfjdabfmnlmpmdedalocpafnhl/js/libs/pixi.js.map: System error: net::ERR_FILE_NOT_FOUND
DevTools failed to load SourceMap: Could not load content for chrome-extension://njgcanhfjdabfmnlmpmdedalocpafnhl/js/libs/pixi-tilemap.js.map: System error: net::ERR_FILE_NOT_FOUND
DevTools failed to load SourceMap: Could not load content for chrome-extension://njgcanhfjdabfmnlmpmdedalocpafnhl/js/libs/pixi-picture.js.map: System error: net::ERR_FILE_NOT_FOUND

also when i went in to the plugin list all my plugins but 3 have vanished

Oh, I forgot to link to PixiJS which has a nice real-time example(I'm sure there are many others, but this is a popular lib for interactive canvas/webgl stuff iirc). They have plenty of examples further down that you can click to view of actual projects using it. Not quite the same as what you're asking about, but still meets the needs of interaction and performance for many others.

The most common languages for gamedev are C++, C#, Python and Javascript. You should use whichever one you are personally most interested in.

For the particular game you want to make looks like a http://www.pixijs.com/ would be a good fit.

RPG Maker is pretty good when it comes to JRPGs. Everything else will need plugins made by others or yourself. Depending on how much you want to move away from vanilla RPG Maker it might be better to just use something else like PIXI.js, which RPG Maker is based on, or Game Maker Studio.

&#x200B;

Those particular effects appear to be webGL based, utilizing a library called PixiJS. The "Ripples" effect in particular appears to be a implementation of the PixiJS displacement map. I am not currently aware of any Wordpress plugin that will provide this for you ( though one or more may actually exist ). The good news is though that using PixiJS or WebGL in general should be totally compatible with Wordpress. Sorry I can't provide a more immediate solution, but hopefully knowing how it was achieved will get you searching in the right direction. Feel free to PM me if you want a little more detail on how you might create this yourself.

Some random ideas: make a web game with PixiJS, a mail-merge command line utility, a mobile app for using cooking recipes hands-free, a Chrome plug-in to estimate how long it will take you to read an article that learns as you use it, write a program that gives you a customised view of your Facebook newsfeed, or your own web dashboard that pulls information from all your favourite websites into a single page. A MIDI ringtone generator, a chatbot that automatically answers your friends when you're busy (and asks them if it's something urgent), etc...

Think of something you want to do, pick a language to use/learn, look around for tools/frameworks/engines/libraries that might be helpful and use tutorials to get you started.

I'd actually say take a look at this html/javascript tutorial on Parallax Scrolling.

It's just some simple javascript and it effectively has endless random architecture.

PixiJS Tutorials has the full list of tutorials there.

I was doing a similar research today. As far as I can understand You want to make a web app.

I see three.js more fitting to games as I recently read they are dropping support for canvas(I am not sure about this some correct me if wrong).

I see pixijs more relevant for you

See the gallery, there are games in it but some good applications as well. http://www.pixijs.com/gallery

However I ditched pixi for my use case and chose konvajs but I loved pixi.

https://konvajs.github.io. If that fits your use case.

Give me more details about project so I can better assist you.

> Is there any chance that KC uses WebGL?

Yes, looks like they're using some WebGL engine. After HTML5 update, something like this is printed in the console every time the game starts up:

PixiJS 4.8.1 - ✰ WebGL ✰ http://www.pixijs.com/ ♥♥♥

I would definitely recommend ClojureScript for 2D games. It's pretty easy to get up and running with, and there are a few very nice Js libraries for game related stuff. Developing games in ClojureScript is pretty fun as well since you have hotloading and the REPL allowing you to experiment with different game mechanics quickly. I made a small game with a friend for a hackathon a little while back. The source is here and might be useful as an example. We used pixi.js as the engine, but I'd recommend phaser for a batteries included experience.

How about PixiJS (official website)? It's lighter than Phaser and has less features but it ought to be pretty stable. It's been in active development for years.

p5 is a prettttty slow rendering engine. Even when using a quadtree and quite efficient collision detection algorithms, something as simple as https://www.grayolson.me/asteroids/ begins to perform badly on medium-old computers. I'd look into Pixi instead

I used your solution, at first leaving in and omitting this line:
// This is the only line added, bascially actor here refers to same place as $gameParty.battleMembers()[memberIndex]
but it won't recognize it. When I hit F8, I just see this:
PixiJS 4.5.4 - * WebGL * http://www.pixijs.com/ (w/ three hearts)
It's not interrupting the game or anything with an error message. I'm really not sure what's going on, and why it would just suddenly stop working. I'm sorry to bother you again, too. I REALLY appreciate your help.

If you ever decide to work with canvas (for this project or another) I strongly recommand trying PixiJS, I've made mini-games with it, compatible with mobile and IE11, it is really easy to use and has a powerful community :)

http://www.pixijs.com/

*I'm not affiliated to PixiJS in any way :P *

Tell you what. This thing right here is a production solution to the resource loading in the pixi.js and its .progress goes to 150 for almost a year now.

So in order to have a 0%-100% indication you actually have to base it to 100 via %100. That's 2017 for you.

I got this on last chrome version, maybe a mistake in the last version ?

Uncaught SyntaxError: Unexpected token ) pizzarino.js:598 Pixi.js 4.4.4 - ✰ WebGL ✰ http://www.pixijs.com/ ♥♥♥ Uncaught ReferenceError: setup is not defined at start (index.html:71) at window.onload (index.html:80)

:(

If you don't use unity you can stream assets in as they are needed and avoid loading times.

The game I'm working on at the moment is entirely WebGL, using PixiJS, and it has a pretty short loading time, just the time it takes to download the font I'm using. Everything else is streamed in afterwards.

Before you jump into a three month project, you and your friend should really spend a month busting out really simple games and get to know a system really well. Something javascript based is probably your best bet as beginners. There's tons of javascript game engines out there these days; so many that it'd overwealm you to look through a list. Looking through the comments, that phaser.io engine looks pretty good. I've heard many good things about melon.js too. If you wanted to go really hardcore though, you could code your own engine from scratch. This tutorial is a great one for doing it in HTML5. If you want to dive deeper into custom engines, check out pixi.js, an awesome tool that wraps WebGL into a nice user friendly API.

If you want to create something really quickly, Gamemaker and Stencyl are probably the best beginner tools out there that I'm aware of. They both use a drag and drop interface, though Gamemaker does contain within it a rather deep (though proprietary) programming language and API. It sounds like you both want to learn coding, so perhaps stencyl isn't your best bet, though it can't hurt to give it a try if you want to just warm up your game development noggin and muse.

> Why not? Flash is still the biggest audience for browser based games and HTML5 is too riddled with issues for short project like this to be worth the hassle.

I was a flash developer for many years and it is a slowly dying breed. I do miss it. Have you looked into http://www.pixijs.com/ It's a JS engine that has a lot of similarities programmatically to actionscript.

That was all Michael's (I mostly did play testing when I was involved). But yes, Gridland and ADR stem from the same developer(s).

To build games that run in the browser, take a look at Pixi.js: http://www.pixijs.com

I'll pass on you "thank you" to Michael :-)

I think 'Z is for Zombie' fits perfectly as a web game, so if possible I think you should keep it like that. Haven't played through it, but the simple interaction and relatively short play time makes it seems like a perfect fit for something to play online for a short while in between other things.

I've been developing using Typescript and the only issue I've run across so far is that performance is a bit on the low side. But I'm sure that my code at least partially is the reason for that. So as long as I can make it run fast enough I'll try to stick with keeping it as a web app. The ease of sharing it with people makes it worth it in my opinion.

Have you tried using something like Pixi.js to abstract away the actual canvas interaction? Using it myself now, and it seems to be doing a fine job of solving various compatibility issues.

It's all javascript built on pixi.js. The only real prerequisite is having working knowledge of javascript. If you've got that down, just take a look at pixi.js and the code available in his page

You don't have a fail state/fall back for not having webGL, so only getting a black screen. On Ubuntu, they recently disabled stuff related to webGL.

unreachable code after return statement moment.min.js:6:12384 Object { server: "https://demo-01.assembledrealms.com…", raw: "OK" } backdoor:220:9 "Pixi.js 3.0.8 - Canvas - http://www.pixijs.com/" pixi.min.js:6:10301 Error: WebGL: Error during native OpenGL init. pixi.min.js:6:10530 Error: WebGL: WebGL creation failed. pixi.min.js:6:10530 Error: WebGL: Error during native OpenGL init. pixi.min.js:6:10555 Error: WebGL: WebGL creation failed. pixi.min.js:6:10555 All Scripts Loaded demo.js:68:7 Error: WebGL: Error during native OpenGL init. pixi.min.js:6:10530 Error: WebGL: WebGL creation failed. pixi.min.js:6:10530 Error: WebGL: Error during native OpenGL init. pixi.min.js:6:10555 Error: WebGL: WebGL creation failed.

a float counting up to 100.

TypeError: this.parent is null pixi.min.js:2:12571

EDIT: Is this the same thing you posted on the HTML 5 Game forum? Played it on windows there it was a nice demo but felt a bit rushed a month ago.

It's an extremely bold claim for an obviously novice programmer claim that chromes team, which consists of top notch programmers, did an incorrect implementation of flexbox which hundreds of millions of people use, but you, a novice programmer, have unfoiled there poor implementation? With out a doubt, it's not yourself, who has a misunderstanding of it, but of course - it's the chrome team.

Side note: scrap project and restart with Pixi.js (or a similar sprite rendering library): http://www.pixijs.com/

If you know JavaScript well why not use a Javascript game engine? Pixi.js (http://www.pixijs.com/) is fantastic and I'm sure there are plenty of others out there that are just as good (Pixi is the only one I have used and can vouch for).

TweenMax for animations, PIXI for graphics rendering with excellent performance. PIXI was basically made as a transitional tool for Flash developers, and there are a lot of similarities. It uses WebGL (with fallbacks for old devices).

You could use bare naked canvas, like /u/Reggie3 suggests, or use a high level framework like PIXI which has tons examples.

As for animation you could use a tween engine to move things around like GSAP which makes thing very easy unless you want to specifically learn to move thing by code. Here's a tutorial on animation by code.

It's not <canvas>, but it's not a gif either. <canvas> isn't the only way to animate elements - you can do a lot of what you can do in canvas with standard HTML elements.

There's pros and cons to each approach, see http://www.kirupa.com/html5/dom_vs_canvas.htm for more - likely, they've gone with animating elements with Javascript + CSS here, because [reasons]*

*Note: I don't know the specific reasons, but they'd likely incorporate: performance, cross-browser compatibility, ease of coding, ease of animation techniques yadda yadda.

There's vast potential for animation on the web. With standard elements, you get a lot of room for "moving stuff, spinning stuff, scaling stuff..." - with canvas, there's <em>tons</em> more you can do.

You're in luck because since RPG Maker runs off JavaScript, things such as mode 7 are actually extremely easy to do, as you can see the basics of it here: http://yuiblog.com/blog/2008/06/23/slicing/

In fact, you can afford to be even more "ambitious" and look towards more intense JavaScript effects: http://www.pixijs.com/examples/

>(because they get slow when you plot over 100,000 points)

That worries me a bit haha.

In what timeframe you want to draw those 100k of points?

Try canvas, its VERY easy to use, but might not suit your "need for speed".

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas

Otherwise for speed you need to use some kind of library that uses webgl, but as far as I know most of them are specialized in games instead of drawing pixels as fast as possible

http://www.pixijs.com/

Use pixi or phaser , 2 good JS game libraries.

>http://www.pixijs.com/

Remember to NEVER use setInterval, only use requestAnimationFrame, which makes the game render and update as fast as the browser can handle. ~60fps

Good luck!

My advice would be to leverage existing libraries as much as possible; that way you can spend time on the things specific to your game. You could look into Phaser for all the features you listed (it's easy to get started and they have a wealth of examples), or Pixi if you need something lighter and at a lower level of abstraction (say, for performance on low-end devices).

Secondly, you might want to consider more mainstream languages to target. The languages you listed are nice in their own way, but they don't have the appeal that would attract beginners to give your game a try, the community that would keep them learning on their own, etc. Why not use JS? There's tons of support for beginners, plus a lot of existing code (parsers, interpreters, AST-manipulation tools) you can leverage. You can embed Tailspin or something in your game to run user code.

The article makes no mention of the performance benefits of WebGL. PixiJS leverages WebGL to great effect (FYI - Phaser is built on top of the PixiJS API).

JavaScript may fall short of its compiled counterparts in terms of speed but leveraging GPU accelerated graphics certainly makes the gap smaller.

Firefox, dunno which version, F12 says:

Error: WebGL: Refused to create ANGLE OpenGL context because of blacklisting. pixi.dev.js:5747:80 Error: WebGL: Refused to create native OpenGL context because of blacklisting. pixi.dev.js:5747:80 Error: WebGL: WebGL creation failed. pixi.dev.js:5747:80 Error: WebGL: Refused to create ANGLE OpenGL context because of blacklisting. pixi.dev.js:5747:112 Error: WebGL: Refused to create native OpenGL context because of blacklisting. pixi.dev.js:5747:112 Error: WebGL: WebGL creation failed. pixi.dev.js:5747:112 "Pixi.js v2.2.8 - http://www.pixijs.com/"

nemeth, I finally had a chance to look at those us open animations (Obviously from my handle, I'm also a lover of tennis!). It looks like they might be only using gsap for the tweening, but looks like a lot of the work is done there by http://www.pixijs.com/ which they state is: "2D webGL renderer with canvas fallback". I agree those are very cool. I don't know much about pixi.js so I can't provide any other insights, but it definitely looks like something to put on the list of things to go look at. Thanks for sharing ;-)

I think its definitely possible. You can play my game here: http://myonlyfriend.azurewebsites.net which is in alpha, but is very playable. Also this is in canvas2d, but you can do much more with web-gl.

(WASD/Mouse)

Some notes:

Use web-gl. Canvas2d is too slow. Check out pixi.js

As for multiplayer, I dont know enough about it to be much help. I have seen MMOs in browser so I know it is possible/plausible.

Thanks! And that seems like a good solution to the problem. The only thing is, I can manually complete the most important task, or I can use some external library to handle most of it for me.

For example: I'm currently writing code for the UI, on top of rendering the map and all entities. I'm writing all this rendering code myself, while there is a library: http://www.pixijs.com/ that handles all 2D rendering for you. It even checks if the browser supports canvas or webgl, it handles mobile input, etc etc etc.

I just don't know if I should keep writing code like that myself, or that I should spend time to implement for example Pixi.js. Because then i'd have to learn Pixi.js and adapt to how that works.

Raw canvas is a bit cumbersome. If you simply need to get stuff done then EaselJS is pretty good: http://www.createjs.com/#!/EaselJS

And if you need speed then http://www.pixijs.com/ is crazy.

And using TypeScript of course.

pixi.js does look nice, though it's far more powerful than what I need now and it does look like its interactivity is very limited: those examples only respond to mouse clicks, at most. I should be able to click on nodes, associate a link with (parts of) it, drag them around, select them to interactively change attributes, etc.

Thanks for the tip, though it's something I'll keep in mind maybe for another project.