Porting Unreal Scenes to the Browser with PlayCanvas – Developer Spotlight with Leonidas Maliokas

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 Leonidas Maliokas, a freelance web and games developer for Solar Games.

He will show us how Solar Games ported a metaverse experience from Unreal to PlayCanvas in the video presentation below. Specific areas covered are:

  • Converting scenes and assets from Unreal to PlayCanvas
  • Runtime and load-time optimization
  • Lighting and post processing
  • Multiplayer with Colyseus
  • Ready Player Me avatar integration
  • Spatial-aware audio chat with Agora

Presentation Slides

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

Hey, I’m Leonidas from Solar Games (formerly known as Pirron 1)! I’ve been working with interactive 3D websites since 2012. I used to work as a civil engineer before turning my hobby and passion for gamedev into a full time job using PlayCanvas.

Together with doing PlayCanvas contracts of all sorts, like product configurators, games and promotional sites, I’ve been researching how to extend the PlayCanvas engine and editor. Adding open world terrains, special effects and easy to use networked controllers to match features normally found in native only game engines, led to founding Solar Games.

We offer Uranus Tools for PlayCanvas, a collection of plug and play scripts to supercharge your PlayCanvas creation pipeline. You can find out more about our company’s services at https://solargames.io.

We are also working on Aritelia, a procedurally generated open world social MMO in PlayCanvas. This is still in development but you can already give it a try with the pre-alpha tech demonstration that was released last year.

Why did you choose PlayCanvas? 

It was actually an easy choice for us: by reviewing the mainstream WebGL libraries and platforms, PlayCanvas did stand out for:

  • Offering an integrated editor and publishing solution. Even after all these years, the ability to easily share projects and builds and collaborate with your colleagues in real-time is something unique to PlayCanvas.
  • The PlayCanvas team is very productive and professional in the way it moves the platform forward.
  • The open source PlayCanvas engine provides a very effective and easy to use API.

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

The main challenge was the lack of certain features and tools. For example things that you’d take for granted in a native game engine like a terrain system, post effects, automatic instancing and level of detail were missing.

The good news was that even before the PlayCanvas Editor API was officially released, it has always been possible to extend the PlayCanvas Editor. We were able to write our own editor extensions and quickly make them productive in our development pipeline.

Other developers and companies became interested in our extensions and we started offering them in our company’s asset store.

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

Several concepts like rendering, resource loading, game logic and state management are quite similar. But there are some unique concepts when it comes to web-based experiences that can be challenging. 

In particular, download times, different display sizes and pixel ratios, a broad spectrum of device specs, and also platform and browser compatibility.

Taking into account these factors is mandatory when building a high-quality HTML5 experience.

What are the team’s favorite features of PlayCanvas?

Our 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. Seiously, not only HTML5 devs but also native game devs should give PlayCanvas a try. It’s a great tool to quickly be productive!

Other than that:

  • Asset pipelines like enabling texture compression.
  • The engine API and the constant addition of new features by the PlayCanvas team.
  • The community – many greetings to everybody!

What is on the feature wishlist for PlayCanvas this year? 

  • Having the PlayCanvas WebGPU renderer available to play with.
  • Full support of the new node based shader editor.
  • Asset variants for specific platforms e.g. serve smaller textures on mobile.

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

It’s definitely an exciting time for developers and companies working with HTML5 content. Both the technology has moved forward with standards and frameworks being more robust and powerful than ever, and the devices capable of running HTML5 experiences are very capable.

The metaverse is already leveraging HTML5 to deploy worlds and experiences across traditional web2 and newer web3 websites.

Pixel streaming is the only valid contender when it comes to what HTML5 can offer. I would definitely welcome a feature where pixel streaming is a viable option since it’s a great concept. But right now I don’t see this happening soon.

There are so many opportunities around HTML5 and I see a very positive future for everyone involved.

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

Thank you for this opportunity to showcase our work!

Useful links:

Stay tuned for more Developer Spotlights in the future!

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!