Phaser P2 Physics Hollow sprite - phaser-framework

I am making a game with Phaser using P2 physics and I want to make a "Hollow" sprite. What I mean is I want a sprite in the shape of a square/rectangle that the player can be inside, so it cant be a solid body. I would also like to make one with a hole in it so the player can move inside. Currently the ways that I can think of of making it are a custom polygon or multiple sprites, Are there simpler ways? and, If I make a custom polygon that has no hole can I avoid a line going through it at the end of the polygon?

Related

Canvas for Rust's Amethyst?

Is there any possibility to draw primitives on some kind of canvas in Amethyst game engine? Let's say I want to draw pixel points, lines, circles etc? I did not find anything straightforward for that, though I admit that my task can be done with a simple texture of black and white pixel, that can be treated as one-pixel sprites. But that doesn't seem to be a right solution.

What is the Godot way to define (and refer) custom rectangle areas?

I'm coming from Phaser + Tiled world, where, if I need some rectangle area in game world (like Player's area, spawning area, and so on) I can just draw rectangle in Tiled and then get it coordinates from Phaser.js and use as I need. And I seem to stuck to do similar things in Godot.
For some of tasks I can use Area2D with rectangle inside and collision events. But it is not always enough.
How can I just define rectangle on screen, and get its coordinates? For Sprite object and for Node2D I cannot get bounding rectangle. I can use Area2D + Rectangle and refer to rectangle's 'extent' property to get width/height, but that seems to be overhead for me - Area2D is used in collision detection.
What can I do in general? And what could be done in Godot for following scenarios?
Camera limits. I have Sprite with background gradient which I scale to needed world size, and I'd like to set camera limits on that Sprite's width/height.
Hero movement limits. Half of world is not accessible for player, so any move to x > MIDDLE shall be denied. I can just setup constant MIDDLE in the code, but I'd like to draw allowed area as rectangle and refer to it coordinates.
Spawn area. Mark some place of world (that could be just point, not rectangle) where new objects shall be created by code.
You could use the Rect2 class in a script to define custom rectangles. You can then use it to check whether it contains a Vector2 or another Rect2.

Erase Pixels From Sprite Cocos2d-JS

