Drawing tilemap is lowering my fps to a crawl - c++

Okay, I'm trying to get my fps to 60, but right now it's at around 20. What can I do to this code to speed it up? Note: this is c++ using sfml.
App.Clear();
for(int x = 0; x < lv.width; x++){
for(int y = 0; y < lv.height; y++){
int tileXCoord = 0;
int tileYCoord = 0;
int tileSheetWidth = tilemapImage.GetWidth() / lv.tileSize;
if (lv.tile[x][y] != 0)
{
tileXCoord = lv.tile[x][y] % tileSheetWidth;
tileYCoord = lv.tile[x][y] / tileSheetWidth;
}
tilemap.SetSubRect(sf::IntRect(tileXCoord * lv.tileSize, tileYCoord * lv.tileSize, (tileXCoord * lv.tileSize) + lv.tileSize, (tileYCoord * lv.tileSize) + lv.tileSize));
tilemap.SetPosition(x * lv.tileSize, y * lv.tileSize);
App.Draw(tilemap);
}
}
playerSprite.SetSubRect(sf::IntRect(player.width * player.frame, player.height * player.state,
(player.width * player.frame) + player.width, (player.height * player.state) + player.height));
playerSprite.SetPosition(player.x, player.y);
App.Draw(playerSprite);
if(player.walking){
if(player.frameDelay >= 0)
player.frameDelay--;
if(player.frameDelay <= 0){
player.frame++;
player.frameDelay = 10;
if(player.frame >= 4)
player.frame = 0;
}
}
for(int x = 0; x < lv.width; x++){
for(int y = 0; y < lv.height; y++){
int tileXCoord = 0;
int tileYCoord = 0;
int tileSheetWidth = tilemapImage.GetWidth() / lv.tileSize;
if (lv.ftile[x][y] != 0)
{
tileXCoord = lv.ftile[x][y] % tileSheetWidth;
tileYCoord = lv.ftile[x][y] / tileSheetWidth;
}
tilemap.SetSubRect(sf::IntRect(tileXCoord * lv.tileSize, tileYCoord * lv.tileSize, (tileXCoord * lv.tileSize) + lv.tileSize, (tileYCoord * lv.tileSize) + lv.tileSize));
tilemap.SetPosition(x * lv.tileSize, y * lv.tileSize);
App.Draw(tilemap);
}
}
App.Display();

It looks like you're iterating over the pixels of your level, instead of over the tiles. Rewrite it like
///get the width of a tile
// get the height of a tile
int tileWidth = tilemapImage.getWidth();
int tileHeight = tilemapImage.getHeight();
//find the number of tiles vertically and horizontally, by dividing
// the level width by the number of tiles
int xTiles = lv.width / tileWidth;
int yTiles = lv.height / tileHeight();
for (int x = 0; x < xTiles; x++) {
for (int y = 0; y < yTiles; y++) {
// Do your calculations here
//ie: if(Walking) { draw_walk_anim; }
// draw_tile[x][y];
tilemap.SetPosition(x * tileWidth, y * tileHeight);
}
}

I lack expertise in the area, but you're drawing your tilemap for every tile, based on the parameters it's taking, it looks like it's redrawing the entire tilemap even though it's changed at most a single tile.
How would only calling App.Draw(tilemap); after every row, or perhaps after you've set the entire screen affect things.

Related

How to repair the spacing between blocks when I rotate them?

