https://ldjam.com/events/ludum-dare/51/shabadoo
Hello. Today I have the time in order to rate games - and also explain how I created my project - Shabadoo. Its main particularity is the template which I made so as to simplify the game development. At first I thought that the OLC::PixelGameEngine (Javidx9) could be an interesting way to create my game. I don't know if you know it, but it is a single header file in pure C++ without any dependencies using OpenGL as a way to create inside a GDI+ frame a single texture on which you control every pixel. I quickly resumed how it works, but it is a great tool with many functions and a clever ECS system which reminds us of some Unity script including an appUpdate() section. However (like with Pico-8) there are harsh limitations. Ok! Let's go...
I said to myself that it could be fun to create my own Template for GameJam(s). Fundamentally it is not too hard to create a 2d game engine from scratch in pure C++ and inspired by the PGE template. The core can be developed in less than 500 code lines, but after this work I struggled hard in order to draw, shape and compute game objects. If we can understand easily what a line is (x1,y1 to x2, y2), just a moment think about a hexagon or a filled non-regular polygon... At first, I show you what is a pixel structure according to this template - and how it draws them on screen :
```(c++)
struct Pixel
{
union
{ // opaque black pixel
uint32_t n = 0xFF000000;
struct
{
uint8_t r;
uint8_t g;
uint8_t b;
uint8_t a; // alpha
};
};
};
(...)
bool xGameEngine::Draw(const gck::vi2d& pos, Pixel p)
{
if (!pDrawTarget)
return false;
Pixel d = pDrawTarget->GetPixel(pos);
// escape quickly if the pixel has the same color
if (p == d)
return false;
float a = (float)(p.a / 255.0f);
float c = 1 - a;
float r = a * (float)p.r + c * (float)d.r;
float g = a * (float)p.g + c * (float)d.g;
float b = a * (float)p.b + c * (float)d.b;
// new pixel at pos
return pDrawTarget->SetPixel(pos, Pixel((uint8_t)r, (uint8_t)g, (uint8_t)b));
}
When I started my project canvas, I thought about a clean font in-game without any third part. I remembered a script which I made under Unity in order to write text as a single sprite. If you remember TakeYourMedsDarling (a previous entry for the LD 49), I used a system like this... How does it work? In fact, it is more or less similar to the Chip-8 font system (lol). Imagine a sprite 5x7 pixels (chip-8 used a 4x4 pixels size). Imagine now 5 bytes and their bits. For each column the function reads a hexadecimal value and each converted bit 1 becomes a colored pixel - a bit 0 becomes an alpha null pixel. So the letter A can be write with the bits :
std::vector keyA{ 0x7E, 0x09, 0x09, 0x09, 0x7E };
For each letter, number or special char, I created them using 5 hexadecimal values. I wasted many time, but this font is mine – and it works as expected giving retro vibes to the game. Take a look at the function – notice how it converts a char to booleans :
void xGameEngine::DrawString(gck::vi2d pos, std::string &str, gck::Pixel p, int32_t scale)
{ // our letters scale - only 5x7 pixels
short fontX = 5;
short fontY = 7;
short pp = pos.x;
if (stamp == nullptr)
DrawFont(fontX, fontY);
// only lower case
std::vector<unsigned char> byte;
transform(str.begin(), str.end(), str.begin(), ::toupper);
for (size_t i = 0; i < str.length(); i++)
{
if (str[i] == '
')
{
pos.y += (fontY + 1) * scale;
pos.x = pp * scale;
continue;
}
byte = checkChar(str[i]);
for (int x = 0; x < fontX; x++)
for (int y = 0; y < fontY; y++)
if ((byte[x] >> y) & 0x1)
stamp->SetPixel(gck::vi2d(x, y), p); // this one !!!
else
stamp->SetPixel(gck::vi2d(x, y), gck::BLANK);
DrawSprite(pos, stamp, scale);
pos.x += (fontX + 1) * scale; // shift to the next char
}
}
The main difficulty had been to draw some non-regular polygons - the levels on which rebounds the colored balls. It was not too hard to draw a shape, just lines using a main **std::vector** with coordinates (x,y). I could use **std::pair**, but no... However I had no clue how I could fill shapes. There are many ways in order to fill a shape, but they wasted my tiny CPU resources - and as I said I had to use them carefully. Then I saw a raylight in the darkest fog! According to the same **std::vector** I implemented a function which checks all pixels and stores them if they are inside a non-regular polygon coordinates. However I called this function in the appCreate() section - so storing pixels during the first frame, drawing them in the appUpdate() section. The renderer was really smooth - and the resources were saved.
// function in order to check if a point is inside a polygon
bool xGameEngine::isPointInsidePolygon(std::vector vertices, gck::vi2d pos)
{
bool isInside = false;
auto num_verts = vertices.size();
for (size_t i = 0, j = num_verts - 1; i < num_verts; j = i++)
{
double x1 = vertices[i].x;
double y1 = vertices[i].y;
double x2 = vertices[j].x;
double y2 = vertices[j].y;
if (((y1 > pos.y) != (y2 > pos.y)) && (pos.x < (x2 - x1) * (pos.y - y1) / (y2 - y1) + x1))
isInside = !isInside;
}
return isInside;
}
```
I really like the background under some games developed using Pico-8. It is like a canvas or a curtain. In my template, I had a function in order to apply a single color to each pixel so as to « clean » the main screen, but I wanted more...
In C++, we can use some ternary operator and I really like it. It is more than a simple condition variable – it allows us to develop some behavior according to a condition. I said to myself that using coordinates I could apply another color to the pixel if it has a particular feature. So I check pixels using this ternary operator :
So I got vertical lines according to the width. Then I found a tip. Simply I add +1 pixel to my game X resolution and it shifts everything on screen. Again I used a ternary operator. Finally I have some zebra lines. Sometimes a little thing can change everything...
```
// clear the entire sprite (or screen) according a specific color
void xGameEngine::Clear(Pixel p, Pixel pp, int stripe)
{
int pixels = pDrawTarget->width * pDrawTarget->height;
Pixel* m = GetDrawTarget()->GetData();
for (int i = 0; i < pixels; ++i)
stripe != 0 ? (i % stripe ? m[i] = p : m[i] = pp) : m[i] = p;
}
At the end, my template was able to draw many shapes. below you can see every declaration which are explicit :
///////////////////////////////////////////////////////
// useful functions declarations
///////////////////////////////////////////////////////
inline float map(int s, float a1, float a2, float b1, float b2);
inline float computeDistance(const gck::vi2d& p1, const gck::vi2d& p2);
inline float lerp(float a, float b, float f);
inline vf2d GetVector(int32t nIndex, int32t fRadius, int32t fFactor);
vi2d rotatePoint(gck::vi2d p, gck::vi2d axis, float angle);
bool inTriangle(const gck::vi2d& p, const gck::vi2d& pos1, const gck::vi2d& pos2, const gck::vi2d& pos3);
bool isPointInsidePolygon(std::vector vertices, gck::vi2d px);
///////////////////////////////////////////////////////
// functions declarations in order to draw everything
///////////////////////////////////////////////////////
virtual bool Draw(const gck::vi2d& pos, Pixel p = gck::WHITE);
void DrawLine(const gck::vi2d& pos1, const gck::vi2d& pos2, Pixel p = gck::WHITE);
void DrawFrame(const gck::vi2d& pos1, const gck::vi2d& pos2, Pixel p = gck::WHITE, bool fill = false); // simple rectangle
void DrawRect(const gck::vi2d& pos, const int32t w, const int32t h, const int& angle = 0, Pixel p = gck::WHITE, bool fill = false); // rotation available
void DrawTris(const gck::vi2d& pos1, const gck::vi2d& pos2, const gck::vi2d& pos3, const int& angle, Pixel p = gck::WHITE, bool fill = false);
void DrawCircle(const gck::vi2d& pos, const int& fRadius, Pixel p = gck::WHITE, bool fill = false, const int& thickness = 0);
void DrawPolygon(const gck::vi2d& pos, const int& fRadius, int32t fFactor, const int& angle, Pixel p = gck::WHITE, bool fill = false); // regular polygon
void DrawPolygon(const std::vector vertices, Pixel p = gck::WHITE, bool fill = false); // no regular polygon
void DrawSprite(const gck::vi2d& pos, Sprite* sprite, uint32t scale = 1);
void DrawFont(int32t x, int32t y); // in order to write string
std::vector checkChar(char c);
void DrawString(gck::vi2d pos, std::string &str, gck::Pixel p = gck::WHITE, int32t scale = 1);
void Clear(Pixel p, Pixel pp = VERYDARKGREY, int stripe = 0); // to clear screen each frame
```
And it is enough so as to create a game :golf:
Among all these functions I really like this one which allows to draw a regular polygon. One single function to draw a square, a pentagon, a hexagon, a heptagon or an octagon - really useful. Take a look at the way in order to fill them. Each edge has two points and the third is the center of the polygon. Then I fill these triangular shapes (as you can see, there is a function to rotate each shape or point) :
```
// check if a point is inside a triangle (used to fill regular polygons)
bool xGameEngine::inTriangle(const gck::vi2d& p, const gck::vi2d& pos1, const gck::vi2d& pos2, const gck::vi2d& pos3)
{
int s = (pos1.x - pos3.x) * (p.y - pos3.y) - (pos1.y - pos3.y) * (p.x - pos3.x);
int t = (pos2.x - pos1.x) * (p.y - pos1.y) - (pos2.y - pos1.y) * (p.x - pos1.x);
if ((s < 0) != (t < 1) && s != 0 && t != 1)
return false;
int d = (pos3.x - pos2.x) * (p.y - pos2.y) - (pos3.y - pos2.y) * (p.x - pos2.x);
return d == 0 || (d < 0) == (s + t <= 0);
}
(...)
// draws a regular polygon according to a single point, a factor and a radius
void xGameEngine::DrawPolygon(const gck::vi2d& pos, const int& fRadius, int32_t fFactor, const int& angle, Pixel p, bool fill)
{
if (fFactor > 8)
fFactor = 8; // beyond 8 it's almost a circle no ?
// sometimes a point at the center is required
if (fill)
Draw(pos, p);
for (int i = 0; i < fFactor; i++)
{
gck::vf2d vPoint = rotatePoint(GetVector(i, fRadius, fFactor) + pos, pos, static_cast<float>(angle));
gck::vf2d pPoint = rotatePoint(GetVector(i - 1, fRadius, fFactor) + pos, pos, static_cast<float>(angle));
fill ? DrawTris(pos, vPoint, pPoint, 0, p, true) : DrawLine(vPoint, pPoint, p);
}
}
```
I could continue to explain many, many, many things about this template - and especially how I developed the physics for Shabodoo, but I guess that for now it is enough. You can try Shabadoo - and of course you can rate it. Leave a comment - I really appreciate it, and then I have a link in order to rate your own project. I hope that you liked those explanations. If I can improve some parts of my template I will share it on GitHub, but right now it is still bugged and not clearly coded. Stay tuned ++
https://ldjam.com/events/ludum-dare/51/shabadoo
(The HTML5 and Windows versions were made earlier)
Check out my game, "Lizard Chef" https://ldjam.com/events/ludum-dare/51/lizard-chef