I'm getting the feeling this won't be possible, but worth asking anyway I guess.
I have a background sprite and a foreground sprite, both are the same size as the window/view.
As the player sprite moves across the screen I want to delete the pixels it touches to reveal the background sprite.
This is not just for display purposes, I want the gaps the player has drawn or "dug" out of the foreground layer to allow enemies to travel through, or objects to fall into. So hit detection will be needed with the foreground layer.
This is quite complex and maybe Cocos2D-JS is not the best platform to use, if not possible could you recommend another which would be easier to achieve this effect with?
I believe it's possible, but I'm not capable of giving you a proper answer.
All I can say is that you'll most likely have two choices:
a. Make a physics polygonal shape and deform it, then use it as a "filter" to display your terrain image (here's a proof of concept example in another language using box2d).
b. Directly manipulate pixels and use a mask for collision detection (here's pixel-perfect collision detection in cocos2d-js, sadly I've got no info in modifying pixels).

2d tile based game design, how do I draw a map with a viewport?

I've been struggling with this for a while.
Presently, I have a grid of 100 by 100 tiles, which belong to a Map.
The Map implements IDrawable. I call Draw() and it draws itself at 0,0 which is fine.
However, I want to expand this to draw essentially a viewport. The player will be drawn on the screen in the middle, and thus I want to display say, 10 tiles in each direction (rather than the entire map).
I'm having trouble thinking up the architecture for this one. I'm in the mindset that things should draw themselves, ie I say player1.Draw() and it draws itself. This would have worked before, where it drew the player at x,y on the screen, but with a viewport it will no longer know where to draw itself.
So should the viewport be told to draw, and examine every object in the game and draw those which are visible? Should the map tiles be objects that are subjected to this? Or should the viewport intelligently draw the map by coupling both together?
I'd love to know how typical scrolling tile games accomplish this.
If it matters, I'm using XNA
Edit to add: Can you do graphics manipulation such as trying the HTML rendering approach, where you tell things to draw, and they return a graphic of themselves, and then the parent places the graphic in the correct location? I'm thinking, if I had 2 viewports side by side for splitscreen, how would I stop them drawing outside the edges?
Possible design:
There's a 2D "world" that contains object instances.
"Object instance" is a sprite reference + its coordinates in the world.
When you draw scene, you request list of visible objects that exist in given 2D area, THEN you draw them.
With such design world can be very huge.
I'm in the mindset that things should draw themselves, ie I say player1.Draw() and it draws itself.
visible things should draw themselves. Objects outside of viewport are not visible.
, how would I stop them drawing outside the edges?
Not sure about XNA, but OpenGL has "scissors test"/"glViewport" and Direct3D 9 has "SetViewport" method that allows you to use part of the screen/window for rendering. There are also clipplanes and stencil buffer (using stencil for 2D clipping is overkill, though) You could also render to texture then render the texture. There are many ways to deal with this.
So should the viewport be told to draw, and examine every object in the game and draw those which are visible?
For a large world, you shouldn't examine every object, because it will be slow. You should be able to find visible object without testing every one of them. For that you'll need some kind of space partitioning - quad trees (because we are in 2D), k-d trees, etc. This way you should be able to handle few thousands (or even hundreds of thousands) of objects, as long as you don't see them all at once.
Should the map tiles be objects that are subjected to this?
If you keep drawing invisible things, FPS will drop.
and they return a graphic of themselves
For 2D game this may be very slow. Remember KISS principle.
Some basic ideas, not specifically for XNA:
objects draw themselves to a "virtual screen" in world coordinates, they don't draw themselves to the screen directly
drawable objects get a "graphics context" object which offers you a drawing API. The "graphics context" knows about the current viewport bounds and realizes the coordinate transformation from world coordinates to screen coordinates (for every drawing operations). The graphics context also does the direct drawing to the screen (or to a background screen buffer, if you need double buffering).
when you have many objects outside the visible bounds of your viewport, then as a performance optimization, your drawing loop can make a before-hand bounds-check for your objects and test if they are completely outside the visible area. If so, there is no need to let them draw themselves.

How to implement an eraser tool in a simple drawing app?

I have a prototype of a simple drawing application. When the user drags a finger across the screen, I record the points along the way and draw a series of lines between them. In other words, a drawing is a list of “paths” and each path is a list of points to connect. This is easy, it works and it’s efficient.
The problem is I’d like to implement an eraser tool. In a regular bitmap editor the eraser simply erases pixels, but in my drawing there are no pixels to erase – all pixels are created dynamically by stroking the paths. I could do a simple eraser by “drawing” using the background colour, overlaying the already painted paths. But I’d like to draw on a textured background, so that’s a no-go.
How would you do this? (Short of the obvious solution of representing the drawing as a bitmap where the eraser is simple.)
You can't implement an eraser in the traditional sense; what you describe with recording the paths and drawing them dynamically is vector graphics. The concept of an eraser comes from raster graphics (a bitmap, basically). With vector graphics, the user generally selects an item or an area of items to delete.
If you really wanted to do this, you'd basically have to do collision detection between all of the paths in your graphic and the rectangle (or whatever shape) of the eraser. When contact occurs, you'd have to cut the colliding graphic object on either side of the eraser by using the slope of the line(s) in contact with the eraser and the point of intersection.
You could probably find the intersections of your existing paths and the deleted area, split the existing paths up, and create new points at the intersections (which would become start/end points of the newly split paths).
I could do a simple eraser by
“drawing” using the background colour,
overlaying the already painted paths.
But I’d like to draw on a textured
background, so that’s a no-go.
Can't you do an "eraser by drawing" except you don't use a single color but the whole background as color. I mean, for a given path to erase, you take one by one each pixel and color it with the background color of the same pixel cordinates

Resources