javascript - Background Image not appearing in canvas -
i'm trying follow along tutorial build small game in javascript using libraries i'm trying type out myself instead of copy/paste etc in order learn more effectively, whilst changing aspects. i'm trying add background image canvas when run see blank white screen. i'm not sure if i'm being stupid , missing simple syntax or if it's more complicated. here html , js file. have png image in assets folder called 'background'.
html
<!doctype html> <html> <head> <title>1812 shooter game</title> <link href="normalize.css" type="text/css" rel="stylesheet" /> <!-- game file --> <script language="javascript" type="text/javascript" src="game.js" /> <!-- cdn createjs library --> <script language="javascript" type="text/javascript" src="https://code.createjs.com/createjs-2015.11.26.min.js" /> </head> <body> <canvas id="gamecanvas"></canvas> </body> </html>
game.js
var context; var queue; var width = 3072; var height = 1536; var mousexposition; var mouseyposition; var batimage; var stage; var animation; var deathanimation; var spritesheet; var enemyxpos=100; var enemyypos=100; var enemyxspeed = 1.5; var enemyyspeed = 1.75; var score = 0; var scoretext; var gametimer; var gametime = 0; var timertext; window.onload = function() { // set canvas size , height var canvas = document.getelementbyid('gamecanvas'); context = canvas.getcontext('2d'); context.canvas.width = width; context.canvas.height = height; stage = new createjs.stage("gamecanvas"); //set asset queue , load sounds queue = new createjs.loadqueue(false); queue.installplugin(createjs.sound); queue.on("complete", queueloaded, this); createjs.sound.alternateextensions = ["ogg"]; //create load manifest assets queue.loadmanifest([ { id: 'backgroundimage', src: 'assets/background.png'}, //{id: 'crosshair', src: 'assets/crosshair.png'}, //{id: 'shot', src: 'assets/shot.mp3'}, //{id: 'background', src: 'assets/countryside.mp3'}, //{id: 'gameoversound', src: 'assets/gameover.mp3'}, //{id: 'tick', src: 'assets/tick.mp3'}, //{id: 'deathsound', src: 'assets/die.mp3'}, //{id: 'batspritesheet', src: 'assets/batspritesheet.png'}, //{id: 'batdeath', src: 'assets/batdeath.png'}, ]); queue.load(); //create timer updates once per second gametimer = setinterval(updatetime, 1000); } function queueloaded(event) { // add background image var backgroundimage = new createjs.bitmap(queue.getresult("backgroundimage")) stage.addchild(backgroundimage); }
remember update stage time content changes.
var backgroundimage = new createjs.bitmap(queue.getresult("backgroundimage")) stage.addchild(backgroundimage); stage.update();
you didn't post updatetime
method, not sure if updates stage you. in game/app changing, there constant stage update:
createjs.ticker.on("tick", stage); // or createjs.ticker.on("tick", handletick); function handletick(event) { stage.update(event); }
Comments
Post a Comment