Problems displaying sprites

runeater · May 13, 2017

	//Globals
	var width = 900;
	var height =  700;
	var app= PIXI.autoDetectRenderer(width,height,{backgroundColor : 0x1099bb});
	
	var animationStages = {menu:0, highscores:1, shop:2, options:3,exit:4,play:5};
	var animationStage = animationStages.menu;

	

function start(){
	document.body.appendChild(app.view);
	showMenu();

}


function showMenu(){
	var button0 = PIXI.Sprite.fromImage('Assets/buttons/play.png');
	button0.interactive = true;
	button0.on("mousedown", startPress);
	button0.position.set(50, 100);
	app.stage.addChild(button0);
}

//How I am initiating this (strictly for testing)
<!DOCTYPE HTML>
<html>
	<head>
		<title> Best </title>
		<style> body { margin:0; padding:0; background-color:#FFFFFF} </style>
		<script src = "Scripts/pixi.js"> </script>
		<script src = "Scripts/run.js"></script>
	</head>

	<body>
		<button id="game_test_button" type="button" onclick="startGame()">Game Test</button>
		
		<script> 
			function startGame(){
				var buttonElement = document.getElementById("game_test_button");
				buttonElement.parentNode.removeChild(buttonElement);
				start();
			} 
		</script>

	</body>

<html>

Hi,

I'm trying to make a simple game in pixi, however I have run into a problem the code above doesn't show me a menu like it should when I run it. What am I doing wrong? Any links to applicable information would be appreciated.

EDIT:

Have tried to place my assets folder inside same folder as my run.js script -> still doesnt work

Currently its at the same level as my index.html (which is what my test button is called from)

Also my images are valid.

EDIT2:

Ripped alot of the useless code out to show my problem specifically.

Please help me.

runeater · May 13, 2017

Anyone?

themoonrat · May 13, 2017

There were a couple of errors there.

First, you have a mousedown event that calls 'startPress', but there is no function in your example, so I commented that out.

Second: You were doing app.stage.addChild(button0); - but the .stage only exist if you do a new PIXI.Application, not when you are just creating a renderer, which is what you were doing.

Corrected code looks something like

//Globals
var width = 900;
var height = 700;
var app = new PIXI.Application( { width, height, backgroundColor: 0x1099bb} );

var animationStages = {menu:0, highscores:1, shop:2, options:3, exit:4, play:5};
var animationStage = animationStages.menu;

function start(){
	document.body.appendChild(app.view);
	showMenu();
}

function showMenu(){
	var button0 = PIXI.Sprite.fromImage('Assets/buttons/play.png');
	button0.interactive = true;
	// button0.on("mousedown", startPress);
	button0.position.set(50, 100);
	app.stage.addChild(button0);
}

runeater · May 17, 2017

Thanks for the help!

Sign In

Problems displaying sprites

Recommended Posts

runeater

Link to comment

Share on other sites

runeater

Link to comment

Share on other sites

themoonrat

Link to comment

Share on other sites

runeater

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity