How to use Convert PNG to Sprite?

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>
1 Like

UPDATE: So I’ve been looking in the PlayCanvas GitHub & found how to get a sprite element. But I keep getting an error that says this._sprite.on is not a function. Here are some screenshots of my code & error.

IMAGE 1 -FILES
m1

IMAGE 2 -star-atlas.json
m2

IMAGE 3 -blue-material.json
m3

IMAGE 4 -star-sprite.json

IMAGE 5 -Console Error

IMAGE 6 -Main Code