I'm currently working on a top down game using MonoGame that uses tiles to indicate whether a position is walkable or not. Tiles have the size of 32x32 (which the images also have)
A grid of 200 x 200 is being made filled with wall tiles (and a random generator is supposed to create a path and rooms) but when I draw all the tiles on the screen a lot of tiles go missing. Below is an image where after position (x81 y183) the tiles are simply not drawn?
http://puu.sh/3JOUO.png
The code used to fill the array puts a wall tile on the grid and the position of the tile is it's array position multiplied by the tile size (32x32) the parent is used for the camera position
public override void Fill(IResourceContainer resourceContainer)
{
for (int i = 0; i < width; i++)
for (int j = 0; j < height; j++)
{
objectGrid[i, j] = new Wall(resourceContainer);
objectGrid[i, j].Parent = this;
objectGrid[i, j].Position = new Vector2(i * TileWidth, j * TileHeight);
}
}
When drawing I just loop through all tiles and draw them accordingly. This is what happends in the Game.Draw function
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.Yellow);
// TODO: Add your drawing code here
spriteBatch.Begin();
map.Draw(gameTime, spriteBatch);
spriteBatch.End();
base.Draw(gameTime);
}
The map.draw function calls this function which basically draws each tile. I tried putting a counter on how much times the draw call for each tile was hit and every update the draw function is called 40000 times which is the amount of tiles I use. So it draws them all but I still don't see them all on the screen
public override void Draw(GameTime gameTime, SpriteBatch spriteBatch)
{
for (int i = 0; i < width; i++)
for (int j = 0; j < height; j++)
{
if (objectGrid[i, j] != null)
{
objectGrid[i, j].Draw(gameTime, spriteBatch);
}
}
}
This is the code for drawing a tile. Where the current image is 0 at all times and the GlobalPosition is the position of a tile minus the camera position.
public override void Draw(GameTime gameTime, SpriteBatch spriteBatch)
{
if (visible)
spriteBatch.Draw(textures[currentImage], GlobalPosition, null, color, 0f, -Center, 1f, SpriteEffects.None, 0f);
}
My apologies for the wall of code. It all looks very simple to me yet I can't seem to find out why it is not drawing all of the tiles. For the not drawn tiles visible is still true and currentImage is 0 which it should be
The monogame spritebatch has still some bugs and errors when drawing a large number of 16-bit images. In my case around 200.000 this is not something you can easily solve. If you encounter the same problem make sure that every image you draw is on the screen and you will probably have no problems from this anymore.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
actually, I've tried to run the spherical POV. For run POV, each image should be converted to the number of lines which is used in each revolution, I've tried to use processing software to convert the 2d to 3d image by its library, but when insert those pixel data on the spherical POV, the image is really unrecognizable, any clue to how to map 2d image on a spherical surface
The Processing editor comes with examples, one of which maps a texture image to a sphere. It does this by splitting the sphere into triangles, and then using the texture() and vertex() functions to draw the textured sphere.
You can get to the code from the Processing editor by going to File > Examples > Topics > Textures > TextureSphere, but here's the code:
/**
* Texture Sphere
* by Gillian Ramsay
*
* Rewritten by Gillian Ramsay to better display the poles.
* Previous version by Mike 'Flux' Chang (and cleaned up by Aaron Koblin).
* Original based on code by Toxi.
*
* A 3D textured sphere with simple rotation control.
*/
int ptsW, ptsH;
PImage img;
int numPointsW;
int numPointsH_2pi;
int numPointsH;
float[] coorX;
float[] coorY;
float[] coorZ;
float[] multXZ;
void setup() {
size(640, 360, P3D);
background(0);
noStroke();
img=loadImage("world32k.jpg");
ptsW=30;
ptsH=30;
// Parameters below are the number of vertices around the width and height
initializeSphere(ptsW, ptsH);
}
// Use arrow keys to change detail settings
void keyPressed() {
if (keyCode == ENTER) saveFrame();
if (keyCode == UP) ptsH++;
if (keyCode == DOWN) ptsH--;
if (keyCode == LEFT) ptsW--;
if (keyCode == RIGHT) ptsW++;
if (ptsW == 0) ptsW = 1;
if (ptsH == 0) ptsH = 2;
// Parameters below are the number of vertices around the width and height
initializeSphere(ptsW, ptsH);
}
void draw() {
background(0);
camera(width/2+map(mouseX, 0, width, -2*width, 2*width),
height/2+map(mouseY, 0, height, -height, height),
height/2/tan(PI*30.0 / 180.0),
width, height/2.0, 0,
0, 1, 0);
pushMatrix();
translate(width/2, height/2, 0);
textureSphere(200, 200, 200, img);
popMatrix();
}
void initializeSphere(int numPtsW, int numPtsH_2pi) {
// The number of points around the width and height
numPointsW=numPtsW+1;
numPointsH_2pi=numPtsH_2pi; // How many actual pts around the sphere (not just from top to bottom)
numPointsH=ceil((float)numPointsH_2pi/2)+1; // How many pts from top to bottom (abs(....) b/c of the possibility of an odd numPointsH_2pi)
coorX=new float[numPointsW]; // All the x-coor in a horizontal circle radius 1
coorY=new float[numPointsH]; // All the y-coor in a vertical circle radius 1
coorZ=new float[numPointsW]; // All the z-coor in a horizontal circle radius 1
multXZ=new float[numPointsH]; // The radius of each horizontal circle (that you will multiply with coorX and coorZ)
for (int i=0; i<numPointsW ;i++) { // For all the points around the width
float thetaW=i*2*PI/(numPointsW-1);
coorX[i]=sin(thetaW);
coorZ[i]=cos(thetaW);
}
for (int i=0; i<numPointsH; i++) { // For all points from top to bottom
if (int(numPointsH_2pi/2) != (float)numPointsH_2pi/2 && i==numPointsH-1) { // If the numPointsH_2pi is odd and it is at the last pt
float thetaH=(i-1)*2*PI/(numPointsH_2pi);
coorY[i]=cos(PI+thetaH);
multXZ[i]=0;
}
else {
//The numPointsH_2pi and 2 below allows there to be a flat bottom if the numPointsH is odd
float thetaH=i*2*PI/(numPointsH_2pi);
//PI+ below makes the top always the point instead of the bottom.
coorY[i]=cos(PI+thetaH);
multXZ[i]=sin(thetaH);
}
}
}
void textureSphere(float rx, float ry, float rz, PImage t) {
// These are so we can map certain parts of the image on to the shape
float changeU=t.width/(float)(numPointsW-1);
float changeV=t.height/(float)(numPointsH-1);
float u=0; // Width variable for the texture
float v=0; // Height variable for the texture
beginShape(TRIANGLE_STRIP);
texture(t);
for (int i=0; i<(numPointsH-1); i++) { // For all the rings but top and bottom
// Goes into the array here instead of loop to save time
float coory=coorY[i];
float cooryPlus=coorY[i+1];
float multxz=multXZ[i];
float multxzPlus=multXZ[i+1];
for (int j=0; j<numPointsW; j++) { // For all the pts in the ring
normal(-coorX[j]*multxz, -coory, -coorZ[j]*multxz);
vertex(coorX[j]*multxz*rx, coory*ry, coorZ[j]*multxz*rz, u, v);
normal(-coorX[j]*multxzPlus, -cooryPlus, -coorZ[j]*multxzPlus);
vertex(coorX[j]*multxzPlus*rx, cooryPlus*ry, coorZ[j]*multxzPlus*rz, u, v+changeV);
u+=changeU;
}
v+=changeV;
u=0;
}
endShape();
}
Hopefully this is a good start, but more generally: Stack Overflow isn't really designed for general "how do I do this" type questions. It's more designed for specific "I tried X, expected Y, but got Z instead" type questions. Can you post anything you've tried? Where is your Minimal, Complete, and Verifiable example?
If you have no idea how to start, then start smaller: can you get an image mapped to a rectangle? Work your way up from there and post if you get stuck. Good luck.
I'm making a sprite editor using JavaFX for use on desktops.
I'm attempting to implement zooming functionality, but I've run into a problem: I can't figure out how to disable image smoothing on a Canvas object.
I'm calling Canvas.setScaleX() and Canvas.setScaleY() as per every tutorial implementing Canvas zooming. But my image appears blurred when zoomed in.
I have some test code here to demonstrate.
As this is a sprite editor, it's important for me to have crisp edges to work with. The alternative to fixing image smoothing on the Canvas is to have a non-smoothing ImageView, and have a hidden Canvas to draw on, which I would rather avoid.
Help is appreciated.
(here's a link to a related question, but doesn't address my particular problem)
I was having the same issue with the blurring.
In my case, my computer has Retina Display. Retina Display causes a pixel to be rendered with sub-pixels. When drawing images to the canvas, the image would be drawn with antialiasing for the sub-pixels. I have not found a way to prevent this antialiasing from occurring (although it is possible with other canvas technologies such as HTML5's Canvas)
In the meantime, I have a work-around (albeit I'm concerned about performance):
public class ImageRenderer {
public void render(GraphicsContext context, Image image, int sx, int sy, int sw, int sh, int tx, int ty) {
PixelReader reader = image.getPixelReader();
PixelWriter writer = context.getPixelWriter();
for (int x = 0; x < sw; x++) {
for (int y = 0; y < sh; y++) {
Color color = reader.getColor(sx + x, sy + y);
if (color.isOpaque()) {
writer.setColor(tx + x, ty + y, color);
}
}
}
}
}
The PixelWriter bypasses the anti-aliasing that occurs when drawing the image.
I use Farseer Physics Engine for pump simulation.
In there Example, they always use texture2d format.
But that pump shape is given just Point(x,y) Array.
I want to make polygon or texture2d from that point array.
PolygonTools.CreatePolygon method need int[] and width, not point[].
I don`t know how to make polygon by int[] and width.
please help.
so you wish to create a texture2d from array... hm... i will try explain how will i try this, this is not working example just hint how to do it.
first you need to find with and height, so find max X and max Y to create blank texture.
Texture2D blankTexture = new Texture2D(GraphicsDevice, maxX, maxY, false, SurfaceFormat.Color);
then loop over texture and set pixel color from your array
for(int i=0; i<blankTexture .width; i++)
{
for(int j=0; j<blankTexture .height; j++)
{
// pixel = texture.GetPixel(i, j);
// loop over array, and if pointX in array = i and pointY in array = j then
pixel.Color = Color.White; //
}
}
i think this is quite cpu expensive way... but it could work.
The issue of programmatically drawing lines using XNA has been covered here. However, I want to allow a user to draw on a canvas as one would with a drawing app such as MS Paint.
This of course requires each x and/or y coordinate change in the mouse pointer position to result in another "dot" of the line being drawn on the canvas in the crayon color in real time.
In the mouse move event, what XNA API considerations come into play in order to draw the line point by point? Literally, of course, I'm not drawing a line as such, but rather a sequence of "dots". Each "dot" can, and probably should, be larger than a single pixel. Think of drawing with a felt tip pen.
The article you provided suggests a method of drawing lines with primitives; vector graphics, in other words. Applications like Paint are mostly pixel based (even though more advanced software like Photoshop has vector and rasterization features).
Bitmap editor
Since you want it to be "Paint-like" I would definitely go with the pixel based approach:
Create a grid of color values. (Extend the System.Drawing.Bitmap class or implement your own.)
Start the (game) loop:
Process input and update the color values in the grid accordingly.
Convert the Bitmap to a Texture2D.
Use a sprite batch or custom renderer to draw the texture to the screen.
Save the bitmap, if you want.
Drawing on the bitmap
I added a rough draft of the image class I am using here at the bottom of the answer. But the code should be quite self-explanatory anyways.
As mentioned before you also need to implement a method for converting the image to a Texture2D and draw it to the screen.
First we create a new 10x10 image and set all pixels to white.
var image = new Grid<Color>(10, 10);
image.Initilaize(() => Color.White);
Next we set up a brush. A brush is in essence just a function that is applied on the whole image. In this case the function should set all pixels inside the specified circle to a dark red color.
// Create a circular brush
float brushRadius = 2.5f;
int brushX = 4;
int brushY = 4;
Color brushColor = new Color(0.5f, 0, 0, 1); // dark red
Now we apply the brush. See this SO answer of mine on how to identify the pixels inside a circle.
You can use mouse input for the brush offsets and enable the user to actually draw on the bitmap.
double radiusSquared = brushRadius * brushRadius;
image.Modify((x, y, oldColor) =>
{
// Use the circle equation
int deltaX = x - brushX;
int deltaY = y - brushY;
double distanceSquared = Math.Pow(deltaX, 2) + Math.Pow(deltaY, 2);
// Current pixel lies inside the circle
if (distanceSquared <= radiusSquared)
{
return brushColor;
}
return oldColor;
});
You could also interpolate between the brush color and the old pixel. For example, you can implement a "soft" brush by letting the blend amount depend on the distance between the brush center and the current pixel.
Drawing a line
In order to draw a freehand line simply apply the brush repeatedly, each time with a different offset (depending on the mouse movement):
Custom image class
I obviously skipped some necessary properties, methods and data validation, but you get the idea:
public class Image
{
public Color[,] Pixels { get; private set; }
public Image(int width, int height)
{
Pixels= new Color[width, height];
}
public void Initialize(Func<Color> createColor)
{
for (int x = 0; x < Width; x++)
{
for (int y = 0; y < Height; y++)
{
Pixels[x, y] = createColor();
}
}
}
public void Modify(Func<int, int, Color, Color> modifyColor)
{
for (int x = 0; x < Width; x++)
{
for (int y = 0; y < Height; y++)
{
Color current = Pixels[x, y];
Pixels[x, y] = modifyColor(x, y, current);
}
}
}
}
Im sure this is easily fixed, and I do have searched both high and low, traversed the net both east, west, north and south but to no prevail...
My problem is this. Im in the middle of trying to make a bejeweled clone, just to get me started in xna. However im stuck on the random plotting of gems/icons/pictures.
This is what i have.
First a generated list of positions, a random and a rectangle:
List<Vector2> platser = new List<Vector2>();
Random slump = new Random();
Rectangle bildsourcen;
protected override void Initialize()
{
for (int j = 0; j < 5; j++)
{
for (int i = 0; i < 5; i++)
{
platser.Add(new Vector2((i*100),(j*100)));
}
}
base.Initialize();
}
Pretty straight-forward.
I also have loaded a texture, with 5 icons/gems/pictures -> 5*100px = width of 500px.
allImage = Content.Load<Texture2D>("icons/all");
Then comes the "error".
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
spriteBatch.Begin();
int x = slump.Next(2);
bildsourcen = new Rectangle((x * 100), 0, 100, 100);
for (int i = 0; i < platser.Count; i++)
{
spriteBatch.Draw(allImage, new Rectangle((int)platser[i].X, (int)platser[i].Y, 100, 100), bildsourcen, Color.White);
}
So, there is my code. And this is what happens:
I want it to randomly pick a part of my image and plot it at the given coords taken from the vector2-list. However, it puts the same image at all coords and keeps randomly replacing them, not with random images but with the same. So the whole board keeps flickering the same icons. Ie, instead of generating 15231 and keeping it frozen, it one second puts 11111 and the next second it puts 33333.
Does anybody understand what im trying to describe ? I'm almost at the point of pulling my own hair out. The cat's hair has already been pulled...
Thx in advance
The Draw function is called once each frame. This line:
int x = slump.Next(2);
Is generating a random number (either a 0 or a 1 in this case) each frame, hence the flicker.
The line after that selects a sprite from your sprite atlas based on that number (specifically it specifies the rectangle containing that sprite). And in the loop that follows you're drawing multiple copies of that sprite (always the same image).
You should be doing all of your game logic in your Update function. That function will give you a time and you will probably want to implement a method of waiting for a certain amount of time to pass before you generate a random block (so keep accumulating the time that passes between each Update, until it reaches some threshold). The exact mechanics of when you want to generate your random block is up to you.
Of course, that is not to mention that there are other flaws in the structure of your code. Bejewelled is played on a fixed-sized board with different coloured blocks (each block you could represent with a number from 1 to X). The location of the blocks should be be implicit in your data structure (so you don't need to generate your platser list).
So your Game class should have something like:
const int BoardWidth = 10;
const int BoardHeight = 10;
int[,] board = new int[BoardWidth, BoardHeight];
Then in your Initialize function you should fill board and perhaps use 0 as an empty space and 1 to X to represent your colours, like so:
for(int x = 0; x < BoardWidth; x++) for(int y = 0; y < BoardHeight; y++)
{
board[x,y] = slump.Next(1, 6); // gives 5 different sprites
}
Then in Update wait for user input or a time-out before modifying the board (depending on your gameplay).
Then in your Draw function do something like this:
for(int x = 0; x < BoardWidth; x++) for(int y = 0; y < BoardHeight; y++)
{
if(board[x,y] == 0) continue; // don't render an empty space
Vector2 position = new Vector2(100*x, 100*y);
Rectangle bildsourcen = new Rectangle(100*(board[x,y]-1), 0, 100, 100);
sb.Draw(allImage, position, bildsourcen, Color.White);
}