Firstlook to game development open source project | PlayCanvas

Introduction

---

Nowadays, the potential that we can find on the web is well known, from sites dedicated to offering academic information, movies, music books, among others. It is a window open to endless possibilities limited by our imagination, this time we focus our attention on an industry that attracts millions of users, the video game industry.

There is not a person in the world who has not heard or played a computer game or console, or from a mobile device which has initiated a new era in communication and entertainment. The truth of all this is that the video game development market is in a boom phase and more and more companies or small groups of developers interested in this branch of entertainment.

Developing video games is not a simple task at all and requires a set of skills that encompass the knowledge of design, animation and programming to name a few of them, all this added to the different challenges that arise before the development phase of them .

Given this many organizations have focused their efforts on creating tools and frameworks offering developers environments with a base from which they can start in this world. Many of these tools integrate in their functions animation systems, physics engines in 2d and 3d, lighting effects, textures among others, in order to make the experience in the development of video games easier and more user friendly.

PlayCanvas

---

This time we will talk about this innovative game development engine for web environments, PlayCanvas. We have before us a powerful tool whose base is focused on the use of a complete library of JavaScript with the main functionalities required by a framework oriented to the development of 3D games, among which we can list the loading of models, physical engine, management of audio sources among many others that we will list later. On the other hand, we find a technology called WebGL which is nothing more than an API for the rendering of 3D graphics in any browser that supports this technology without the use of any additional plugin or complement.

Characteristics

---

Next, we will list and give a little more detail information of the features that we have when choosing this complete framework, let's start:

WebGL based renderer:

We could list this as the main feature of playcanvas, WebGL can be cataloged as the future of 3D games on the web, it turns out to be a very complete api developed in JavaScript as we had previously commented.

WebGL 2.0 makes it even easier to build 3D web applications, with faster real-time rendering, new types of textures and shaders, and reduced video memory consumption. Techniques including deferred shading, tone mapping, volumetric effects, and particle effects can now be efficiently implemented. The new APIs also bring WebGL up to feature parity with OpenGL ES 3.0, a graphics platform commonly used in mobile games.

It has an integration in most modern browsers and is perfect for displaying dynamic content on the web using an HTML canvas element without requiring any additional plugin, another point to highlight is the ability of this technology to make use of acceleration by hardware through GPU.

Directional, point and spot lights:

• Directional lights:
  

  The most adapted example for this lighting component is the light source that we perceive from the sun, due to its distance and great coverage on a surface we can appreciate it as if it were traveling in only one direction, it is ideal to use this option for these cases, being able to control its intensity and color if we want a warm sunrise or a dusky sunset.

• Points light:
  

  If in your case you want to represent a scene where light sources come from a light bulb or candles it is advisable to use the points of light, with which you can define small points that illuminate in all directions, but with an adjustable range to your needs.

• spot lights:
  

  Imagine for this case a reading lamp, flashlight or because not a lighthouse, all these comply with the characteristic of emitting light in the form of a cone, a characteristic that we can put into function from this component. in the same way with the possibility of configuring the intensity of light, color or scope thereof.

• Physically based rendering (PBR):
  

  Is a technology applied in the creation of materials simulating the physical behavior of light on objects allowing us to obtain more realistic results in terms of the development of 3D models. We can manipulate diffusion values to determine how the material reflects the light or its specularity and make it brighter to obtain reflections of the environment. Here are some examples of what we can get with this rendering technology.

GPU Particle engine with editor:

From rain, snow, fire, smoke or sparks, all this possible thanks to a particle system editor that we will find integrated in this framework, a very useful feature to give small special effects, Just imagine and make the effect of seeing a bomb explode, driving dust in all directions.

In terms of configuration we have at hand a wide range of options, from particle quantity, management of emission rates, speed, among many others. In particular I want to show you a part of the configuration section of the particle system where we can see small graphs that when you click on them we will show a small window adapted to the configuration that we have selected.

To take an example, I show you the window by choosing "Speed"

What I want to show you is the possibility of modifying the behavior of the particles just by clicking on the line that we want to modify corresponding to its axis (X, YZ) and dragging it to our liking to define how our particles will move in the environment.

Support of material and models from Blender:

If you already know and you develop quickly in Blender you have a point in favor since the editor of PlayCanvas has by default with support to recognize both models and materials of it. Playcanvas can support different formats, some of them are FBX, COLLADA, OBJ, 3DS. As an important fact, the developers recommend us to use FBX, since this is the most robust and tested exchange format.

Collision and Physics

Of course I could not miss one of the most important features when developing games; Physics plays a significant role in the user's interaction with their environment. Those small events unleashed by hitting or throwing an object are those that give a touch of realism and fill the stage with life in a video game.

Ammo.js is a direct port of the Bullet physics engine to JavaScript, using Emscripten. The source code is translated directly to JavaScript, without human rewriting, so functionality should be identical to the original Bullet.

Thanks to a complete integration of PlayCanvas with ammo.js, a 3D physics engine, you can get features such as gravity and attract objects down or if you like you can modify the value of it and define a less gravity environment; We also have rigid bodies where we can assign an object in the scene a weight, friction factor, consult or Apply both linear and angular forces and move objects around or spin them.

In the following video you can see the potential use of this library.

Input peripherals: