The website states that the engine is open-source. However, i can’t find a way of using it without relying on your online editor or similar crap. What’s the catch? How can i use this engine without strings attached? How can i compile it myself and build my project on top of it? Is it based on NPM?
online editor or similar crap
Wooosh…
Get engine from github.
Build it yourself and use as you want.
If you need models - then write your own model converter or model loader from your formats. Because you don’t want to use any “similar crap” that does a lot of work to simplify development process.
And you can build any game/app as you want, and you don’t need to use “online editor or similar crap” at all, nor use anything on playcanvas.com.
I’m sorry if i sounded harsh, but with all those companies trying to profit on top of the “open-source” buzzword, it’s really difficult to find something really usable, instead of just unusable bits.
I’m afraid you would find only small fraction of open source projects out there, if it would be not for business.
Open Source lives together and alongside of business, and most of the time is a product of business, because someone seen use and social benefit of sharing business effort producing some solution.
And it works backwards too, not for everyone but does for some, where community feels good and appreciated, and contribute back to open source projects.
Have you contributed to projects you’ve been using?
If you are not happy with a project, no one enforces you to use it. Make your own and use it as you wish.
We are small team, trying to make best WebGL Engine and Tools in the industry, and it would not be possible if we would not be able to buy food and pay rent for living.
And by the way, we do not profit from engine-only users, nor we profit from any of our free users. We give all our tools with all functionality for free to the community.
Doesn’t sound any corporate or bureaucratic to me.
3 Likes
If that makes you sleep better at night, who am i to judge you?
The PlayCanvas engine is perfectly usable on its own and various people use just the engine for their applications. Everything you need is on the Github page as @max mentioned where you will also find many engine-only examples.
The part where you currently need to use the PlayCanvas site is to convert FBX models (or other 3d file formats) to the model files that the engine expects. But if you don’t want to do that you can write your own model converter to convert FBX files to JSON, although it won’t be super easy.
Also it’s worth mentioning that our online Editor is built using the open source engine without any modifications, so theoretically that is one of the best examples of things you can do with the engine only.
Worth noting there already exist third party model conversion tools: https://github.com/sdfgeoff/playcanvas-blender-tools
1 Like
As guys already mentioned, while the engine is open source, the editor is proprietary. You came to the wrong neighborhood expecting it all to be open source 
Hi @bbmario - you might wanna check out some codepen’s I wrote using just the open source engine:
Also, some other ‘engine-only’ users might have some views on this? @sdfgeoff perhaps? Happy coding! 
First up, I fully support their being a paid, proprietary service on top of playcanvas. It is this that allows such a great engine to exist in the first place. The thing to realize is that open source does not equal free, it simply means that, well, you can go and look in the source and if you find something not to your liking, you can change it.
That said, I don’t use the online editor. Even if I could download it onto my computer and use it their, I still wouldn’t. Simply put, it doesn’t fit with my workflow.
First off, how do I work? Well, my screen looks like this:
On the left is a web-browser with debug tools open (more often to the javascript console actually, but in this case I was tweaking the HTML of the HUD). On the right is … a text editor!
That’s right, I have no interface when developing a game beyond a text editor. Pretty much the reasoning for this is because I do the same for everything, be it writing conference papers in Latex, developing software for a robot, developing a custom server and so on. The fewer tools I have to learn, the better, and pretty much the only tool I use these days is a text editor.
Most of a game is programming
That is the first thing to realize. If you’re indie-developping a game, you’ll spend most of your time on programming. If you spend a week on art you’ll spend a month on software. A month on art is a year in software. If you look at how most game developers spend their time, it’ll be typing on a keyboard trying to get their homing missile algorithm to stop spazzing out. If you watch a live-stream of ‘game development’ it’ll probably be of the art team.
The advent of visual programming has brought in a false promise. People think it’s easier, but end up with systems like this (Link to a screenshot of someones unreal engine state machine).
If you like visual programming, go implement a PID controller in logic nodes. Then realize that your two screen-fulls of nodes are equivalent to two lines of code.
Getting started engine-only in playcanvas
- Download the engine from github
- Start a local webserver (I use python3’s inbuilt server by running
python -m http.serverfrom a terminal - Look at the examples in the examples folder in the github for how to load objects, move them and interact with them
- Start developing simple examples
- Skim over the API and the help documents. There is a lot of good information there.
You will need to know how to program
You will need to use google to solve weird errors with javascript
You will have firefox freeze on you at least once
You will have fun making a game!
General Game Development Advice
One of the first things to develop is your workflow. What does this mean?
- You have to be able to import models
- You have to be able to assign logic to models
A game engine is just a set of tools to display models and map them to user input. The first things I write in any game engine are:
- The load system to load a model
- A scheduler (So I can run a function at any specified time: every frame, delay a function call by a second etc.)
- The user input handling - converting button presses to action descriptions (eg ‘WKEY’ to ‘forwards’)
- If required, any other tools such as, export pipelines, dynamic lighting managers, content streaming systems, settings systems. Systems to chose and load levels etc. etc.
Then you start developing the actual game, starting with the gameplay itself. Often there is a ‘prototype’ stage before the items above, where you just bash out the gameplay however you can to see if it is worth pursuing.
Simple tests are also a good idea. So instead of jumping in to a full blown loading system that loads a custom level format, try loading a single model.
Object Oriented Programming is a useful way to assign code to objects, but is not always what you want to use. For example, what is a keyboard settings object? Is the score an object? How about fuel? That’s a quantity rather than an object. This is a problem in systems like playcanvas where you assign code to objects. Sometimes just use functional programming rather than OOP.
I tend to use the MVC model, and separate out my model objects from my display objects. That’s why if you look through my projects, you’ll find that my player is not a playcanvas entity, rather it is a javascript object that contains a playcanvas entity. Hence I don’t use the script component available in playcanvas, but use my own scheduler.
8 Likes
I also more than anything in the world right now wish the documentation was geared more towards chrome console friendly examples of how to do things. I would be able to create 10 times more work and be 10 times faster to prototype.
I am trying to use playcanvas without the editor as well because as a web developer I want to be able to build the GUI for my projects with whatever framework I would like whether that is react or vue or jquery or angular or ionic. And for what I want to use it for the interface overlay or html/css GUI is very important and I need to be able to do that outside of the Playcanvas Editor which is far too slow to use for that purpose… I mean how does it handle scss or webpack? … it doesn’t.
And by the way the playcanvas gui is brilliant for set decoration and organising the 3d assets and materials. I just find it rather restricting for game programming when it comes to creating scripts as it is just 10 times faster to organise and create code in sublime or atom or webstorm as sdfgeoff said. Code completion … i miss that a lot.
That’s not really how most developers would use the engine though (at least not historically from what I’ve seen)? Although everything is effectively accessible via pc.app, most would either be using the editor, writing in scripts on a local machine and local server or using something like codepen.
Could you explain more of what you what you are using the console for? Perhaps there is a different solution or maybe there is something that can be explained that makes it easier?
The documentation covers all the individual components/systems. Getting access to them via pc.app requires a little indirection (e.g getting hold of an asset in the registry is pc.app.assets.find, getting hold of script instance on an entity is finding the entity from pc.app.root.findByName and then accessing the script instance directly).
There is a ‘native’ UI (to the engine, not HTML) coming soon judging from the PRs on GitHub. It won’t help you with the Webpack pipeline but it should help make editing UIs easier and similar to what a lot of game developers are used to in other engines and tools.
Can’t help you there much unfortunately. I actually really like the Code Editor in the PlayCanvas toolset. I’m assuming you have a set working environment/plugins that you are used to? Code completion tends to work for me as well. Are there instances where it doesn’t? If so, it’s worth pointing out to the team so they can look into it.
I use the online editor for level design, just started using WebPack and Babel for coding and overlay HTML GUI all the time (normally Mithril for me, but I did an Angular one once).
All of this is totally possible with the stuff there at the moment: I’m launching my game from the editor and WebPack is watching files and compiling as I change stuff.
I’d agree that the PlayCanvas team could make it a lot easier to support modern software development processes with things like ES6, Babel, WebPack. I’ve had to write a series of plugins myself and read a bunch of source code. I understand some of the recent developments improve team collaboration, but I still long for better support for serious development, test support, continuous integration and version control.
I’d just add - that the scene editor is super useful without all of the coding stuff (the code editor is fine as a basic thing, but it’s no VSCode/WebStorm etc). It would be even more useful if there was anyway of asking it to load some custom code and let me (and others) extend it - it would truly embed it in our workflow. At the present time we’re seriously considering building our own scene editor for PC because there are things that we need to add and can’t easily.
2 Likes
@yaustar -
—Chrome Console—
I am using the console to prototype and to figure out how playcanvas works. Most of the work I plan to do will be done in Webstorm or VSCode.
I would like to do the scene set decoration and loading of the 3d models and textures and lighting in playcanvas editor as I think it does a phenomenal job there and then export the scene to the desktop where I will include my GUI as a script in the index.html file to overlay on top of the canvas. The GUI I am planning to develop in VueJS most likely. I also want to make my own events library.
— Offline code—
I like building things the react way with components and am now using vueJS to build apps but who knows what I will want to use in the future, you just cannot easily use frameworks in PC editor… It is extremely painful to use the PC editor to build a good JS framework to handle the GUI side of the app I am building.
Only 50% of my project is going to be Playcanvas. A lot of the code is going to have to be outside of Playcanvas and a lot of it is server side stuff too. I also need the event listeners on the GUI to be able to interact with the 3d entitys in playcanvas and play nicely. So to test this quickly and to ensure that when I build and prototype effectively I need to make sure that I can do it from chrome console and get into that lovely PC.app object to make most of the changes to the models/textures/materials/lighting/camera based on the users input. When I eventually figure out how to manipulate this wonderful Playcanvas world from chrome console to the level that I require then I will be able to start really building my app. So far it has been a slow 6 months … I really wish it was easier to understand but the devs have done a great job so far so i have tried not to complain too much 
—Emulators—
I am also loading my app into emulators to test on iOS and Android. I can’t export my app every 10 minutes to test it when the app is going to eventually be 300mb or more in size. My app is going to be very heavy on the asset side of things.
—Git—
I also really want GIT to be able to track my changes as the project gets more complex and when i find something new out like how to change a material I can GIT commit with a memorable message to find it again months or years later rather than trying to find some saved project or script in the PC editor. GIT is SUPER useful.
— The Docs—
The docs don’t work for me as i mentioned already about Chrome console. I also do not think the docs do a great job of explaining what code will do in the playcavas editor. Or how you can use these code snippets. Please take this as constructive criticism any devs reading this, Playcanvas is awesome, you’re awesome. I hate the api reference docs.
I mean take this as an example “events”:
------------------Doc explanation----------------------
https://developer.playcanvas.com/en/api/pc.events.html
var obj = { };
pc.events.attach(obj);
// subscribe to an event
obj.on(‘hello’, function(str) {
console.log(‘event hello is fired’, str);
});
// fire event
obj.fire(‘hello’, ‘world’);
------------------END Doc explanation----------------------
That example does not tell me anything about how to attach an event to a 3d model or a camera or anything that might actually be useful. Where do I put this code? Do I attach it to the root? How do I do this from Chrome console? How do I get a 3d model to fire an event when the user left clicks, right clicks, drags right, drags up , drags down and so on?
That’s the really important bits but its not in there, you either have to have already learned it or you’re out of luck. So if that’s the case then where do I start learning? There is no logical order to it for a PC newbie and I don’t have time to go through it all and decipher it piece by piece. And yes there are tutorials that cover click events and keyboard events and they are generally excellent but the docs for me are useless with the greatest respect to any devs that might be reading this PC is awesome in many ways but I just find the docs to be very tricky to decipher and for me generally useless. Please do more tutorials or ideally make the docs easier to understand with real world examples that work in Chrome console or at the very least can be plug and played in the Playcanvas editor and used on a simple box model for example.
1 Like
I agree with that. My projects are also only around 50% PC and I refuse to just shove it in an iframe and interface with it, it needs to be more integrated than that.
This stuff is possible (though I’d use legacy scripting for it), in my previous projects I would download framework stuff like mithril.js, lodash or react and stuff it in a script. Then set the script priority. Then as the playcanvas page is simple it’s easy enough to mount the rest of your application on top of it. Or you can just rebuild the playcanvas page etc.
With legacy scripting you can serve the files off your local machine, put them in Git and use a local editor.
My current project is very different as I’ve bothered to do all the WebPack stuff - now I’m npm installing modules and my productivity has gone through the roof. I’m still serving the bundled files off my local machine while debugging and uploading stubs of script definitions to PC editor so I can set attributes etc, but the real code for each entity script is also bundled.
1 Like
That’s pretty understandable concern. Most projects are rarely any near that big so unfortunately your project is one of the ‘outliers’. As a side note, you don’t have to export the project to test on device, you can just use the launch URL and refresh when you make changes or even make tweaks in realtime such as changing sensitivity or moving entities. (Assets that haven’t been changed should be cached so it shouldn’t take that long to refresh).
Quick example: https://blog.playcanvas.com/playcanvas-scripts-2-0/
I think it be worth looking more into the engine code on GitHub. I’ve found quite a few answers to issues that I’ve had by looking at what’s going on under the hood. There are also a few idioms with PlayCanvas that once you ‘get’, makes things easier.
Any code that is shown for the PlayCanvas Editor (such as the tutorials) can be applied/used in the console. There is very, very little that is editor specific. That’s why I’m thinking there is a logic leap missing here.
This I agree with. I’ve written a Python script that uses the REST API that exports (not publish) the project to my machine so I can commit to source control. Again, not ideal as it doesn’t really solve the team issue but it does help keep track of changes for easy diff’ing.
Fair call on the events.
The event system is for custom user events and IIRC, any object that is part of the Playcanvas (the app, components, entities) so they all can fire events and have listeners added.
The mouse up/down/keyboard etc events are only on the mouse, keyboard, gamepad classes that are properties of pc.app (pc.app.mouse, pc.app.keyboard, pc.app.gamepad) IIRC. To know if you have mouse overed/clicked on an object, you have to do some raycasting/picking.
this may be an super old thread, but I wonder if its worth to create an open source scene editor…
If anyone knows something about the used structures for a scene please let me know :x (JSON?)
1 Like