Reputation: 3825
I am using Kinetic JS to build a small game in which the cars run on the track. I have used an Image for the Grass but trying to build the road all by myself. My problem is that whenever I run the Project the Black patch of Road Flashes and then Disappears and the grass appears whereas I need the road to be built on grass. Please Help. I have Shared the Fiddle.
http://jsfiddle.net/shivkumarganesh/aKh7V/embedded/result/
I have also mentioned the code below as follows:-
/*
Declaration of Road,Since the Road will be in
both the directions I would be making an algorithm
to get the road on the canvas and
the the car onto it.
*/
function Car(){}
Car.prototype={
x:0,
y:0,
position:0,
driver:0,
booster:true,
positionNext:0,
getPosition : function(){return this.position;},
setPosition : function(position){this.position=position;},
getDriver : function(){return this.driver;},
setDriver : function(driver){this.driver},
getBooster : function(){return this.booster;},
setBooster : function(booster){this.booster=booster;},
getPositionNext : function(){return this.positionNext;},
setPositionNext : function(positionNext){this.positionNext=positionNext;},
drive : function(newPosition){
/*Code to steer the car to the new box. Either Animate or keep Dynamic*/}
};
/*Making the Booster Class with Appropriate Getters and Setters*/
function Booster(){}
Booster.prototype={
position:0,
x:0,
y:0,
getX : function(){return this.x;},
setX : function(x){this.x=x;},
getY : function(){return this.y;},
setY : function(y){this.y=y;},
getPosition : function(){return this.position;},
setPosition : function(position){this.position=position;}
};
/*Road Block Class*/
function Road(){}
Road.prototype={
x:0,
y:0,
bomb:false,
booster:false,
position:0,
getX : function(){return this.x;},
setX : function(x){this.x=x;},
getBomb : function(){return this.bomb;},
setBomb : function(bomb){this.bomb=bomb;},
getBooster : function(){return this.booster;},
setBooster : function(booster){this.booster=booster;},
getPosition : function(){return this.position;},
drawRoadPatch : function(roadLayer,stage){
var rect = new Kinetic.Rect({
x:0,
y:0,
width:100,
height:100,
fill:'black'
});
roadLayer.add(rect);
stage.add(roadLayer);
}
};
/*Grass For Background*/
function Grass(){}
Grass.prototype={
grassImage:'',
grassX:0,
grassY:0,
grassWidth:1000,
grassHeight:500,
getGrassX : function(){return this.grassX;},
setGrassX : function(x){this.grassX=x;},
getGrassY : function(){return this.grassY},
setGrassY : function(y){this.grassY=y},
getWidth : function(){return this.grassWidth;},
setWidth : function(width){this.grassWidth=width;},
getHeight : function(){return this.grassHeight;},
setHeight : function(height){this.grassHeight=height;},
/*Grass Utility Functions*/
drawGrass : function(background,stage,image){
image.onload=function(){
var grass = new Kinetic.Image({
x:this.grassX,
y:this.grassY,
image:image,
width:this.grassWidth,
height:this.grassHeight
});
background.add(grass);
stage.add(background);
}
},
changeBackgroud : function(background,stage,image){
//This can be used to change the backgroud of page
}
};
/*Declaring the Stage*/
var stage = new Kinetic.Stage({
width:1000,
height:500,
container:'container'
});
/*Defining the assets (Images)*/
var backgroundImage = new Image();
var roadImage = new Image();
/*Defining the Layer (Layers)*/
var background = new Kinetic.Layer();
var roadLayer = new Kinetic.Layer();
var backgrass = new Grass();
var road = new Road();
/*Drawing Functions*/
backgrass.drawGrass(background,stage,backgroundImage);
road.drawRoadPatch(roadLayer,stage);
/*Image for Backgroud*/
backgroundImage.src='https://c9.io/shivkumarganesh/kiectcars/workspace/images/grass.jpg';
Just run the above code, you would understand the problem. There is a black flicker which I wat to be on grass as road.
Upvotes: 0
Views: 195
Reputation: 105015
Fixed...
Your backgroundImage was being used in drawGrass() before it was fully loaded by backgroundImage.src.
I moved all your scene setup into a backgroundImage.onload callback function and all is fixed.
Here is reworked code and a Fiddle: http://jsfiddle.net/m1erickson/GyrXr/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="kinetic-v4.3.3.min.js"></script>
<style>
body{ background-color: ivory; }
</style>
<script>
$(function(){
/*Road Block Class*/
function Road(){}
Road.prototype={
x:0,
y:0,
bomb:false,
booster:false,
position:0,
getX : function(){return this.x;},
setX : function(x){this.x=x;},
getBomb : function(){return this.bomb;},
setBomb : function(bomb){this.bomb=bomb;},
getBooster : function(){return this.booster;},
setBooster : function(booster){this.booster=booster;},
getPosition : function(){return this.position;},
drawRoadPatch : function(roadLayer,stage){
var rect = new Kinetic.Rect({
x:0,
y:0,
width:100,
height:100,
fill:'black'
});
roadLayer.add(rect);
stage.add(roadLayer);
}
};
/*Grass For Background*/
function Grass(){}
Grass.prototype={
grassImage:'',
grassX:0,
grassY:0,
grassWidth:1000,
grassHeight:500,
getGrassX : function(){return this.grassX;},
setGrassX : function(x){this.grassX=x;},
getGrassY : function(){return this.grassY},
setGrassY : function(y){this.grassY=y},
getWidth : function(){return this.grassWidth;},
setWidth : function(width){this.grassWidth=width;},
getHeight : function(){return this.grassHeight;},
setHeight : function(height){this.grassHeight=height;},
/*Grass Utility Functions*/
drawGrass : function(background,stage,image){
var grass = new Kinetic.Image({
x:this.grassX,
y:this.grassY,
image:image,
width:this.grassWidth,
height:this.grassHeight
});
background.add(grass);
stage.add(background);
},
changeBackgroud : function(background,stage,image){
//This can be used to change the backgroud of page
}
};
/*Declaring the Stage*/
var stage = new Kinetic.Stage({
width:1000,
height:500,
container:'container'
});
/*Defining the assets (Images)*/
// after waiting for the backgroundImage to load...!
var backgroundImage = new Image();
backgroundImage.onload=function(){
var roadImage = new Image();
/*Defining the Layer (Layers)*/
var background = new Kinetic.Layer();
var roadLayer = new Kinetic.Layer();
var backgrass = new Grass();
var road = new Road();
/*Drawing Functions*/
backgrass.drawGrass(background,stage,backgroundImage);
road.drawRoadPatch(roadLayer,stage);
}
backgroundImage.src='http://c9.io/shivkumarganesh/kiectcars/workspace/images/grass.jpg';
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
Upvotes: 1