Hello I'm currently trying to rotate blocks that are within a square. But when I start to rotate them it starts to create weird spaces between blocks that I don't want. Could you help me to fix the problem of spaces beetween blocks? Here are some code and screenshots how does it look.
https://imgur.com/a/BLuO7FF
I have already checked if all angles and radiuses are calculated correctly and I don't see any problem there.
World.h
#pragma once
#include <SFML/Graphics.hpp>
class World
{
public:
World(sf::Vector2f Wpos);
float AngleToRadian(int angle);
void RotateWorld();
void draw(sf::RenderWindow &window);
sf::Texture tx;
sf::Sprite** Block;
sf::Vector2f Pos;
sf::Vector2i Size;
float** radius;
float** angle;
};
World.cpp
#include "World.h"
#include <SFML/Graphics.hpp>
#include <iostream>
#include <cmath>
#define PI 3.14159
World::World(sf::Vector2f Wpos)
{
Pos = Wpos;
Size = sf::Vector2i(10, 10);
Block = new sf::Sprite*[Size.y];
radius = new float*[Size.y];
angle = new float*[Size.y];
for (int i = 0; i < Size.y; i++)
{
Block[i] = new sf::Sprite[Size.x];
radius[i] = new float[Size.x];
angle[i] = new float[Size.x];
}
tx.loadFromFile("Img/Block.png");
sf::Vector2i off(Size.x * tx.getSize().x / 2, Size.y * tx.getSize().y / 2); //tx size is 32px x 32px
for (int y = 0; y < Size.y; y++)
{
for (int x = 0; x < Size.x; x++)
{
Block[y][x].setTexture(tx);
Block[y][x].setOrigin(tx.getSize().x / 2, tx.getSize().y / 2);
Block[y][x].setPosition(x*tx.getSize().x + Wpos.x - off.x + Block[y][x].getOrigin().x, y*tx.getSize().y + Wpos.y - off.y + Block[y][x].getOrigin().y);
radius[y][x] = sqrt(pow(Pos.x - Block[y][x].getPosition().x, 2) + pow(Pos.y - Block[y][x].getPosition().y, 2));
angle[y][x] = (atan2(Block[y][x].getPosition().y - Pos.y, Block[y][x].getPosition().x - Pos.x) * 180.0) / PI;
if ((atan2(Block[y][x].getPosition().y - Pos.y, Block[y][x].getPosition().x - Pos.x) * 180.0) / PI < 0)
{
angle[y][x] += 360;
}
//angle[y][x] = round(angle[y][x]);
/*radius[y][x] = round(radius[y][x]);*/
}
}
}
void World::RotateWorld()
{
float dx = 0, dy = 0;
if (sf::Keyboard::isKeyPressed(sf::Keyboard::E))
{
for (int y = 0; y < Size.y; y++)
{
for (int x = 0; x < Size.x; x++)
{
Block[y][x].rotate(1);
if (angle[y][x] >= 360)
{
angle[y][x] = 0;
}
angle[y][x]++;
dx = cos(AngleToRadian(angle[y][x])) * radius[y][x];
dy = sin(AngleToRadian(angle[y][x])) * radius[y][x];
Block[y][x].setPosition(Pos.x + dx, Pos.y + dy);
}
}
}
if (sf::Keyboard::isKeyPressed(sf::Keyboard::Q))
{
for (int y = 0; y < Size.y; y++)
{
for (int x = 0; x < Size.x; x++)
{
Block[y][x].rotate(-1);
if (angle[y][x] >= 360)
{
angle[y][x] = 0;
}
angle[y][x]--;
dx = cos(AngleToRadian(angle[y][x])) * radius[y][x];
dy = sin(AngleToRadian(angle[y][x])) * radius[y][x];
Block[y][x].setPosition(Pos.x + dx, Pos.y + dy);
}
}
}
}
I expected it to rotate withouth any spaces between. I would be really thankfull if someone would help me.
I would try with setting the origin of the sf::Sprite using it's getGlobalBounds() method instead of the sf::Texture size getter.
The difference seems minor and something like that might be the case.
Block[y][x].setTexture(tx);
Block[y][x].setOrigin(Block[y][x].getGlobalBouds().width / 2, Block[y][x].getGlobalBouds().height / 2);
Block[y][x].setPosition(x*Block[y][x].getGlobalBouds().width + Wpos.x - off.x + Block[y][x].getOrigin().x, y*Block[y][x].getGlobalBouds().height + Wpos.y - off.y + Block[y][x].getOrigin().y);

TMX issue with Drawing tiles in correct position (c++)

