I'm currently working on a game with html5/js, using box2dweb for the collision but I'm running into the issue where I am required to scroll the level with the player. Box2d renders directly to the 2d context so I think in it's current state there is no way to shift the render portion of the canvas?
In as3 you could just put everything in a movieclip and change it's position accordingly.
So, is it possible in anyway to have control of a camera of some sorts or the render portion of the canvas object to shift it's 'position' to keep the player centered at all times?
Thanks in advance,
M0rph3v5
Box2D, by itself, doesn't draw anything, it just calculates positions/collisions.
It offers the so-called "Debug Drawing", but it's purpose is... debug.
Anyway you could start from there to add all the needed features.
http://code.google.com/p/box2d/wiki/FAQ
Yeah I figured, turns out I had to use a context.translate right before the debugdraw as well to 'shift' everything. Got it working nicely now.
EDIT:
The code I'm currently using
context.save();
context.translate(-1*xpos+(canvas.width/2),-1*ypos+(canvas.height/2));
context.rotate(cars[carid].angle);
context.drawImage(carSprite, -carspritewidth/2, -carspriteheight/2);
context.restore();
where xpos and ypos are the x and y positions of the car, after that i just draw the actual car sprite at 0,0 (with the carsize divided as the center).
Related
After a detected collision between 2 Rectangles (i used the intersects method), i wish to reposition the Rectangle "player".
I'm working with Flash Develop + Starling.
Use BitmapData intersection, see hitTest.
See code here: http://forum.starling-framework.org/topic/hit-test-ignoring-transparent-pixels
I'm trying to write a simple flash game like Space Invaders. When the ship shoots I check if bullet hits the enemy with simple if like below:
if (bullet.hitTestObject(enemy)) {
var explosion = new Explosion(enemy.x, enemy.y);
stage.addChild(explosion);
explosions.push(explosion);
//Rest of logic like removing bullet and enemy from stage
}
What I expected to see was an Explosion instance appearing somewhere around the coords where bullet hit the enemy and that it would stay in place. Instead explosion seems to be appearing completely elsewhere and is moving in the same direction the enemy was (opposite direction to bullet). It seems that my assumption about successfully getting coordinates in a way presented above isn't right. Is there any other way to get it at least approximately? It doesn't have to be pixel-perfect, but I don't want explosion to appear on the other side of the stage.
Thanks for any suggestions.
It's not about getting the coordinates but having in mind where your children are added.
If the container is moved around, and you add the explosion to other container, the coordinates will mess up - each object has an internal coordinate system starting from 0,0.
Best advise would be to manually understand where's the difference and where are your children added. Common way to fix this is to add all your children at 0,0. This will give you full control and nevertheless an idea of how Flash works.
If you are unable to do so, you can always use globalToLocal and localToGlobal methods that will help you convert those coordinates to a global (Stage) ones, and vise versa.
I'm working on a side scroller, and for the enemy I'm making a turret. I'm trying to make the turret aim at the player but I cant seem to get it right. Below is a rough sketch of what I want to achieve:
I want the barrel (dark blue), to aim/rotate to its pointing at the player.
I have uploaded a YouTube video of my scene:
http://www.youtube.com/watch?v=eeP47VoX9uA&feature=youtu.be
This is what I have so far (loop):
function enterFrameHandler(e : Event) : void{
_turretBarrel.rotation = Math.atan2(enTarget.x, enTarget.y) * 180/Math.PI;
}
What this does is only rotate the barrel when I jump, and the barrel isn't even aiming at the player, also the barrel doesn't change rotation when I walk on the other side of the turret.
My enTarget.x is always central to the stage and the scene (including the turret) moves around the player left and right (x)... Only the enTarget.y moves (jump/high platform).
I'm slightly new to Flash and ActionScript. If anyone could help me out, or point me in the right direction then that would be great.
Thanks
1) Make sure you got the right numbers and the position of the avatar and the turret are in the same coordinate space. A simple trace of each would do. In this case you probably want the world (relative to stage) position of both clips. Make sure they make sense compared to top left corner of the screen (0, 0).
2) Remember that _turretBarrel.rotation is a rotation that ranges from -180 to 180 so this would need to be taken into consideration when calculating angles.
3) Make sure you use the corresponding degrees/radians where appropriate.
4) force focus on avatar, run the game and see if the bounds looks ok. Then do the same thing with the turret.
Another good thing in general for debugging purposes is to setup some kind of debug graphics. i.e. draw a line of what you think is the direction vector to verify your numbers and calculations.
On a side note:
This is what the majority of programming is; Debugging. Assume nothing but hard facts, get your numbers from the debugger (probably quicker), or trace output. If you're still using the horrible flash professional IDE. I would really recommend getting one with a proper debugger like FlashDevelop (free) or Flash Builder (commercial)
Oliver, it looks like you are calculating the tangens of wrong angle (between player and X-axis). You need something like the following:
function enterFrameHandler(e : Event) : void{
_turretBarrel.rotation = Math.atan2(enTarget.x - barrel.x, enTarget.y - barrel.y) * 180/Math.PI;
}
I'm trying to find a clean way to "move the camera" of a canvas element.
This for my prototype game (side scroller). I'd love to think there's a better solution than moving the whole set of nodes to simulate a "camera" moving around.
Am almost certain to have read a simple how-to (using offsets?) but the fact I don't find anything like that starts to raise doubts... have I imagined reading that!?
Thanks to help me clarify...
J
Presumably you redraw your whole game scene 30 times a second (more or less)
You need to redraw your whole game scene but first translate the Canvas context by some offset.
context.translate(x,y) is precisely what you want. You'll want to read up on the use of that as well as the save() and restore() methods.
When you translate the context, everything drawn afterwards is shifted by that amount.
So you constantly draw something (maybe an enemy) at 50,50 using drawImage(badguy,50,50). Then the player moves, which changes the x of translate to -1 (because the player is moving to the right) instead of 0. You still draw the enemy sprite with the command drawImage(badguy,50,50), but when you draw it the enemy shows up as if it were at 49,50 because of the context.translate(-1,0) command shifting everything before its drawn.
Of course when you get into performance you'll want to be making sure that you are only ever drawing things that can actually be seen on the screen! If your are far down the level with context.translate(-2000,0), you dont want to be drawing objects at 50,50 anymore, only ones that intersect the viewable area.
Hi to keep it short and simple let's say I have a stage with 400x400 size in pixels, but I've drawn a map of 1000x1000 size in pixels. I want my player to be able to "walk" about the stage, but it appears stage.x and stage.y are read-only? Is there any method or way to have the stage "scroll" about, without having to move each object on the map?
Don't move the stage, move the 1000x1000 object,then it'll look like the whole thing is moving.
You should see the stage like a window. You can see everything behind it depending on the size of the window. You cannot change the size of the stage, or move it.
Just like a window you can measure the size of the stage. You can use this to navigate for example movieclips across the stage with actionscript.
Why don't you put the map and the other objects in a seperate layer, and move the map around. Other objects (for example a big red dot to tell the user its' location on the map) are on a fixed position on the map. Just move the map following a sort of path according the red dot.
Not entirely sure what you want to do, but it isn't possible to move the stage.
You can put all the movieclips (the player and the map, if you want) in one movieclip, put only that movieclip on the stage and move that.
But if you only want the map to scroll, just move the map around.
The other answers are correct, but there's an alternative to moving the map:
ScrollRect
Attach a rectangle to a your map's scrollRect property. Moving that rectangle will have the same apparent effect as moving the stage around.
There are minor pros and cons to using scrollRect vs. moving the world, but try them both and see which works better for you.