Porting from Unity to PlayCanvas – Developer Spotlight with Christina Kaliora

Welcome to Developer Spotlight! A new series of blog articles where we talk to developers about how they use PlayCanvas and showcase the fantastic work they are doing on the Web.

Today we are excited to be joined by Christina Kaliora, a freelance web and games developer for Solar Games.

She will showing us the how she recently ported the John Lemon’s Haunted Jaunt Unity project to PlayCanvas in the video presentation below covering areas:

  • Exporting the scene from Unity
  • Perfomance concerns
  • Use of shaders and effects
  • And more!

Presentation Slides

Hi Christina, welcome to Developer Spotlight! Tell us about yourself and your studio!

Hello! My name is Christina Kaliora and I’m a Games Programmer. I wrote my first line of code in September of 2016 inside PlayCanvas! I still remember that excitement when I saw my cube rotating! That’s when I said “This is what I wanna do!”.

After that, I started learning more about PlayCanvas and experimenting with other Game Engines, like Unity. Later, I attended an online coding bootcamp about web development, and since then, I work as a freelancer both for Web Development projects and web based games (using PlayCanvas).

Also, together with my husband and some friends we run a company called Solar Games, where we develop tools and projects for PlayCanvas.

Why did you choose PlayCanvas? 

PlayCanvas caught my attention from the very beginning! Some of the main reasons me and my team choose PlayCanvas:

  • PlayCanvas is one of the most powerful web based game engines out there.
  • It is the only web based game engine that has such a powerful and collaborative editor.
  • It has amazing support in the forums and discord and also, a great team to back it up!
  • It has very good performance! 

What were the initial challenges and how did the team overcome them? 

Personally, when I started, I had a very hard time getting a good grasp of PlayCanvas. There weren’t that many tutorial projects back then and since I was pretty much a newbie in coding, I had a very hard time understanding the coding concepts of game development.

What helped me there, was building smaller projects focused on specific areas, for example physics, player movement, raycast, UI, shaders etc. That way, I learned how to work with the API and I was able to start building larger projects/games.

Also, studying the engine’s code is something that any aspiring PlayCanvas developer should get into and helped me personally! Learning the inside and out of the game engine you’re using will help you tremendously!

How is building an HTML5 game/experience different from a native game/experience? 

It is quite different in my opinion. Since things on the web work a bit differently, there are also different things that need to be taken into consideration. For example, loading times and download size are some very important things that web game devs need to pay attention to.

No one wants to wait over 30 seconds for a web page to load, right?

What are the team’s favorite features of PlayCanvas? 

Favorite feature is the editor, by far. The fact that it is collaborative in real time, makes PlayCanvas the best tool for teams to work together. Also, the fact that PlayCanvas has version control integrated, is pretty cool! Something else I would add, is that PlayCanvas provides a very clean API to work with. 

What is on the feature wishlist for PlayCanvas this year? 

Oh, there are so many things, but I will short down my list down to three:

  • More starter templates! 
  • I would love to see the list of post processing effects growing! There isn’t something better than a web based game with nice graphics and effects. It would be great to provide developers with the tools to do so.
  • Better particle editor. We need more VFX artists in PlayCanvas! 

How do you see HTML5 games/experiences evolve over the next few years? 

I think that, since the devices are becoming more and more powerful and with the webGPU on the way, web games will become more and more popular.

Imagine, being able to play your game both on any web browser, phone, tv without the need of downloading and installing anything? It’s mind blowing to me!

And now with all the Metaverse buzz I see that web based experiences are gaining more and more attention. 

Thank you very much for your time and we look forward to your presentation! 

Thank you very much for inviting me! 

Useful links:

Stay tuned for more Developer Spotlights in the future!

Implementing Cloth Simulation in WebGL

The PlayCanvas WebGL game engine integrates with ammo.js – a JavaScript/WebAssembly port of the powerful Bullet physics engine – to enable rigid body physics simulation. We have recently been working out how to extend PlayCanvas’ capabilities by using soft body simulation. The aim is to allow developers to easily set up characters to use soft body dynamics.