The TMX map is loading correctly but it seems to be positioning my tiles incorrectly.
I'm using the TMX Parser from here: https://code.google.com/p/tmx-parser/
It loads the TMX fine, with no errors. But it's only positioning the tiles according to the their location in the spritesheet.
Here is the code sample:
void Game::DrawMap()
{
SDL_Rect rect_CurTile;
SDL_Rect pos;
int DrawX;
int DrawY;
for (int i = 0; i < map->GetNumLayers(); ++i)
{
// Get a layer.
currLayer = map->GetLayer(i);
for (int x = 0; x < currLayer->GetWidth(); ++x)
{
for (int y = 0; y < currLayer->GetHeight(); ++y)
{
int CurTile = currLayer->GetTileId(x, y);
int Num_Of_Cols = 8;
int tileset_col = (CurTile % Num_Of_Cols);
tileset_col++;
int tileset_row = (CurTile / Num_Of_Cols);
rect_CurTile.x = (1 + (32 + 1) * tileset_col);
rect_CurTile.y = (1 + (32 + 1) * tileset_row);
rect_CurTile.w = 32;
rect_CurTile.h = 32;
DrawX = (x * 32);
DrawY = (y * 32);
pos.x = DrawX;
pos.y = DrawY;
pos.w = 32;
pos.h = 32;
apply_surfaceClip(DrawX,DrawY, surfaceTileset, destSurface, &rect_CurTile);
sprTexture = SDL_CreateTextureFromSurface(mRenderer,destSurface);
SDL_RenderCopy(mRenderer,sprTexture,&rect_CurTile,&pos);
}
}
}
void apply_surfaceClip( int x, int y, SDL_Surface* source, SDL_Surface* destination, SDL_Rect* clip = NULL )
{
//Holds offsets
SDL_Rect offset;
//Get offsets
offset.x = x;
offset.y = y;
//Blit
SDL_BlitSurface( source, clip, destination, &offset );
}
I fixed the issue the problem was when using two layers it was drawing zeros here is the finished sample
for (int i = 0; i < map->GetNumLayers(); ++i)
{
// Get a layer.
currLayer = map->GetLayer(i);
for (int x = 0; x < currLayer->GetWidth(); ++x)
{
for (int y = 0; y < currLayer->GetHeight(); ++y)
{
int CurTile = currLayer->GetTileId(x, y);
if(CurTile == 0)
{
continue;
}
int Num_Of_Cols = 8;
int tileset_col = (CurTile % Num_Of_Cols);
int tileset_row = (CurTile / Num_Of_Cols);
std::cout << CurTile << std::endl;
rect_CurTile.x = (1 + (32 + 1) * tileset_col);
rect_CurTile.y = (1 + (32 + 1) * tileset_row);
rect_CurTile.w = 32;
rect_CurTile.h = 32;
DrawX = (x * 32);
DrawY = (y * 32);
pos.x = DrawX;
pos.y = DrawY;
pos.w = 32;
pos.h = 32;
apply_surfaceClip(DrawX,DrawY, surfaceTileset, destSurface, &rect_CurTile);
sprTexture = SDL_CreateTextureFromSurface(mRenderer,destSurface);
SDL_RenderCopy(mRenderer,sprTexture,&rect_CurTile,&pos);
}
}
}

Iterate through 1D array and 2D array with step

Iterating through 1D array (pseudo 2D) with step of 3:
arr = new int[height * width * 3];
for (int i = 0; i < height * width * 3; i+=3) {
arr[i] = 1;
}
I have tried this, but what I got is column of one third:
for (int y = 0; y < height * 3; y++) {
for (int x = 0; x < width; x+=3) {
arr[x + width * y] = 1;
}
}
Assuming your cells have a 'size' of 3 entries, you should use the * 3 on the inner loop. Otherwise you miss 2 thirds of your cells on each row.
You also need to multiply width by 3 to get the correct row.
for (int y = 0; y < height; y++) {
for (int x = 0; x < width * 3; x+=3) {
arr[x + width * 3 * y] = 1;
}
}
In general you need the following structure for such situations:
for (int y = 0; y < height; y++) {
for (int x = 0; x < width * cellWidth; x+= cellWidth) {
arr[x + width * cellWidth * y] = 1;
}
}
(Were cellWidth is 3 in your case)
To slightly simplify this, you could assume in the loops that your cells have a width of 1 (like a normal situation) and multiply by cellWidth when actually assigning the values:
for (int y = 0; y < height; y++) {
for (int x = 0; x < width; x++) {
int index = (x + width * y) * cellWidth;
arr[index + 0] = 1; // First 'cell entry'
arr[index + 1] = 1; // Second
...
arr[index + cellWidth - 1] = 1; // Last
}
}
Another solution is to create larger 'items' using a struct for example:
typedef struct { int r, int g, int b } t_rgb;
t_rgb* arr = new t_rgb[height * width];
for (int y = 0; y < height; y++) {
for (int x = 0; x < width; x++) {
arr[x + width * y].r = 1;
}
}
and you are able to use it as a regular array (the compiler does all calculations for you). This also makes it more clear what is happening in your code.
What are you trying to accomplish exactly? Setting a channel in a RGB image?
I usually do it like this:
for (int y = 0; y < height; y++)
for (int x = 0; x < width; x++)
arr[(x + width * y) * 3] = 1;
In general, to set RGB values, you can simply add an offset like this:
for (int y = 0; y < height; y++)
for (int x = 0; x < width; x++)
{
size_t base = (x + width * y) * 3;
arr[base + 0] = r;
arr[base + 1] = g;
arr[base + 2] = b;
}

How to "Padding" Image in C++

I am running for displaying RGB image from raw in C++ without any library. When I input the square image (e.g: 512x512), my program can display the image perfectly, but it does not in not_square size image (e.g: 350x225). I understand that I need padding for this case, then I tried to find the same case but it didn't make sense for me how people can pad their image.
If anyone can show me how to pad, I would be thanks for this. And below is what I have done for RGB from Raw.
void CImage_MyClass::Class_MakeRGB(void)
{
m_BMPheader.biHeight = m_uiHeight;
m_BMPheader.biWidth = m_uiWidth;
m_pcBMP = new UCHAR[m_uiHeight * m_uiWidth * 3];
//RGB Image
{
int ind = 0;
for (UINT y = 0; y < m_uiHeight; y++)
{
for (UINT x = 0; x < m_uiHeight*3; x+=3)
{
m_pcBMP[ind++] = m_pcIBuff[m_uiHeight - y -1][x+2];
m_pcBMP[ind++] = m_pcIBuff[m_uiHeight - y -1][x+1];
m_pcBMP[ind++] = m_pcIBuff[m_uiHeight - y -1][x];
}
}
}
}
You need to pad the number of bytes in each line out to a multiple of 4.
void CImage_MyClass::Class_MakeRGB(void)
{
m_BMPheader.biHeight = m_uiHeight;
m_BMPheader.biWidth = m_uiWidth;
//Pad buffer width to next highest multiple of 4
const int bmStride = m_uiWidth * 3 + 3 & ~3;
m_pcBMP = new UCHAR[m_uiHeight * bmStride];
//Clear buffer so the padding bytes are 0
memset(m_pcBMP, 0, m_uiHeight * bmStride);
//RGB Image
{
for(UINT y = 0; y < m_uiHeight; y++)
{
for(UINT x = 0; x < m_uiWidth * 3; x += 3)
{
const int bmpPos = y * bmWidth + x;
m_pcBMP[bmpPos + 0] = m_pcIBuff[m_uiHeight - y - 1][x + 2];
m_pcBMP[bmpPos + 1] = m_pcIBuff[m_uiHeight - y - 1][x + 1];
m_pcBMP[bmpPos + 2] = m_pcIBuff[m_uiHeight - y - 1][x];
}
}
}
}
I also changed the inner for loop to use m_uiWidth instead of m_uiHeight.
#Retired Ninja, Thanks anyway for your answer... you showed me a simple way for this...
But by the way, I have fixed mine as well with different way.. here is it:
void CImage_MyClass::Class_MakeRGB(void)
{
m_BMPheader.biHeight = m_uiHeight;
m_BMPheader.biWidth = m_uiWidth;
int padding = 0;
int scanline = m_uiWidth * 3;
while ( ( scanline + padding ) % 4 != 0 )
{
padding++;
}
int psw = scanline + padding;
m_pcBMP = new UCHAR[m_uiHeight * m_uiWidth * 3 + m_uiHeight * padding];
//RGB Image
int ind = 0;
for (UINT y = 0; y < m_uiHeight; y++)
{
for (UINT x = 0; x < m_uiHeight*3; x+=3)
{
m_pcBMP[ind++] = m_pcIBuff[m_uiHeight - y -1][x+2];
m_pcBMP[ind++] = m_pcIBuff[m_uiHeight - y -1][x+1];
m_pcBMP[ind++] = m_pcIBuff[m_uiHeight - y -1][x];
}
for(int i = 0; i < padding; i++)
ind++;
}
}

Rotating image not working

I'm trying to rotate an image using openFrameworks, but I have a problem. My rotated image is red instead of its original color.
void testApp::setup(){
image.loadImage("abe2.jpg");
rotatedImage.allocate(image.width, image.height, OF_IMAGE_COLOR);
imageCenterX = image.getWidth() / 2;
imageCenterY = image.getHeight() / 2;
w = image.getWidth();
h = image.getHeight();
int degrees = 180;
float radians = (degrees*(PI / 180));
for (int y = 0; y < h; y++) {
for (int x = 0; x < w; x++) {
int index = image.getPixelsRef().getPixelIndex(x, y);
int newX = (cos(radians) * (x - imageCenterX) - sin(radians) * (y - imageCenterY) + imageCenterX);
int newY = (sin(radians) * (x - imageCenterX) + cos(radians) * (y - imageCenterY) + imageCenterY);
int newIndex = rotatedImage.getPixelsRef().getPixelIndex(newX, newY);
rotatedImage.getPixelsRef()[newIndex] = image.getPixelsRef()[index];
}
}
rotatedImage.update();
}
void testApp::update(){
}
void testApp::draw(){
image.draw(0,0);
rotatedImage.draw(0,400);
}
Can someone tell me what I am doing wrong?
If your image has three color components (Red, Green, Blue), you need to transform all three of those. The following should do the trick:
rotatedImage.getPixelsRef()[newIndex] = image.getPixelsRef()[index];
rotatedImage.getPixelsRef()[newIndex+1] = image.getPixelsRef()[index+1];
rotatedImage.getPixelsRef()[newIndex+2] = image.getPixelsRef()[index+2];