-
Sep 27th, 2013, 08:40 PM
#1
Thread Starter
Hyperactive Member
kinetic fails on 2nd sprite
I am trying to make it so i have one sprite moving up and down while one i can move with the left and right arrow...but as soon as i animate the one up and down, the other one becomes unresponsive...here is my code
Code:
// Constants
var Right_Arrow = 39;
var Left_Arrow = 37;
var Up_Arrow = 38;
var Down_Arrow = 40;
//Stage
var stageWidth = 600;
var stageHeight = 450;
var stage = new Kinetic.Stage(
{
container: 'container',
width: stageWidth,
height: stageHeight,
}
);
//Mario
var marioImg = new Image();
marioImg.src = 'spongebobwalk.png';
var marioSteps =
{
step1:
[
{
x: 1,
y: 1,
width: 63,
height: 90 //Why KineticJs need Actual Image Height - 1? Not Sure!!
}
],
step2:
[
{
x: 78,
y: 1,
width: 63,
height: 90
}
],
step3:
[
{
x: 152,
y: 1,
width: 64,
height: 90
}
],
step4:
[
{
x: 226,
y: 1,
width: 69,
height: 90
}
]
};
var spongebobSprite = new Kinetic.Sprite
(
{
x:200,
y:350,
image: marioImg,
animation: 'step1',
animations: marioSteps,
framerate: 7
}
);
marioImg.onload = function()
{
stage.draw();
}
var layer = new Kinetic.Layer();
layer.add(spongebobSprite);
stage.add(layer);
spongebobSprite.start();
spongebobSprite.stop();
var stepCounter = 1;
$(document).ready
(
function()
{
$(document).keydown
(
function(e)
{
switch(e.keyCode)
{
case Up_Arrow:
break;
case Down_Arrow:
break;
case Right_Arrow:
moveSpongebobR();
break;
case Left_Arrow:
moveSpongebobL();
break;
}
}
);
}
);
function moveSpongebobR()
{
console.log("RIGHT");
spongebobSprite.setX(spongebobSprite.getX()+10);
if(stepCounter > 4)
{
stepCounter = 1;
}
var animString = 'step'+stepCounter++;
spongebobSprite.setAnimation(animString);
spongebobSprite.start();
spongebobSprite.stop();
}
function moveSpongebobL()
{
console.log("left");
spongebobSprite.setX(spongebobSprite.getX()-10);
if(stepCounter > 4)
{
stepCounter = 1;
}
var animString = 'step'+stepCounter++;
spongebobSprite.setAnimation(animString);
spongebobSprite.start();
spongebobSprite.stop();
}
// Start Patrick -----
var patrick = new Kinetic.Layer();
var imageObj2 = new Image();
imageObj2.onload = function()
{
var pat = new Kinetic.Image
(
{
x: 75,
y: -225,
image: imageObj2,
width: 75,
height: 75
}
);
patrick.add(pat);
// add spongebob to the stage
stage.add(patrick);
};
imageObj2.src = 'images/patrick.png';
stage.add(patrick);
var amplitude = 75;
var period = 500;
// in ms
var centerY = stage.getWidth() / 2;
var anim = new Kinetic.Animation
(
function(frame)
{
patrick.setY(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerY);
},
patrick
);
anim.start();
Which X do you like better???
Code:
x x \ /
x x \ /
x x \ /
x ><
x x / \
x x / \
x x / \
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|