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.
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.
Wondering if there's a simple solution for this; I'm rendering some text with a sprite batch and a bitmap font in a libGDX Android project. Text renders fine, but end up with a few subtle grey spots after some letters, which I want to clear up.
A bit more context; I'm loading in a bold comic sans font (for now), generated using Hiero, I've set the minfilter and magfilter of the font's texture to linear. Also, I'm not scaling the font up or down at any point in my code, but may want to later. Here's a screenshot for reference: http://i824.photobucket.com/albums/zz161/9bjames/Screenshot_zpseac8c515.png (you might need to zoom in a bit).
I've looked it up, and found this: BitmapFont rendering artifacts, but I was wondering if there was a quicker fix... or at least one that's less "hacky". For example, would using a distance field font, or custom shaders help any?
Thanks, let me know if ya need any more info to go on. I'll continue looking into it in the meantime.
-Quick edit: found that using default texture filters (nearest) helps with the grey spots, so long as I'm not scaling up. Seems like the quality also drops in general using TextureFilter.Nearest... but it'll do for now, whilst I get more important parts working. Any recommendations would still be appreciated.
I'd like to create a custom map. It should be or look like one picture, but according to the part of which the user clicks, it should move the user to a different location (i.e. start a different activity). I've seen it done in several games but I don't know how to do it myself.
The part of the picture should have non-geometrical borders (obviously it would be easily done with many square images). Sadly, I don't even know what term describes what I want to do so I wasn't able to find any helpful tutorials or discussed topics.
Example:
Picture: http://i236.photobucket.com/albums/ff40/iathen/mapEx.png
If the user touches the purple slide, (s)he should be leaded to activity_1
If the user touches the blue slide, (s)he should be leaded to activity_2
If the user touches the green slide, (s)he should be leaded to activity_3
In my experience there are 2 main (most used) ways to achieve this.
The first (my favorite):
Get the data from a PNG
You should write multiple layers to a canvas. These layers constitute your "zones" (blue, green, purple in the image). To obtain the data of these areas, you get it from PNGs (with transparencies off course) to write the canvas with whatever you want. You must store the values where there can be a tap from the user (non-transparent areas). Notice that this values can be scaled up/down depending on the map size, screen resolution, map dimensions, etc.
Once you've written the layers to the canvas you should check for a match of the user tap and the stored areas you have. You should take into consideration here the order in which the user tap is processed in your code. For instance, in your image, the purple layer is on top so it must be processed first, the blue as second, and the green as the last one. This way you can have an "island" inside a bigger area.
The second way:
Generate the boundaries programmaticaly
I think this solution is self-explanatory. The only I've faced with this variant is that when the surfaces boundaries get messy, it's really complicated to generate the proper equations.
EDIT:
Using the first approach you can employ multiple PNGs to load data or use a single PNG with data coded into the bytes (i.e. RGB values). It's up to you to decide which one to implement.
Hope it helps!
Since a touchscreen itself isn't very accurate, your collision detection for the buttons doesn't need to be either. It would be a waste of time to try to make a complicated collision detection algorithm to detect a touch within those weird shapes.
Since you are making a game, I assume you know how to handle custom touch events, as well as canvas (at least). There are many ways to do what you want, but in the specific example image you linked is kind of a special case.
You could create a giant bounding circle around the three blobs, and then check if the user touched within the bounds of the circle (ie check if the distance from the touch to the center of the circle is less than or equal to the radius). Once you determine that it is, you could check which section of the circle it falls into by splitting it up into 3 equal sections. Requires some math, but shouldn't be that complicated.
It wouldn't be a perfect solution, but it should be good enough. Although, you might have to change the buttons a little so they aren't so stretched out horizontally, otherwise a bounding circle wouldn't be ideal.
Personally, in my games I always have "nodes" that represent the visual elements of the game, such as buttons. Instead of using a large image like you are doing, I would create separate images for each button, and then check their collisions with touch events independently. That way I could have each button check with their own individual bounding circles, or, if absolutely necessary, I could even have custom algorithms for each individual button.
These aren't perfect solutions. If you do want a pixel-perfect solution, you'll need to implement some polygon collision detection algorithms
One thing to consider is screen size and ratio. The only constants you should use are for percentages.
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. =)
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.