Continuing the discussion from How to use PlayCanvas without the Editor?:
I’ve been working on this game that uses Playcanvase engine only. I want to know if there’s a way to convert PNG to Texture Atlas, then Sprite. Here’s my current code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PolyGame</title>
<style>
body { margin: 0; overflow: hidden; padding: 0; background-color: rgb(255, 255, 255); }
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, 13);
//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);
//Level
var level = new pc.Entity();
level.setPosition(0, 0, 0);
app.root.addChild(level);
level.enabled = true; //Check if Level is enabled.
//Player Entity
var player = new pc.Entity();
player.addComponent("model", { type: 'box' });
player.addComponent("rigidbody", {
type: 'dynamic',
restitution: 0.0,
friction: 0.5,
angularFactor: new pc.Vec3(0, 0, 0),
});
player.addComponent("collision", {
type: 'box',
halfExtents: new pc.Vec3(0.5, 0.5, 0.32)
});
app.root.addChild(player);
player.setPosition(0, 10, 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;
var keyboard = new pc.Keyboard(document.body);
app.on("update", function (deltaTime) {
timer += deltaTime;
var speed = 600;
var jforce = 45;
if (level.enabled === false) {
player.enabled = false;
}
if (keyboard.isPressed(pc.KEY_LEFT)) {
player.rigidbody.applyForce(-speed * deltaTime, 0, 0);
}
if (keyboard.isPressed(pc.KEY_RIGHT)) {
player.rigidbody.applyForce(speed * deltaTime, 0, 0);
}
if (keyboard.wasPressed(pc.KEY_UP)) {
player.rigidbody.applyImpulse(0, jforce * deltaTime, 0);
}
if (keyboard.wasPressed(pc.KEY_R)) {
player.rigidbody.teleport(0, 0, 0);
player.linearVelocity = new pc.Vec3(0, 0, 0);
player.angularVelocity = new pc.Vec3(0, 0, 0);
}
});
//Ground Entity
var ground = new pc.Entity();
ground.addComponent("model", { type: 'box' });
ground.addComponent("rigidbody", {
type: 'kinematic',
restitution: 0.0,
friction: 0.5,
});
ground.addComponent("collision", {
type: 'box',
halfExtents: new pc.Vec3(50, 2.0, 0.32)
});
app.root.addChild(ground);
ground.setPosition(0, -3, 0);
ground.setLocalScale(100, 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;
//Ground Script
var timer = 0;
var keyboard = new pc.Keyboard(document.body);
app.on("update", function (deltaTime) {
timer += deltaTime;
if (level.enabled === false) {
ground.enabled = false;
}
});
//New Scene -- Change name for new scene here
</script>
</body>
</html>