Now, I want to try PlayCanvas without using the editor. Meaning, I want to access it through code. Like it’s says on your GitHub here, I can use the engine with a link to the source engine for PlayCanvas. Is there any documentation or site in which I can learn how to use PlayCanvas without using it in the editor?
UPDATE: I’ve found a site that has some tutorials for using PlayCanvas without Editor. For anyone who’s wondering link to it is right here. But if anyone has any better sites or tutorials, please feel free to reply back with the site’s link(s).
There’s the examples folder https://github.com/playcanvas/engine/tree/master/examples
Note that all the code in tutorials on https://developer.playcanvas.com/en/ will still work with the engine without the editor.
Btw, do you know how to add physics into my game without editor. Also, key controls aren’t working. Do any of you know why? Here’s my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NewGame</title>
<style>
body { margin: 0; padding: 0; }
canvas { width: 100%; height: 100%; }
</style>
</head>
<body>
<script src="https://code.playcanvas.com/playcanvas-stable.min.js"></script>
<canvas id="application-canvas"></canvas>
<script>
//Initialize
var canvas = document.getElementById("application-canvas");
var app = new pc.Application(canvas);
app.start();
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
app.setCanvasResolution(pc.RESOLUTION_AUTO);
//Camera
var camera = new pc.Entity();
camera.addComponent("camera", {
clearColor: new pc.Color(0.0, 1.0, 1.0)
});
app.root.addChild(camera);
camera.setPosition(0, 0, 7);
//Light Entity
var light = new pc.Entity();
light.addComponent('light');
app.root.addChild(light);
light.rotate(45, 0, 0);
app.scene.ambientLight = new pc.Color(0.2, 0.2, 0.2);
//Box Entity
var box = new pc.Entity();
box.addComponent("model", { type: 'box' });
app.root.addChild(box);
box.setPosition(0, 0, 0);
box.setLocalScale(1, 1, 0);
//Box Material
var boxMat = new pc.PhongMaterial();
boxMat.diffuse.set(0, 0.58, 0.86);
boxMat.update();
box.model.model.meshInstances[0].material = boxMat;
//Box Script
var timer = 0;
app.on("initialize", function() {
app.keyboard.on(pc.EVENT_KEYDOWN, this.onKeyDown, this);
});
app.on("update", function (deltaTime) {
timer += deltaTime;
if (app.keyboard.isPressed(pc.KEY_RIGHT)) {
box.translate(5 * deltaTime, 0, 0);
}
});
</script>
</body>
</html>
1 Like
Have you used the browsers debugger to step through the code?
1 Like
It usually ends up saying isPressed is null or something like that.
I have a new problem now. the Physics does work, but collision doesn’t. I tried looking into the console, but there isn’t any apparent error. Here’s my new code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NewGame</title>
<style>
body { margin: 0; padding: 0; }
canvas { width: 100%; height: 100%; }
</style>
</head>
<body>
<!--Engine Source--><script src="https://code.playcanvas.com/playcanvas-latest.js"></script>
<!--Physics Source--><script src="http://code.playcanvas.com/ammo.751ec5f.js"></script>
<canvas id="application-canvas"></canvas>
<script>
//Initialize
var canvas = document.getElementById("application-canvas");
var app = new pc.Application(canvas);
app.start();
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
app.setCanvasResolution(pc.RESOLUTION_AUTO);
app.systems.rigidbody.gravity.set(0, -9.81, 0);
//Camera
var camera = new pc.Entity();
camera.addComponent("camera", {
clearColor: new pc.Color(0.0, 1.0, 1.0)
});
app.root.addChild(camera);
camera.setPosition(0, 0, 7);
//Light Entity
var light = new pc.Entity();
light.addComponent('light');
app.root.addChild(light);
light.rotate(45, 0, 0);
app.scene.ambientLight = new pc.Color(0.2, 0.2, 0.2);
//Player Entity
var player = new pc.Entity();
player.addComponent("model", { type: 'box' });
player.addComponent("rigidbody", {
type: 'dynamic',
restitution: 0.0,
friction: 0.5
});
player.addComponent("collision", {
type: 'box',
halfExtents: new pc.Vec3(0.5, 0.5, 0.32)
});
app.root.addChild(player);
player.setPosition(0, 0, 0);
player.setLocalScale(1, 1, 0);
//Player Material
var playerMat = new pc.StandardMaterial();
playerMat.diffuse.set(0.0, 0.0, 1.0);
playerMat.update();
player.model.model.meshInstances[0].material = playerMat;
//Player Script
//var timer = 0;
//app.on("update", function (deltaTime) {
//timer += deltaTime;
//});
//Ground Entity
var ground = new pc.Entity();
ground.addComponent("model", { type: 'box' });
ground.addComponent("rigidbody", {
type: 'static'
});
ground.addComponent("collision", {
type: 'box',
halfExtents: new pc.Vec3(7.0, 2.0, 0.32)
});
app.root.addChild(ground);
ground.setPosition(0, -3, 0);
ground.setLocalScale(14, 4, 0);
//Ground Material
var groundMat = new pc.StandardMaterial();
groundMat.diffuse.set(0.0, 1.0, 0.0);
groundMat.update();
ground.model.model.meshInstances[0].material = groundMat;
</script>
</body>
</html>
Ah, I forgot in engine only you need to create the input devices. See these examples in github https://github.com/playcanvas/engine/tree/master/examples/input
Do you know what’s wrong with collision, though?
EDIT: Thanks! Now keyboard controls work! But for some reason still, collision isn’t working for me.
EDIT 2: I’ve fixed the collision problem. Just changed the ground’s rigidbody type to kinematic.
Okay, so now I want to know how I can add assets, like sprites into my game. Do I need a link to another script on the PlayCanvas GitHub or something like that?
You need to start digging into the engine source code for something like that. There aren’t any ‘advance’ examples for sprites yet.
Okay. But do you know how to add a 2D screen (AKA Canvas) element & text element?
Partially, there’s a lot of data to setup for the screen and each element (size, anchor, pivot etc).
You also have to create your own font assets (I’m not sure which tool PlayCanvas uses but I believe there’s a free/open source version of it)
@codebon What is the tool being used on the server side to create the font assets? Is it custom by PlayCanvas or something that is off the shelf?
As like the previous answer, you will have to get familiar in navigating the engine source code to really know how to use it without the Editor as there’s a lot being done for you by the Editor tools and pipeline.
Okay.
Ah, here is the font tool that they use to create the font assets: https://github.com/playcanvas/msdfgen
How do I use it?