public render(){
...
while (y < Height){
while(x < Width){
batch.draw(bg,x,y,bg.getWidth()/ratio,bg.getHeight()/ratio);
x += bg.getWidth()/ratio;
}
y += bg.getHeight()/ratio;
x = 0;
}
...
}
I have a pattern texture(bg) which will repeat to make a repeated background, so i make it repeated in render function (code above). At first it works very well, but when the ratio get bigger (so the sprite get smaller to fit the background), it become very laggy. Can you tell me a right way to make repeated background like above code without affect performance.
I'm guessing it gets laggy because you are drawing hundreds of quads to the screen, and if there are too many, it will become a CPU bottleneck and reduce frame rate. But the other answer might actually be the reason: if you are shrinking a texture significantly without using mip mapping, it will really eat up GPU time.
Since this is just a repeating texture, you only need to draw one quad for the whole screen. First, when you load the texture, make sure it repeats:
bg.setWrap(TextureWrap.Repeat, TextureWrap.Repeat);
//call this only one time, after you instantiate the Texture
Then you can draw a single quad to the screen and set the UV's of the vertices big enough for the number of times you want it to tile.
// bottom left corner...wherever you want to put it.
float bottomY = 0;
float leftX = 0;
//width and height of background. This is just an example. By the way, Java
//convention is for all variable names to start with a lower-case letter,
//to avoid confusion.
float width = screenWidth;
float height= screenHeight;
//I'm using RATIO like you are, which I think is the reciprocal of how much
//you want to scale the texture up. By the way, it is convention to make
//constant variable (static final primitives in Java) names be in all caps.
float uRight = width * RATIO / bg.getWidth();
float vTop= height * RATIO / bg.getHeight();
batch.draw(bg, leftX, bottomY, width, height, 0, 0, uRight, vTop);
There are a few things that could be causing the lag. The biggest one is the fact that your background image is probably a large resolution that you are drawing many times just at a smaller width and height. I would say look into mipmaps and take a look at this tutorial http://www.badlogicgames.com/wordpress/?p=1403
Related
I am trying to program a visualisation for the Mandelbrot set in java, and there are a couple of things that I am struggling with to program. I realize that questions around this topic have been asked a lot and there is a lot of documentation online but a lot of things seem very complicated and I am relatively new to programming.
The first issue
The first issue I have is to do with zooming in on the fractal. My goal is to make an "infinite" zoom on the fractal (of course not infinite, as far as a regular computer allows it regarding calculation time and precision). The approach I am currently going for is the following on a timer:
Draw the set using some number of iterations on the range (-2, 2) on the real axis and (2, 2) on the imaginary axis.
Change those ranges to zoom in.
Redraw that section of the set with the number of iterations.
It's the second step that I struggle with. This is my current code:
for (int Py = beginY; Py < endY; Py++) {
for (int Px = beginX; Px < endX; Px++) {
double x0 = map(Px, 0, height,-2, 2);
double y0 = map(Py, 0, width, -2, 2);
Px and Py are the coordinates of the pixels in the image. The image is 1000x1000. The map funtion takes a number, in this case Px or Py, with a range of (0, 1000) and devides it evenly over the range (-2, 2), so it returns the corresponding value in that range.
I think that in order to zoom in, I'll have to change the -2 and 2 values by some way in the timer, but whatever I try, it doesn't seem to work. The zoom always ends up slowing down after a while or it will end up zooming in on a part of the set that is in the set, so not the borders. I tried multiplying them by some scale factor every timer tick, but that doesn't really produce the result I was looking for.
Now I have two questions about this issue.
Is this the right approach to visualizing the set and zooming in(draw, change range, redraw)?
If it is, how do I zoom in properly on an area that is interesting and that will keep zooming in properly even after running for a minute?
The second issue
Of course when visualizing something, you need to get some actual visual thing. In this case I want to color the set in a way similar to what you see here: (https://upload.wikimedia.org/wikipedia/commons/f/fc/Mandel_zoom_08_satellite_antenna.jpg).
My guess is that you have use the amount of iterations a pixel went through to before breaking out of the loop to give it some color value. However, I only really know how to do this with a black and white color scheme. I tried making a color array that holds the same amount of different gray colors as the amount of max iterations, starting from black and ending in white. Here is my code:
Color[] colors = new Color[maxIterations + 2];
for (int i = 0; i < colors.length; i++) {
colors[i] = new Color((int)map(i, 0, maxIterations + 2, 0, 255),
(int)map(i, 0, maxIterations + 2, 0, 255),
(int)map(i, 0, maxIterations + 2, 0, 255));
}
I then just filled in the amount of iterations in the array and assigned that color to the pixel. I have two questions about this:
Will this also work as we zoom into the fractal in the previously described manner?
How can I add my own color scheme in this, like in the picture? I've read some things about "linear interpolation" but I don't really understand what it is and in what way it can help me.
It sounds like you've made a good start.
Re the first issue: I believe there are ways to automatically choose an "interesting" portion of the set to zoom in on, but I don't know what they are. And I'm quite sure it involves more than just applying some linear function to your current bounding rectangle, which is what it sounds like you're doing.
So you could try to find out what these methods are (might get mathematically complicated), but if you're new to programming, you'll probably find it easier to let the user choose where to zoom. This is also more fun in the beginning, since you can run your program repeatedly and explore a new part of the set each time.
A simple way to do this is to let the user draw a rectangle over the image, and use your map function to convert the pixel coordinates of the drawn rectangle to the new real and imaginary coordinates of your zoom area.
You could also combine both approaches: once you've found somewhere you find interesting by manually selecting the zoom area, you can set this as your "final destination", and have the code gradually and smoothly zoom into it, to create a nice movie.
It will always get gradually slower though, as you start using ever more precise coordinates, until you reach the limits of precision with double and it becomes a pixellated mess. From there, if you want to zoom further, you'll have to look into arbitrary-precision arithmetic with BigDecimal - and it will continue to get slower and slower.
Re the second issue: starting off by calculating a value of numIterations / maxIterations (i.e. between 0 and 1) for each pixel is the right idea (I think this is basically what you're doing).
From there, there are all sorts of ways to convert this value to a colour, it's time to get creative!
A simple one is to have an array of a few very different colours. E.g. if you had white (0.0), red (0.25), green (0.5), blue (0.75), black (1.0), then if your calculated number was exactly one of the ones listed, you'd use the corresponding colour. If it's somewhere between, you blend the colours, e.g. for 0.3 you'd take:
((0.5-0.3)*red + (0.3-0.25)*green) / (0.5 - 0.25)
= 0.8*red + 0.2*green
Taking a weighted average of two colours is something I'll leave as an exercise ;)
(hint: take separate averages of the r, g, and b values. Playing with the alpha values could maybe also work).
Another one, if you want to get more mathsy, is to take an equation for a spiral and use it to calculate a point on a plane in HSB colour space (you can keep the brightness at some fixed value, say 1). In fact, any curve in 2D or 3D which you know how to write as an equation of one real variable can be used this way to give you smoothly changing colours, if you interpret the coordinates as points in some colour space.
Hope that's enough to keep you going! Let me know if it's not clear.
So I am building a application to solve mazes one of the options is upload a picture and it will solve it. However upon solving the maze the output will look like this.
I would like to figure out how to make my program find the proper corridor size and have the solution look like this with the pathway completely full
My data is put into a array with 1's representing the walls and 0's the spaces like this. So far I have thought about trying to find the smallest distance between 1's but that runs into problems with circular mazes and writing on the maze. I have thought about filling the distance between the walls but that runs into problems at intersections.
I am drawing on the image using
image.setRGB(x, y, Color.RED.getRGB());
with the image being a BufferedImage.
I am truly all out of ideas and don't know how to come at this problem any help would be appreciated.
Each square in your grid has a certain size. Say wsq * hsq for "width of square times height of square".
Given your much more fine-grained (x, y), you can find in which square it is by dividing x by wsq and y by wsh:
int xsq = x / wsq;
int ysq = y / ysq;
The area to paint red would be from (xsq * wsq, ysq * hsq) and have width/height (wsq, hsq). and you could paint that red, but it would mean that you paint over the walls. So you have to adjust the area you're going to fill with red color by the size of the walls. If the walls are all two pixels thick, you need to add 1 to the x and the y coordinate of the square, and substract 2 from the widht and the height.
And you could fill it again (with a Graphics2D) for every time that you are now calling image.setRGB or you could remember which squares that you already filled.
Note: since you are working with regular-sized squares, you can also optimize your maze-solving algorithm to work in a grid of squares of size (wsq, hsq) rather than the individual pixels in the image.
Basically, I have a 3D hexagonal tile map (think something like a simplified Civ 5 map). It is optimized to use a single large mesh to reduce draw calls and easily allow for some cool Civ 5 features (terrain continuity and uv texture bleeding).
I want to support wraparound maps in my game, and so was brainstorming ideas on how to best do this.
For example, if the main camera is approaching the far east of the map, then I can simply perform the translation to the far west by doing:
if(camera.x >= MAP_WIDTH)
camera.translate(0, 0, y);
However, by doing this, there will be a brief timespan in which the player will see the "end" of the board before the translation. I want to eliminate this.
The first idea I had to solve this problem was to basically just modify the above code as follows:
if((camera.x + camera.viewportWidth >= MAP_WIDTH)
camera.translate(0, 0, y);
However, this has the side effect of a "jump" during the translation that feels unnatural.
My final solution, and the subject of the question:
I have three cameras, my main camera, one to the far east, and one to the far west. I basically want to "combine" the matrices of these cameras to render the map outside of its actual bounds.
Basically, if the camera is a certain distance from the world bounds, I want to draw the scene from the other side of the world in the following location. So, for example, this is the pseudo code of what I want to do:
int MAP_WIDTH = 25;
float viewportSize = 10f;
float mainCamX = 24f;
float mainCamY = 15f;
Matrix4 cbnd = camera.combined;
if(camX >= MAP_WIDTH)
camX = 0;
else if(camX < 0)
camX = MAP_WIDTH - camX;
if(camX + viewportSize >= MAP_WIDTH)
cbnd = combineMatrices(mainCam.combined, westCam.combined);
modelBatch.setProjectionMatrix(cbnd);
modelBatch.begin();
//Draw map model
//Draw unit models.
modelBatch.end();
modelBatch.setProjectionMatrix(mainCam.combined);
But I am unsure of how to appropriately combine matrices, and am new to the concept of matrices in general.
Can somebody give me a hand in combining these matrices?
Sounds too complicated. Here is my idea:
I.e. you can display 10x10 fields on screen
you have map 100x100 fields
just increase your map to 110x110 and in that extra space repeat your first (zero-est rows and columns)
that way you can scroll smoothly and when camera reaches i.e. most right position you have on map just return it to 0 X position. Same goes for vertical movement.
So, idea is to have double most left part of map in width of screen width and most top part of map in size of screen height at rigth/bottom of the map respectively.
I am using AndEngine to load a svg images as my Sprites.
The problem I am having with this is that i can't figure out how to scale the image to fit the particular device on which it is being run.
sprite= new Sprite(positionX, positionY, WIDTH,HEIGHT,TextureRegion);
The parameters that it takes are the position's on x and y coordinates, and then width, and height.
The problem I am having is that I can't figure out how to scale the sprite to the right width and height for how I want it.
For example I have a title, and I want the title to be bigger on bigger devices, how would I decide if the device is bigger and scale it up for a bigger screen and down for a smaller screen?
If you use a constant camera size, all of the screen is scaled (Hence all of the entities).
Decide on a constant size, for exaple 720x480.
final static int CAMERA_WIDTH = 720;
final static int CAMERA_HEIGHT = 480;
Then, when creating the engine options, use:
... new EngineOptions(... new RatioResolutionPolicy(CAMERA_WIDTH, CAMERA_HEIGHT), ...);
On each device, the camera will scale itself to fit the resolution as good possible, while keeping the ratio between width & height.
Now, when creating a sprite, just do:
Sprite sprite = new Sprite(x, y, TextureRegion);
Don't give the sprite size! Its size comparing to the camera size will be decided according to the texture region size, and it will be a constant one. Then, it will be scaled by the camera-to-device-screen scaling, which changes from one device to another, but the ratio will remain constant - the game will not look like a bad scaled image on devices with a different resoltuion that the camera width/height ratio.
I think that's a great method that AndEngine provides to deal with different screen resolution; IMHO, it is the best to use.
UPDATE: I think I figured it out. The scaleMultiplier also applied to the translate that I was trying to do. I had a suspicion this was the case but couldn't figure out exactly how it got affected.
Anyone familiar with a spinoff of Java called Processing? I'm trying to do something simple, scale a shape and place it in the center of the sketch. This is my code in a nutshell:
pushMatrix();
float scaleX, scaleY, scaleMultiplier, resetX, resetY, transX, transY;
scaleX = 500 / (float)clickState.bounds.getWidth();
scaleY = 500 / (float)clickState.bounds.getHeight();
scaleMultiplier = min(scaleX,scaleY);
resetX = -(float)clickState.bounds.getX();
resetY = -(float)clickState.bounds.getY();
transX = resetX + ((800 - ((float)clickState.bounds.getWidth() * scaleMultiplier))/2);
transY = resetY + ((550 - ((float)clickState.bounds.getHeight() * scaleMultiplier))/2);
scale(scaleMultiplier);
shape(clickState.pshape, transX, transY);
popMatrix();
What I'm trying to do is scale a state on a US Map. clickState is the state that the user clicked on. clickState.bounds is a Rectangle that surrounds the shape of the state. getX() and getY() return the x and y coords of the upper left hand corner of said box. I want to scale the state so that it's no bigger than 500x500 pixels. After that, I want to translate it so that it's in the middle of the sketch, which is 800x550.
Here's where I run into trouble: When I do
shape(clickState.pshape, resetX, resetY);
It draws the state in the upper left hand corner of the sketch. That's exactly what it should do. Then from there I want to add the number of pixels that it would take to center the shape, which is what transX and transY are for. However, when I use transX and transY, the shape gets drawn almost completely off the canvas, depending on where the state is located (even if its only being moved 50 pixels to the right from 0,0). It doesn't make any sense to me whatsoever. I've tried all sorts of combinations of translate(), and even skipping scale() altogether and using a width and height in shape(). It's like Processing is trying to frustrate me on purpose. Any help is appreciated.
I'm not familiar with Processing, but matrix operations are not commutative—the order matters. Typically, operations are applied in an apparent last-specified-first-applied order, as shown in this example.
Vince, I think I was trying to do something very similar last week. Sounds like you figured it out, but check out the answers on this board:
http://forum.processing.org/topic/how-do-i-move-svg-child-shapes#25080000000689051