I've seen this question asked many times here already, but no replies to those posts helped me out: I'm trying to load a Sprite using the PixiJS engine, but it's not showing up despite it being recognised and loggable using console.log(). What am I doing wrong?
I've followed the tutorial from this URL:
https://github.com/kittykatattack/learningPixi#introduction
My code is as follows:
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TITLE HERE</title>
<link rel='stylesheet' type='text/css' href='style/style.css'>'
<script src="js/pixi.min.js"></script>
<script src="js/init.js"></script>
</head>
<body>
<script>
init();
</script>
</body>
</html>
init.js
var sprites = {};
var stage = new PIXI.Container();
var renderer;
function init(){
createCanvas(288, 288, true);
}
function createCanvas(width, height, autoResize){
//Create the renderer
renderer = PIXI.autoDetectRenderer(width, height);
renderer.autoResize = autoResize;
renderer.view.setAttribute("id", "canvas");
//Add the canvas to the HTML document
document.body.appendChild(renderer.view);
newSprite("assets/tilesheet.png", "tilesheet");
}
function newSprite(src, name){
var texture = PIXI.Texture.fromImage(src);
var sprite = new PIXI.Sprite(texture);
sprites[name] = sprite;
stage.addChild(sprites["tilesheet"]);
renderer.render(stage);
}
And just in case
style.css
body{
background-color: #a9a9a9;
}
#canvas{
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: auto;
display: block;
position: absolute;
box-shadow: 0.5em 0.5em 0 0 #777;
}
/* <TABLET> */
@media (min-width: 61.5rem){
#canvas{
width: 25em;
height: 25em;
box-shadow: 1em 1em 0 0 #777;
}
}
/* <DESKTOP/TV> */
@media (min-width: 80.0rem){
}
This is my folder layout:
Project
|-assets
| \-tilesheet.png
|-js
| |-init.js
| \-pixi.min.js
|-style
| \-style.css
|-index.html
I hope someone can help me out.
UPDATE
The code now works as it should. Based on feedback by themoonrat (accepted answer), the code now looks like this:
var sprites = {};
var masks = {};
var stageWidth = 288;
var stageHeight = 288;
var spriteWidth = 32;
var spriteHeight = 32;
var gridWidth = stageWidth/spriteWidth;
var gridHeight = stageHeight/spriteHeight;
var stage = new PIXI.Container();
var renderer = PIXI.autoDetectRenderer(stageWidth, stageHeight);
function init(){
renderer.view.setAttribute("id", "canvas");
document.body.appendChild(renderer.view);
for(var x = 0; x < gridWidth; x++){
for(var y = 0; y < gridHeight; y++){
newSprite('assets/tilesheet.png', 'tilesheet'+(x+y), x*spriteWidth, y*spriteHeight);
}
}
sprites['tilesheet2'].position.x = 32;
sprites['tilesheet2'].position.y = -32;
console.log(sprites);
// start updating
update();
}
function newSprite(src, name, x, y){
var texture = PIXI.Texture.fromImage(src);
var sprite = new PIXI.Sprite(texture);
sprite.anchor.x = 0;
sprite.anchor.y = 0;
sprite.position.x = x;
sprite.position.y = y;
sprites[name] = sprite;
stage.addChild(sprite);
}
function update() {
requestAnimationFrame(update);
renderer.render(stage);
}
The main difference is the inclusion of the update() function. Where, as themoonrat suggested, the requestAnimationFrame() is situated
You are only rendering the screen once, and the manner in which you are using pixi is to let pixi request to load the image rather than supplying a preloaded image.
So the point at which you render, just after creating the sprite, the request to load the image has only just occurred. Pixi can't render a sprite with a texture that hasn't finished loading.
If you put the render part within a contently called requestAnimationFrame , then the image would be rendered as soon as it had loaded.