Here is an example of a character with and without soft body cloth simulation running in PlayCanvas:

CLICK TO PLAY DEMO

Want to know how it was done? Read on!

Step 1: Create a soft body dynamics world

By default, PlayCanvas’ rigid body component system creates an ammo.js dynamics world that only supports generic rigid bodies. Cloth simulation requires a soft body dynamics world (btSoftRigidDynamicsWorld). Currently, there’s no easy way to override this, so for the purpose of these experiments, a new, parallel soft body dynamics world is created and managed by the application itself. Eventually, we may make the type of the internal dynamics world selectable, or maybe even allow multiple worlds to be created, but for now, this is how the demo was structured.

Step 2: Implement CPU skinning

PlayCanvas performs all skinning on the GPU. However we need skinned positions on CPU to update the soft body anchors (btSoftBody::Anchor) to match the character’s animation. CPU skinning may be supported in future PlayCanvas releases.

Step 3: Patch shaders to support composite simulated and non-simulated mesh rendering

Soft body meshes will generate vertex positions and normal data in world space, so in order to render the dynamically simulated (cloth) parts of character meshes correctly, we have to patch in support by overriding the current PlayCanvas vertex transform shader chunk. In a final implementation, no patching should be necessary, as we would probably add in-built support for composite simulated and non-simulated mesh rendering.

Step 4: Implement render meshes to soft body meshes conversion

PlayCanvas character meshes cannot be used directly by the soft body mesh creation functions (btSoftBodyHelpers::CreateFromTriMesh) and so require some conversion, so the PlayCanvas vertex iterator was used to access and convert the mesh data. Eventually this conversion could be done on asset import into the PlayCanvas editor.

Step 5: Implement per-bone attachments

PlayCanvas currently doesn’t have a way to attach objects to specific character bones via the Editor (it’s on our roadmap for the coming months!). Therefore, per-bone attachments was implemented in order to attach simplified rigid body colliders to different parts of the character to prevent the cloth from intersecting the character mesh. We are using simplified colliders instead of trying to use the full skinned character mesh because it runs much faster.

If you are feeling adventurous, you can find the prototype source code for the example above in this PlayCanvas project:

https://playcanvas.com/project/691109/overview/cloth-simulation-demo

It is a prototype implementation and so expect many changes (some of which are mentioned above) in a final implementation.

Want to try soft body dynamics on your own character? Here’s how:

Step 1: Fork the PlayCanvas prototype project.

Step 2: Mark out what parts of the character you want simulated:

This is done by painting colors into the character mesh vertices – the example character was downloaded from Mixamo, and imported into Blender:

Black = fully simulated, White = not simulated

Step 3: Import the character into the PlayCanvas editor and set up collision: 

On this character, only colliders for the legs and body are needed.

What’s Next

We are really excited about developing this technology in the coming months. We will focus on these areas:

  • Take learnings from the prototype and add good support for soft body dynamics in PlayCanvas
  • Create easy to use tools for PlayCanvas developers to import and setup characters with soft body dynamics
  • Further optimize and improve quality

We would love to get your thoughts and feedback so come join the conversation on the PlayCanvas forum!

Introducing the PlayCanvas Localization System

Are you shipping your PlayCanvas app or game in just one language? You may be preventing international users from enjoying it! Today, we are happy to announce the arrival of a localization system built right into the PlayCanvas Editor!

PlayCanvas-powered Bitmoji Party localized into English, Spanish and French

The system works in tandem with PlayCanvas’ text element component and it’s super-easy to use. The text element interface now provides a ‘Localized’ property and when checked, you can enter a Key instead of a Text string.

New text element properties for enabling localized text

The Key is the string used to look up a localized string based on the user’s currently selected locale. The localized string data is stored in JSON assets and is documented, along with the rest of the system, here. You can even preview your localized User Interface by choosing a locale in the Editor Settings panel:

Locale setting in the Scene Settings panel

We look forward to playing your newly localized games!