Should I use an rendering framework or HTML canvas for game development?

[SarahJ]

I'm looking to start making 2D games with Javascript, but after researching and looking at other games source codes, I can't decide whether to use the HTML canvas to render my games or a framework. First of all, this forum may be a little biased since it hosts many forums of rendering frameworks, so I'm looking for a clear, unbiased answer on which one would be easier and more flexible, as well as some good ones to choose from. 

When I first started, the obvious choice would be to use a framework, as many articles state, "There's no point in reinventing the wheel". However, after looking at some popular web-based 2D games, it seems like most like to use canvas to render. I've looked myself into Pixi.js, but even though it has some amazing features (WebGL with canvas fallback, built in loop), I feel like it still lacks the flexibility of the HTML canvas. For example, if I wanted to make a circle that can be morphed or manipulated, I could do it using canvas with curves, however, with Pixi.js, it doesn't seem to have that kind of flexibility. 

I'd like to know what others on this forum think, and possibly why or why not they choose to use a framework. (Keep in mind I'm looking for a rendering framework, not a full-featured game framework)

Thanks!

[mattstyles]

I think you've maybe misunderstood how these frameworks get their output into your eyeballs. They *all* use canvas, 3d accelerated or not, its a canvas element they output to.

If you want to learn how canvas and context works, dig in, its a great learning experience.

If you want to get some meaningful output to the screen, use one of the many available frameworks.

Creating these canvas rendering libraries is no small task, not small at all. It's a lovely technical task to undertake, but, its really tricky so you probably need to decide if you want to invest your time creating a rendering engine, or creating a game/app/whatever to use that engine.

You should get an unbiased view here, plenty of people here have invested in making their own rendering libraries.

1 hour ago, SarahJ said:

I'm looking to start making 2D games with Javascript

If making a game is indeed your goal, use something like Pixi or Phaser etc to do the heavy lifting and focus your effort on making the game fun.

Also, on nomenclature, I tend to differentiate between library and framework, although the line is often blurred.

Phaser is a framework, it handles things like audio, rendering, user input, application structure etc.

Pixi just renders stuff really fast, it is a library/module.

To reinforce this, Pixi is contained within Phaser 2, and is just one part of it.

Your outlook on coding dictates whether you are more drawn to using a framework vs consuming libraries and, in effect, creating your own framework from those pieces. Pros and cons to either approach.

[b10b]

Also, from a pragmatic view any good rendering library can easily be bolted on to, so beyond the load time there is little disadvantage in adopting one?  For example with CreateJS any DisplayObject can be "cached", which then allows direct access to "cacheCanvas", which can then be directly manipulated (as if it were any other canvas).  An advantage of such a mix-and-match strategy is you decide when to keep inside the library and when to venture beyond ... e.g. in many of my games I utilise library capabilities for basic scene-graph, UI, text etc but will often create a custom renderer (at canvas or shader level) for elaborate HUD components or performance critical game-world graphics.  I try to pick the best library for the project, my preference is CreateJS for non-WebGL lightweight work, and PixiJS for heavier games that can target WebGL or need Spine animation or shaders.

[8Observer8]

I could not choose what to study for coding games and I decided to study these tools:

• Pure WebGL 1.0 and pure WebGL 2.0. I like to study linear math, trigonometry, shader math. I like to study this book which uses pure WebGL and glMatrix: Build your own 2D Game Engine and Create Great Web Games I want to understand how game frameworks works under hood, I mean: Pixi.js, Phaser.js, Three.js, Babylon.js and so on. I like to write very simple clone games like: Snake, Pong, Tetris and so on without game frameworks and game engines.
• I can use C++ books about OpenGL to study WebGL because WebGL 1.0 is based on OpenGL ES 2.0 (WebGL 2.0 on OpenGL ES 3.0). There are a lot of books and examples in C++ and GLSL that I can translate to WebGL.
• I can use ThinMatrix video tutorial to study OpenGL using Java and translate his examples to WebGL.
• I study C# for Unity Game Engine and I write my own simple game engine in C# and OpenGL 3.1 (OpenTK) by rewriting example from this books from deprecated/legacy OpenGL to modern OpenGL: C# Game Programming: For Serious Game Creation This book is a great. It study how to write a good modular architecture and how to develop software using TDD (Test-Driven Development). I like TDD and BDD (Behaviour-Driven Development). I am a fan of these methodologies of software development. I want to rewrite the code from this book to TypeScript/WebGL because TypeScript is very similar to C#. I liked compiled languages like C# and Java. But I study JavaScript 5 (2009) because it is very popular and I will be able to find removed jobs like freelance in the future when I will be a skilled computer graphics and game programmer.
• Pixi.js and Phaser.js for 2D games. It is very popular frameworks. A lot of works was made. You can write your own shaders in GLSL for these frameworks.
• Three.js and Babylon.js for 3D games in interactive 3D applications. These are 3D libraries based on WebGL and Canvas API like another popular graphics libraries. You can write shaders for this graphics libraries in GLSL too.
• Unity Game Engine for 2D and 3D games. I can write WebGL games for Desktop and I can build them for Android, iOS, Desktop (Mac, Window, Linux) to native applications and these native applications will not have browser restrictions. I can write shaders in HLSL and this shader language in very similar to GLSL. I can connect my WebGL, desktop and mobile clients to Node.js server that your Socket.io or WebSockets. For WebGL version I can use pure WebGL frameworks because Unity WebGL build does not work on mobile devices

P.S. Sorry for my English. I study it but it is very hard. I did not use Translate Google for writing this message, I wrote this myself.

[grelf]

My approach is to use photos to avoid any complicated rendering, and use the basic "2d" canvas context without any third party libraries or frameworks. I do not use WebGL because I believe it is not available on all devices, whereas plain HTML5/JavaScript is. I want my efforts to work on everything from desktop to smartphone.
 
I have been amazed by how fast images can be scaled and drawn in the 2d context. My prime example is at www.myforest.uk where the scenes are drawn in less than a second on current machines and yet each comprises many thousands of scaled copies of a few photos (sample scene below).

The scenes are 3D in the sense that true perspective is calculated for distance from the observer but each drawn image is of course 2D. I use my own photos to avoid copyright issues. I edit them in Photoshop to cut out the objects I want against a transparent background and the PNG file format preserves the transparency so objects can be drawn sensibly in front of each other.

I have the impression that the frameworks are each written for very specific types of games. I want to encourage people to break out from those moulds and be more creative. I know that my forest is miles away from mainstream video games but I hope it demonstrates that the basic HTML5/JavaScript platform can be used for very varied effects.

In an attempt to help others I am documenting my forest, including how it is programmed, starting here: www.grelf.net/ojsvg.html

 

[8Observer8]

1 hour ago, grelf said:

I believe it is not available on all devices, whereas plain HTML5/JavaScript is.

Yes, you are right the HTML5 <canvas> element is not available on all devices with old browsers. You should show a message for a user like this:

<canvas>
    Your browser does not support the HTML5 "canvas" element. Please, use a modern browser.
</canvas>

Check what modern browsers supports WebGL here:

• WebGL 1.0: https://caniuse.com/#feat=webgl
• WebGL 2.0: https://caniuse.com/#feat=webgl2

[8Observer8]

1 hour ago, grelf said:

drawn in the 2d context

WebGL have a very big performance because all calculations are occurred on graphics card processor that get data from graphics card memory. You can compare WebGL with Canvas API. For example, you can write a fragment shader in GLSL that will get every pixel and analyze color with the "if" statement. The fragment shader works very quickly but CanvasRenderingContext2D.getImageData() works very slow. WebGL and GLSL have more possibilities then Canvas API. It is simple to rewrite you WebGL game to OpenGL/C++/C#/Java to have very high performance without browser's restrictions.

[Langerz82]

For your first couple of interactive applications I would use a framework. I myself based my code in canvas and granted I could make some optimizations but the hassle of coding is much more complex.