Search code examples
javascriptcreatejs

I can't see progress in the browsr when trying to make a game


Hi I'm trying to learn game dev with javascript .... When I ope my html file in my browser, it's blank and this is the error I keep on getting...

createjs-2013.12.12.min.js:13 Uncaught TypeError: f.isVisible is not a functionb.draw
@ createjs-2013.12.12.min.js:13b.update
@ createjs-2013.12.12.min.js:13window.onload @ init.js:25 "

var canvas;
var stage ;
var img = new Image();
var bmpSeq;
var text;


window.onload = function()
{
   canvas = document.getElementById("myCanvas");
   context = canvas.getContext('2d');
   context.canvas.width = 900;
   context.canvas.height = 500;
   stage = new createjs.Stage(canvas);
   text =  new Text("TEXT HERE","36px Ariel","black");
   text.x =100;
   text.y = 200;
   stage.addChild(text);
   
   var circle = new createjs.Shape();
   circle.graphics.beginFill("red").drawCircle(0, 0, 50);
   circle.x = 100;
   circle.y = 100;
   stage.addChild(circle);
   stage.update();
   //img.onload = ImageLoaded;
   //img.src = "assets/dude.png" ;
 
   
}






    
function ImageLoaded(e)
{  
   //stage = new createjs.Stage("canvas");
   var  ss = new createjs.SpriteSheet({
    images : [img],
    frames : {width:32,height:64},
    animations: {
         face : 4,
         walk :  [4,8] }
    });

   //bitmap sequence
   //bmp = new createjs.BitmapAnimation(ss);
   //bmp.regX = bmp.spriteSheet.frameWidth/2|0; //reg pt in the center of the frame
  // bmp.regY = bmp.spriteSheet.frameHeight/2|0;
   //bmp.gotoAndPlay("w_r");
   
   
   //bmp.x = canvas.width/2;
   //bmp.y = canvas.height/2;
   
   stage.addChild(ss); //won't do anything yet
   //stage.update();
   

}
<!DOCTYPE html>
<html>
    <head>
        <title>GAme Trial</title>
        <link href="normalize.css" type="text/css" rel="stylesheet" />
        <script language="javascript" type="text/javascript" src="http://code.createjs.com/createjs-2013.12.12.min.js" ></script>  <!--Getting the Library-->
        <script language="javascript" type="text/javascript" src="init.js" ></script>
    </head>
    <body>
        <canvas id="myCanvas"></canvas> <!--graphical surface in which the game is played-->
    </body>
</html>


Solution

  • You created a new Text() object, instead of the createjs.Text() object.

    Change this

    text =  new Text("TEXT HERE","36px Ariel","black");
    

    to this

    text =  new createjs.Text("TEXT HERE","36px Ariel","black");
    

    And you're good to go. Take care to add createjs. before the objects that were made available by that library.