I'm using AndEngine, and within that framework, I'd like to make a circular timer graphic. Specifically, I'd like to display the wait period for reuse of an ability. The idea is to dynamically fill the arc as the timer progresses. Something like this:
The java.awt.Graphics object has a fillArc() method that seems perfect for me. In fact, the above graphic was drawn using fillArc(50,5,100,100,75,-40). Great! Now here's the problem:
AndEngine doesn't use Graphics() objects, it uses its own Shape implementation (for OpenGL) and there's no defined "Circle" shape, much less a circle shape with a fillArc() method.
Possible Solutions and Their Respective Problems
Looking around for a solution I ran into "Drawing a circle using Andengine". That Q&A is not of much use to me as the only answer "Indeed, you can't directly draw a circle" offers two alternatives: (1) "Rendering a quad with a circle texture" - this won't work for me as I need to dynamically modify the circle to produce the arcfill; and (2) "Rendering a circle that's actually a circle of connected triangles." Maybe option two would work, but there's no guidance there as to how to do that.
I also ran into "Creating circle in android andengine by box2d?". I suspect someone may be tempted to say, you can simply create a circle like this:
Body circleBody = PhysicsFactory.createCircleBody(pWorld, pSprite,
BodyType.StaticBody, FixtureDef);
That really doesn't help me. I'm not looking to create a 2D physics body of a circle. I'm looking to display one.
Finally, I found this discussion, which is promising. In particular, there's a suggestion:
Use Canvas to draw [it] into a Bitmap, and load that Bitmap as a TextureSource.
Sounds reasonable, although I'm still unclear how to do that.
Update: My Cheating "Solution"
Rather than dwell on this, I decided to cheat (for the moment at least). I made a spritesheet that looks like this:
Rather than actually have the timer display the perfect fillArc(), I just pull the appropriate index of the sprite from the spritesheet based on rounding the proportion done (from 0 to 1) to the appropriate index on the spritesheet. Like this:
public void setTimer(float amount) {
this.setCurrentTileIndex(Math.round(amount * 20));
}
For my purposes, this actually works just fine--I'm using the timers over about 2 seconds, so you really don't see the lack of detail. But maybe I'll get around to replacing this with the "proper" solution if someone posts it. Also, maybe this spritesheet will be useful for someone doing the same thing. Here's the version using transparency instead of a green background. (So it's white on the white background of stackoverflow, but it's there):
There is a third solution that requires a single texture and a custom object. So it's a trade off between your solutions, where one requires a lot of triangles and the other one a texture memory.
You need only one image, i.e. the full circle in your "cheat sequence" above.
Create a custom object consisting of 8 triangles (one 'fully drawn' triangle will represent 45° each).
The progress determines:
How many of the triangles to draw. I.e.:
100% ==> 360° ==> 8 full triangles
50% ==> 180° ==> 4 full triangles
37.5% ==> 135° ==> 3 full triangles
25% ==> 90° ==> 2 full triangles
20% ==> 72° ==> 1 full triangle and one triangle with one vertex moved so that it represents the remaining 27° (== 72° - 45°).
If you ask me this is the coolest solution, since it can be applied to any texture. =)
Related
I am drawing some dots to represent players of two teams on a map.
Each team has its own colour.
Important to note that the dot contains two circles, outer border and a inner fill so there will be two colours, with the border always being the same.
It makes sense for me to generate this at runtime rather than packing a texture for each combination.
Upon research, there seems to many ways to achieve this but each has a associated problem
ShapeRenderer
ShapeRenderer is for debugging purposes and should not be used for usual drawing as stated by a LibGdx developer here
http://badlogicgames.com/forum/viewtopic.php?t=8573&p=38930
For this reason I avoided using this
Pixmap
This was very promising, I liked the idea that I could just generate two textures and re-use them for each sprite. The biggest problem with this is that Textures made via Pixmap are un-managed so if the OpenGL context is lost and regained (This can be easily reproduced in an Android application, if the user backgrounds the app and restores it from foreground). I am primarily targetting Android so this an issue for me
Texture Re-Colour
Was thinking I could create a grey scale dot and re-colour it but since my asset has two parts to it, I am not sure how I could selectively choose the inner circle and fill it.
Question 1 How Do I Restore Pixmap Texture On Context Loss?
I have not found an example which details how to do this? I assume it is going to be done in the resume lifecycle callback but what do I need to do?
Question 2 Alternative Way?
Is there an alternative way for my issue perhaps?
Thanks for reading!
Load just one texture with white circle. Use SpriteBatch to draw players: first call batch.setColor(borderColor) and draw the circle Texture with outer radius, then call batch.setColor(fillColor) and draw it with inner radius. Sure there is a some performance impact because of drawing fill part twice, but if circles are small enough the impact is going to be negligible.
Does anybody know any solution for anti-aliasing problem at cocos2dx?
DrawNode
I can use standart DrawNode class and draw cardinal splines, which will be transformed to a set of polygons. Something like this:
node = DrawNode::create(9);
node->clear();
node->drawCardinalSpline(pts, tension, segments, Color4F::RED);
for (int i = 0; i < pts->count(); ++i) {
node->drawPoint(pts->getControlPointAtIndex(i), 10, Color4F::BLUE);
}
this picture has folowing artefacts:
stepped curve borders (aliasing)
some cutted holes inside line. (WTF?)
I tried :
varry segment number (at screenshot - tension = 0, segments = 120), but this didn't help.
Tried to draw it at huge size and then use scaling - didn't work.
Take a bitmap with RenderTexture and set anti aliasing flag on the resulted sprite - no.
smoothstep shader (many times mentioned at forum, for example, see here)
All of this lead to elumination of only small fraction of all the artifacts.
Drawing with triangles
I can draw all the things directly by calculating triangles verticies. I has a working solution with this. It looks like this:
Look at the curved line. (screen captured from android device). In order to make this, I used custom DrawNode, because I can't set different opacity for different triangle vertex. My class AlphaNode for that:
AlphaNode.h
AlphaNode.cpp
And then I just fill the Vec2 array of vertices and for every 3 vertices call drawTriangle from my AlphaNode class. At this approach I get antialiasing by manually set alpha to 0 on borderline vertices:
I think I explain the idea clear (but if not I could make separate compilable solution with all the needed code a little bit latter).
This solutions definitely allow me to obtain any graphics I want. But do I really need engine, if I draw triangles by myself?
(and also if anyone have something to say about my custom draw node limitations, please - say)
LibSkia
Well. I can link to libskia on android. Make some path objects on skia side (skia will make them anti-aliased). Then export it to bitmap. Then draw with cocos. But again.. why do I need cocos in that case?
I will try to search for another way. I will be very happy from every piece of help. And I really think its an important feature for 2-3 d engine - ability to draw lines... How do you solved this issue for your project? How do you draw curves?
P.S. Link to question at cocos-forum with similar links.
Am trying to break image in shattered pieces, but am unable to catch the logic, please give me way how to achieve.
I hope the below image can give my idea, what I want, Breaking the bitmap into a shattered pieces like triangle or any shape. later i will shuffle those bitmap shapes and giving puzzle to enduser rearrange them in order.
OK, if you want to rearrange the pieces (like in a jigsaw) then each triangle/polygon will have to appear in a rectangular bitmap with a transparent background, because that's how drawing bitmaps works in Java/Android (and most other environments).
There is a way to do this sort of masking in Android, its called porter-duff compositing. The Android documentation is poor to non-existent, but there are many articles on its use in Java.
Basically you create a rectangular transparent bitmap just large enough to hold your cut-out. Then you draw onto this bitmap a filled triangle (with transparency non-zero) representing the cut-out. It can be any colour you like. Then draw the cutout on top of the source image at the correct location using the Porter-Duff mode which copies the transparency data but not the RGB data. You will be left with your cutout against a transparent background.
This is much easier if you make the cutout bitmap the same size as the source image. I would recommend getting this working first. The downsides of this are twofold. Firstly you will be moving around large bitmaps to move around small cutouts, so the UI will be slower. Secondly you will use a lot of memory for bitmaps, and on some versions of Android you may well run out of memory.
But once you have it working for bitmaps the same size as the source image, it should be pretty straightforward to change it to work for smaller bitmaps. Most of your "mucking about" will be in finding and using the correct Porter-Duff mode. As there are only 16 of them, its no great effort to try them all and see what they do. And they may suggest other puzzle ideas.
I note your cutout sections are all polygons. With only a tiny amount of extra complexity, you could make them any shape you like, including looking like regular jigsaw pieces. To do this, use the Path class to define the shapes used for cutouts. The Path class works fine with Porter-Duff compositing, allowing cutouts of almost any shape you can imagine. I use this extensively in one of my apps.
I am not sure what puzzle game you are trying to make, but if there is no special requirements of the shattered pieces,
only the total number of them which can span the whole rectangle, you may try doing the following steps,
the idea is basically by knowing that n non-intersecting lines with two end points lie on any of the 4 edges of the rectangle, n+1 disjoint areas is formed.
Create an array and store the line information
For n times, you randomly pick two end points which lie on those 4 edges of the rectangle
2a. Try to join these two points: start from either end point, if you get an intersection with another line you drew before, stop at the intersection, otherwise stop at the other end point
You will get n+1 disjoint areas with n lines drawn
You may constrain your lines choosing if you have some special requirements of the areas.
For implementation details, you may want to have a look of dot product and euler's theorem
I'm trying to create a jigsaw puzzle app for Android. I am fairly far into the coding, and I am kind of stuck with one issue.
I need a way to change a Bitmap into a bunch of puzzle pieces. My current code simply cuts the image into rectangles, and it works pretty well, but now I need a way to create more complex piece shapes.
I had a couple of ideas:
Use a separate bitmap file that contains only black and white pixels, and use that to cut up the picture. I thought this was a pretty good plan, until I went to code it. I really had no idea how to do it.
Use a Path object to create the border. This would probably work, except I'm not sure how to keep track of the sides so that the pieces connect with each other.
Any ideas? I'm open to any suggestions.
You can use Path and/or Region to set a clip for your Canvas when drawing a Bitmap.
Take a look at this example. Here are some ways of clipping your drawing to any shape.
You could try making squares or rectangles fitted inside complex figures that can still be pieced toguether, when there's a match, the full rectangle covers the space. Imagine it like a 9 patch, when two sides match, you show the border rectangle.
This is not a explicit solution but I wonder if it would be possible to use bezier curves or paths to create lines along x and y , in conjunction with a parameter(fed with random value) to control the amount of deviation from a straight line and how much in a given distance ie; pixels/ per inch - this would be to create tongues on the pieces. Then use Region to extract the resulting shape at a given side of an intersection. Have the shape object get its center xy coordinate at instantiation and make it so that piece cannot be set if its current coordinate does not match the one it had when it was created.
I started using andEngine yesterday but I'm pretty confused.. I want to make a custom character for each player, so i want to make a database inside the app in Assets/gfx and if for example the player chose a different eyes or nose, the character will change. Is there any way to build something like this without making different sprites and setting up the positions and all of that. (there are some games on the computer that does what i want to do with my app like maplestory, LaTale, Gust online, etc.)
Thanks!
I am not sure it is done this way (I never had a game where I used it, nor tried it), but here is an idea that came to my mind now:
Lets say we have a game with character appearance editing like maplestory. To make it simple, a character is just a circle, or a 2d ball, and you can change it's color and it's eyes color. So you have these folders:
assets/gfx/circles
And
assets/gfx/eyes
Now, lets say we have this circle:
And we have these eyes:
And we want to combine them.
You could do it:
BitmapTextureAtlas playerTextureAtlas = new BitmapTextureAtlas(256, 256 TextureOptions.BILINEAR_PREMULTIPLYALPHA);
TextureRegion playerTextureRegion = BitmapTextureAtlasTextureRegionFactory.createFromAsset(playerTextureAtlas, this, "circles/redcircle.png", 0, 0);
//By executing the next line, we place the eyes over the player texture area.
//There is NO need to keep a reference to the texture region this returns to us, because technically this one and playerTextureRegion are THE SAME - they both hold the same region in the texture (As long as they have the same sizes, of course)
BitmapTextureAtlasTextureRegionFactory.createFromAsset(playerTextureAtlas, this, "eyes/yelloweyes.png", 0, 0);
Remember - the eyes image background has to be transperant so it won't override the circle! Play around with the TextureOptions parameter. I'm not sure if the one I used will fill this purpose - maybe another one will.
And lastly, you should keep the eyes eyes and circles the same size, since this way it is easier to test whether they fit. If you make the eyes just be a small rectangle, you will have to mess with it untill you find the place where you should position it over the circle. Waste of time...
Now, you can just load different bodies/eyes/hairs and so on, place them, and you got a customized player!
I am afraid Jong's solution won't work, at least not in GLES1 version of AndEngine. When I tried to combine sprites this way, the latest one just overwrote anything that was under it. In this case, only the eyes would appear on the screen.