Using pixi.js to make a 2D game, when the main player dies (because he hit a fox, a car or something else), I would like to zoom on it. The desire effect in mind is kind of the end of a level in super meat boy.
Check it, it's between 19:20 and 19:22 : http://youtu.be/3VKWn41Bqss?t=19m20s
I have a worldLayer variable that is a DisplayObjectContainer. This layer holds every element of the world, so I'm scaling it, like so, every frame :
this.worldLayer.scale.x += GAME.config.dead_zoom_speed;
this.worldLayer.scale.y += GAME.config.dead_zoom_speed;
Now you imagine that this piece of code zooms in direction of the coordinate (0,0), which is the top left corner of the screen. But of course, I'd like to zoom on the player, which is not is (0,0). It can be anywhere actually.
Zooming in on a specific point would be doable if the DisplayObjectContainer had the anchor property ; but it doesn't. This code for exemple, with another lib than pixi, uses this technique : it modifies the anchor (called origin in this fiddle).
So my conclusion is, for zooming on a specific point, I have to use the position of the worldLayer. So for every frame :
scale the world layer
calculate the position of scaled worldlayer so that the viewport (with a fixed size, right) is centered on the main character.
This last point is where I'm stuck. How would you go and calculate the position ? My mind can't get around it.
With this comes the problem of centering without displaying the outer canvas. For instance, if the main character is near the right edge of the screen, it would not be totally centered on the viewport. But that's kind of another problem.
So I'd like to discuss that with you guys : have you ever had to implement such a feature ? how ? Am I missing something in the pixi.js API ?
Regards,
Related
I am working on a map that is divided into 800x800 150 pixel tiles. These tiles are contained within a jQuery draggable wrapper, which moves the contents of the tiles around inside the parent to achieve a Google Maps style dragging effect. The top left corner is 0,0 and the bottom right is 799x799. I am looking to replicate Google's tiling effect where the user can drag to the left or top of the start point or the right or bottom of the end point and see the tiled (repeated) contents of the DIV in a seamless manner. Using Clone is not an option as it creates duplicates of an already very large (albeit not yet optimised) source which seriously hampered the load times of the page when dragging was performed.
I could best summarise this by saying I need the map itself to have the visual effect and user experience of looping endlessly, but actually only using one instance of the map source. The resulting effect would not be too dissimilar to the repeating background of an image on a page, except with the contents of the map DIV and not an image. When the user drags the map left of anything on the 0 X Axis, it should display X 799, X 798, etc.
I have not had any luck searching for a solution. Is such an effect possible? If so, what would I need to use to achieve it? I am content with simple answers to point me in the right direction; I do not expect somebody to produce a working example that I can cut and paste. Not afraid to research and experiment myself, my problem is I really don't know where to start. I have plenty of experience with Javascript and jQuery but I've never had to do anything quite like this.
I have realy specific question about Canvas handling mouse-events.
I'm working on a isometric game, I have a displayed map with all tiles, and I want know on which one the mouse are.
On a basic isometric map it's easy to transform the position on the screen (blue on the next image) on a map position (orange) with basic affine function (ax+b, with 'a' is width_tile/height_tile and b is the current position of the map view, red line on the image)..
But I have a complication, each tile of the game have a specific elevation (displayed by red arrow on second image). So i can't use a function for each line(y)/column(x) of the map.
On the same technique I'll try to calculate if mouse position are on EACH tile one by one for EACH mouse event (move, click, ..) but I'm afraid for the heavy code : if I have a 100x100 map and I shack the mouse, I'm sure all this test will ruin the client browser..
I realy don't know how can I do it better ?!
Someone have an idea, or a tips to optimize this check ?
I have big horizontal strip image in photoshop which is made of lots of smaller elements. The background is transparent and the strip goes from smaller elements (left) to bigger elements (right). My goal is to make this strip interactive to mouse events.
Each element is some kind of polygonal image which is trimmed left and right and then exported as a png. It is then imported into a canvas.
The problem is that I can put them side by side but since they are not rectangles I need a way to calculate the offset made up by the transparent pixels on each side of each element to make them stick together correctly... I am using KineticJs to get a precise hitarea for each element... So maybe there is a way to do it automatically with kineticjs,or there is some kind of operation I could do using each image data?
My problem illustrated:
Any ideas?
Also I am doing this simply because I would prefer precise mouseOver bounding box on each item (rather than a simple rectangle) and would rather avoid the solution to calculate each offset manually... But maybe that's not worth it?!
Ok, so you have yourself a custom shape you want to use, here is a tutorial for that: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/ , the simplest thing you can do, and even that seems fairly long, is to calculate the bounding lines for that shape. (Two somewhat vertical lines, and two somewhat horizontal lines). Then you test if the right vertical line of shape one crosses with the left vertical line of shape two, if they do, then set the coordinates of the images to be the same coordinate.
http://www.mathopenref.com/coordintersection.html
line1 = ax + b ..... line2 = cx+d //see possible tests
if(...intersection test...){ // or just test if some coordinate is left of some other coordinate
shape2.setX(shape1.getX()+shape1.getWidth()); //account for image width, so they don't overlap
shape2.setY(shape1.getY()) // no need to account for height
}
UPDATE: This is a very rough solution to the workings of the problem. The next step would be to do more fine tuning dependent on each image.
http://jsfiddle.net/9jkr7/15/
If you want precise areas, use an image map. With some clever finagling and a blank image gif you should be able to have the background you want whenever you hover over any particular area of the image map (might require javascript).
The other option I can think of would be to use SVG itself or one of the many libraries in existance to build interactive vector graphics into your page.
You could also write a function that calculates the left most, top most, right most, and bottom most pixel by looking at all of the pixels in the image data. Here's a tutorial on that:
http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/
This may be a math question more than a programming question, but we'll see.
I'm trying to build a simple javascript click tracker that one could add to any website, which will plot its data to a heat map.
The Problem
If I capture the x/y coordinates of a click event on a web page being displayed in a window measuring 1024x768, and try to map that onto a heat map being displayed at 1280x1024 (or any other size), there's a good possibility that the click won't display in the correct location.
If, for example, the content of the web page is centred within a 960px wide div, because the x,y coordinates captured measure from an origin at the top-left corner of the window, the coordinates don't match in physical space.
I could use the difference between the two screen sizes to create an origin in the centre of all screens and measure from there, but then I wind up with the same problem for any content that isn't positioned relative to the centre of the page.
Is there a way to develop a set of absolute coordinates of an element on the page, without knowing the size of the browser window or what's on the page?
I know I could bind the click to the DOM element. That's fine, and I'll probably go that route, but now that I've found this problem, I'm curious as to the possible solution.
jQuery x y document coordinates of DOM object describes a similar problem and has a possible solution. Hopefully that deals with browser behavior correctly.
If that doesn't work, this problem is likely to be tricky to solve. See http://weblogs.asp.net/bleroy/archive/2008/01/29/getting-absolute-coordinates-from-a-dom-element.aspx for how much difficulty Microsoft had in implementing this feature a few years back.
I am converting a room editor I had made in AJAX to Flash where users can move furniture around where they want, but I am running into some issues with the x,y coordinates. With the Javascript/AJAX setup, I recorded the X,Y coordinates of the furniture image, and it worked fine from the top left corner of the image. However, now trying to make it work, and load the same setups into Flash instead of with AJAX, the placement is all off. It appears that X,Y coordinates that are returned to me are from the center of the image instead of from the top left (if I drag something to the top left corner of a "room," it shows X & Y as being half of the width and height).
Any reason why this would be? I as under the impression the X,Y coordinates worked the same in both Javascript and Flash.
I would assume that you are doing all of this with the Flash IDE, because had you loaded this all at runtime with purely code, you would have went out of your way to force these to center by specifying an x and y that is half it's height and width. This all leads me to believe that you have put these into movieclips that you created with a centered registration.
You need to check the x,y of the bitmaps you are using as furniture. Make sure that they are at 0,0 inside their parent movieclips. Then you simply move the parent around. If your bitmaps have negative values of half their width and height as their x and y values, this would center your bitmap in the middle of the MovieClip/Sprite as opposed to having a top-left registration.
If you created a movieclip with centered registration, you do not have to destroy it a make a new one with another registration; Merely open the movieclip and set the bitmap/asset that is inside to a position of X: 0, Y: 0, then leave from inside the movieclip and once on the outside you will have to adjust it accordingly.
Ensure that each object's registration point is at its top left corner, and not at its center.
More information:
Adobe
Flash CS4: The Missing Manual
Would it be reasonable as a work around to simply translate the location using the height and width of the object. For example say a object was 100px by 100px. If you moved it to the top left corner the coordinates would read 50x50y. On import can you simply add half the width and height to the X and Y respectively. On export just subtract half of it. This is assuming of course that the registration point is always in the middle.
This might help:
http://www.oscartrelles.com/archives/dynamic_movieclip_registration_with_as3