PJMendes Has Fun

Vector Editor - Progress update

2011-11-04T22:30:00.002Z

Uploaded a couple more videos:

This one shows the grid of points created inside the shape to later do tesselation (decompose the inside of the shape into polygons), which will be shaded using vertex colors, smoothly interpolating the colors between each vertex.

The shape is built using Java's GeneralPath, the control point coordinates are converted from Catmull-Rom to Bezier using a matrix.

This shows color interpolation for those inner points, using an algorithm that I created. Works nicely for any points in any position, even for points inside the shape (which in the literature I managed to find, presented a problem for most interpolation algorithms when dealing with polygons). I'm quite happy with the solution! :)

Vector Editor (Video)

2011-10-30T23:07:00.003Z

I've been working on a vector editor program that uses control points to define shapes and colors. Here's an initial video of it in action, in a very early state (I liked the color effects :))

I'm doing the editor in Java using Netbeans as development environment, and using Processing for many things (love it), and maths from all over the internet.

I move, add and delete some points.

Music is from "The Hybrid Front", Sega Genesis/Mega Drive game, 1994.
Composed by Naofumi Hataya.

Other than that, been working hard on some flash action games, but not quite ready to show them yet!

An easier BitmapData.draw

2011-05-24T17:11:00.011+01:00

After lots of struggling with ActionScript's BitmapData "draw" function, with trying to render a tileset using a zoom factor (by applying a scale, and selecting the area inside a larger tileset image to draw from), I decided to create a couple of helper functions, so that I never have to figure out again what the variables do in the "draw" call.

Here, I present to you a couple of functions. The first, "DrawImageAreaScaled", basically draws an upscaled rectangular sub-area of a picture wherever on another image (or on the screen). The second, "DrawImageScaledAndRotated", draws a rotated and scaled picture on the screen.
Transparency is respected (if the image contains alpha information, transparent pixels are drawn correctly).

This can easily be applied to, say, Flixel, by passing as the first parameter "FlxG.buffer" as the destination image, and "your_FlxSprite.pixels" as source (see example below).

Below is the class, and under it, an example on how to use it using Flixel.

P.S.: don't expect too great a performance, since BitmapData.draw is a somewhat slow function, specially when called several times a second to display, say, a tileset.

Class "Render.as" in folder "Utils":


package Utils
{
    import flash.display.BitmapData;
    import flash.geom.Matrix;
    import flash.geom.Point;
    import flash.geom.Rectangle;

    /**
     * Contains helper Renderer functions.
     * @author PJMendes aka TurboLento
     */
    public class Render
    {
        // helper variables - initialized once, reused at every function called
        private static var DrawClipRect:Rectangle = new Rectangle(0, 0, 0, 0); // area on screen to draw (sort of a mask)
        private static var DrawMatrix:Matrix = new Matrix();
  
        /**
         * Helper for a simpler BitmapData.draw. Draws a rectangular area of an image on the screen, using syntax similar to copyPixels.
         * Useful for drawing scaled tiles (performance isn't great though, due to "draw" being slow).
         * @param imgSource The image to draw from.
         * @param imgDestination The image to draw to
         * @param areaSource The area in the source image to draw from.
         * @param positionDestination The x,y position on the destination to draw to.
         * @param scale The scaling to apply to the drawn image (areaSource will be multiplied by this dimension in the final drawing).
        */
        public static function DrawImageAreaScaled(imgSource:BitmapData, imgDestination:BitmapData, areaSource:Rectangle, positionDestination:Point, scale:Point = null, rotationRadians:Number = 0): void
        {
            DrawMatrix.identity();
            DrawMatrix.rotate(rotationRadians);

            if (scale != null)
            {
                DrawMatrix.scale(scale.x, scale.y);
    
                DrawClipRect.width = areaSource.width * scale.x; // i think this is it
                DrawClipRect.height = areaSource.height * scale.y;
    
                DrawClipRect.x = positionDestination.x; // i think this is it - making clipRect sort of a "window" on the destination where source will appear
                DrawClipRect.y = positionDestination.y;
    
                DrawMatrix.translate(positionDestination.x - areaSource.x * scale.x, positionDestination.y - areaSource.y * scale.y);
            }
            else
            {
                DrawClipRect.width = areaSource.width; // i think this is it
                DrawClipRect.height = areaSource.height;
    
                DrawClipRect.x = positionDestination.x; // i think this is it - making clipRect sort of a "window" on the destination where source will appear
                DrawClipRect.y = positionDestination.y;
    
                DrawMatrix.translate(positionDestination.x - areaSource.x, positionDestination.y - areaSource.y);
            }
   
            imgDestination.draw(imgSource, DrawMatrix, null, null, DrawClipRect);
        }
  
        /**
          * Helper for a simpler BitmapData.draw. Draws an image on the screen, scaled and rotated, using syntax similar to copyPixels.
          * Useful for drawing scaled tiles (performance isn't great though, due to "draw" being slow).
          * @param imgSource The image to draw from.
          * @param imgDestination The image to draw to
          * @param positionDestination The x,y position on the destination to draw to.
          * @param scale The scaling to apply to the drawn image (areaSource will be multiplied by this dimension in the final drawing).
          * @param rotationRadians The rotation in radians to apply to the drawn image. Axis for rotation is the top left of the source image.
         */
        public static function DrawImageScaledAndRotated(imgSource:BitmapData, imgDestination:BitmapData, positionDestination:Point, scale:Point = null, rotationRadians:Number = 0): void
        {
            DrawMatrix.identity();
   
            DrawMatrix.rotate(rotationRadians);
   
            if (scale != null)
            {
                DrawMatrix.scale(scale.x, scale.y);
    
                DrawMatrix.translate(positionDestination.x, positionDestination.y);
            }
            else
            {
                DrawMatrix.translate(positionDestination.x, positionDestination.y);
            }
   
            imgDestination.draw(imgSource, DrawMatrix, null, null, null);
        }
    }
}

Example class:


package  
{
    import flash.display.BitmapData;
    import flash.geom.Matrix;
    import flash.geom.Point;
    import flash.geom.Rectangle;
    import org.flixel.FlxSprite;
    import org.flixel.FlxState;
    import org.flixel.FlxG;
    import Utils.Render;
 
    /**
     * ...
     * @author 
     */
    public class TestState extends FlxState
    {
        [Embed(source = "/../data/test.png")] protected var ImgTileset:Class;
        [Embed(source = "/../data/player_sprite.png")] protected var ImgPlayer:Class;
  
        private var img:FlxSprite;
        private var img2:FlxSprite;
  
        override public function create():void
        {
            super.create();
            img = new FlxSprite(0, 0, ImgTileset);
            img2 = new FlxSprite(0, 0, ImgPlayer);
        }
  

        override public function update():void
        {
            //trace("update");
            super.update();
        }
  
        override public function render():void
        {
            //trace("render; DataManagerHasLoaded "+ DataManagerHasLoaded +" TilemapHasLoaded "+ TilemapHasLoaded);
   
   
            // render method 1
            var srcRect:Rectangle = new Rectangle(0, 0, img.width, img.height);
            var destPoint:Point = new Point(320, 0);
            FlxG.buffer.copyPixels(img.pixels, srcRect, destPoint);
   
   
            // render method 2
            var scale:Point = null;
            var destPoint:Point = null;
            var rectSource:Rectangle = null;
   
            //rectSource = new Rectangle(0, 0, img.width, img.height);
            //rectSource = new Rectangle(0, 0, 32, 32);
   
           rectSource = new Rectangle(64, 32, 32, 32);
           destPoint = new Point(FlxG.mouse.x, FlxG.mouse.y);
   
           scale = new Point(2, 2);
   
           Render.DrawImageAreaScaled(img.pixels, FlxG.buffer, rectSource, destPoint, scale);
           //Render.DrawImageScaledAndRotated(img.pixels, FlxG.buffer, destPoint, scale, 0.2);
   
   
           // test with img with transparency
           rectSource = new Rectangle(0, 0, img2.width, img2.height);
           //Render.DrawImageAreaScaled(img2.pixels, FlxG.buffer, rectSource, destPoint, scale);
           Render.DrawImageScaledAndRotated(img2.pixels, FlxG.buffer, destPoint, scale, 0.2);
   
           super.render();
        }
    }
}

Hope this is helpful!

Trying to Keep it Simpler, doing more with less (effort)

2011-02-23T23:02:00.005Z

- Going through the continuous process of learning, doing, and learning from doing.
- Reducing the scope for what I want to do, and go through the process of starting, developing and finishing my projects.
- Dealing with demotivation and boredom, by cycling projects - start project A, reach a point where I'm bored/tired/demotivated, get interested in project B, reach that same point, and go back to project A, now with a fresh outlook on it, and breaking through the point where I got stuck previously.

- having lots of fun with ActionScript, can't recommend it enough for simpler games (unfortunately current Flash performance is weak, allows the creation of games similar to the Super Nintendo, on a technology/performance level)

- creating a few games for Flash, using ActionScript, Flixel and FlashDevelop as the Integrated Development Environment. Reading stuff about business, game business and flash game business, how to monetize the games I'm making.

- swore off C/C++, due to annoyingly complicated and unnecessary stuff like includes, defining/using static classes (as enums), errors due to having to manually manage memory, compilation, using other libraries, and language complexity in general. I want to develop fun games, not become a C++ pro, and I feel I waste lots of time dealing with the "low level" part of the language.

Trying out doing stuff in Java using the "Slick" library, for projects more advanced than Flash allows (hardware accelerated drawing, heavy processing, etc). Java pretty much skips/solves all of these problems, and if I need performance, I can always learn how to invoke dlls from Java and code heavier functions in C (although Java's bad reputation on performance is something that isn't always true, if some care is taken when coding).

CSG operations in 2D

2010-09-30T03:45:00.004+01:00

...or "Integrating a Polygon Boolean Operations Library"

I've been developing a prototype for a platform game, using the Chipmunk Physics library to handle the physics. The control mechanics are to be very simple, similar to Super Mario (with almost no inertia, no floor sliding), aiming to allow for precise and responsive control.

After designing the initial prototype, I started creating levels, using square blocks placed next to each other. This resulted in a (that I found later) known problem, where the object for the player will "bump" into the lines where the blocks meet and slow down or jump on them. Ok, so I'll just use continuous collision lines on top of a group of blocks instead of individual collision squares next to each other, so this doesn't happen.

From here, I needed a solution to ease the level creation process. The options were:

- place the blocks images by hand, and then create the collision lines also by hand (easiest to code, but would lead to boring level editing)

- place the blocks, and code an algorithm to find where the blocks were, outlining it with collision lines (would take some thinking, and would basically be a Constructive Solid Geometry problem)

- place the blocks, integrate an existing CSG solution, and join the individual blocks into a single object (most flexible solution, and I was interested in the potential of integrating CSG functionalities into my engine)

So I went to look for CSG algorithms, libraries, etc, and from what I gathered it's a pretty deep field, with several working solutions but with somewhat complicated implementations.
I looked around for CSG specifically for 2D, and found 3 libraries. From those, Clipper by Angus Johnson presented the best feature list and had a free license, so I looked at it.

It's pretty straightforward and I had a test working in a short time, which was great! This allowed me to integrate it easily into my level editor, and the outcome was great. Editing levels is now a lot of fun!

IDE Switch: From CodeBlocks to CodeLite

2010-09-29T16:15:00.002+01:00

Recently, I've been wanting something out of my IDE that CodeBlocks doesn't have: refactoring.

I've been following recent advice I got (from GoogleTalks, I believe) on code readability, on which the focus is on having short functions (short as in the total number of lines per function being small), which allows the coder to clearly and quickly understand what that function does just by glancing at it, without scrolling involved (I couple this with long function and variable names, which basically self-document my code).

Refactoring tools help this process.

In my opinion, coding is currently still much in it's infancy, it should be much clearer and easier to do, allowing any user to manipulate code in a "Lego" like fashion, assembling and moving blocks around with ease.

Refactoring is a beginning for this. Just create a new part of the code, which amounts to a few lines, select these lines and refactor them into a new function, and that code becomes a simple function invocation (with a nice long name like "GetPhysicsCollisionSegmentsAndInitializeSegmentList").

So, after looking into a few possibilities (including parsing my own code and creating a plugin for CodeBlocks, or switching to Netbeans/Eclipse), I went on a tip I saw on "Stack Overflow" that CodeLite had great refactoring tools. CodeLite, while being a relatively young one-man project, is looking great and is actually more advanced than other (by example). Also, something that always irked me a bit is a slightly negative tone on the CodeBlocks forums, treating newbies harshly and demeaning them with the "that doesn't belong here" and locking the threads (on questions that are actually related, at least partially, with CodeBlocks, which contributes to just demotivating them from further learning C++ or using CodeBlocks), while the guy at the CodeLite (also the creator and main programmer for the tool) is patient and helpful for new guys asking stuff at the forum (which I've been one of :))

I've been migrating my game engine to CodeLite, migrating the libraries, etc. One thing that is missing is importing projects from CodeBlocks, which should be relatively easy to do, and is what is taking me more time. Also, the Shared / Dynamic Library compilation system doesn't create .def and lib*.a files, that I was used to using in CodeBlocks (but apparently they aren't mandatory for dynamic linking).

I've also been working on different projects at the same time, working a bit on each for a while and jumping to other when I complete a sub-goal. Keeps it interesting.

Also, focusing more on prototyping a game (the "puzzle platformer"): have a single room with the most amount of gameplay features, to play around with and tune the gameplay), which allows me to increasingly improve my engine by game requirements, instead of risking over-designing it by adding unnecessary or impractical stuff.

How to do masking in SFML (with OpenGL)

2010-09-12T21:37:00.010+01:00

(if there's some problem with the code, you can find my original forum post here or my Wiki entry for masking in SFML)

Something that I think is very helpful in games is the ability to do masking: define a region, based on an image, a polygon, or some text, and "cut" an image based on that.

Also, I wanted to have non-rectangular masks, and allow masks to have variable alpha (transparency) information.

Currently, the SFML library (at the time, I'm using 1.6) had no support for that, and it's something that I wanted in the long run, so I went in to try to find out how to do it and add it (in OpenGL, which SFML is based on).

After doing some research, a few options surfaced on how to do masking in OpenGL:

Using multi-texturing: mapping several textures to a single polygon, blending them using distinct modes and then draw the polygon. Pros: supported by old hardware. Cons: complicated code :) (having to play around with texture coordinates to correctly translate/rotate/scale the images to overlap)

Using the stencil-buffer: the stencil buffer works like a stencil: you cut a shape and then when you draw to it, only the cut area is shown, the other hidden. OpenGL has an extension which allows you to write pixels to a buffer, and then only draw where that buffer has valid pixels. Pros: close to what I wanted, allowing masks based on pixel information, polygons or text. Cons: required graphic card extensions, which may limit the usage in older hardware or portable devices (if I ever decide to port my games to them), and it didn't allow to write alpha information to the buffer (it either takes full opaque or full transparent, not translucent pixels - at least to the extent of my research and tests).

Writing to the color buffer's alpha channel and then using blending: the image which OpenGL shows on the screen is composed of 4 channels: Red+Green+Blue+Alpha. By writing directly to the alpha channel (and not to the RGB channels), setting correct blending modes, and then drawing overlapping images on the masked area, images will blend with the alpha channel, using that channel's transparency information.

Having these options, I chose to implement the last one into SFML. I contacted the library's creator to request a change in the original source code, that would easily allow the integration of my code into SFML, but he did not agree to that change. Here I reveal the steps to adding this feature, but it involves altering one (1) word in SFML's original source code and recompiling it. Also, it will probably not be supported for SFML 2.0, which will change some inner workings. But for the near future, all good.

This change allows the use of Sprites, Shapes and Strings as/with masks.
NOTE: it hasn't been extensively tested so there may be the occasional bug.

Below i'll post the code for several new classes i've added, and then a few example programs on how to use each class.

Ok, to start, you'll have to change a line in the original SFML 1.6 code, and recompile sfml or the "sfml-graphics" lib.

Go to the SFML source root folder, and open "include/SFML/Graphics/Drawable.hpp".
Then find the function definition

void Draw(RenderTarget& Target) const;

(around line 335)
and replace it with

virtual void Draw(RenderTarget& Target) const;

(add "virtual" at the start).
And recompile sfml-graphics.

New files:
MaskTypes.h - has the several masking types that you can use. Define a MaskType by using "MaskTypes::Type" and set them using "MaskTypes::BlendWithPreviousMask". The mask types are the following:

MaskType::None - use the normal sf::BlendMode.
MaskType::Mask - use this Drawable's Alpha mask as a Mask (only drawing the Drawable's Alpha info, not any color). Will blend the mask with previous existing masks.
MaskType::MaskOverWritePreviousMask - similar to the previous, but will overwrite the previous mask instead of blending into it (allows to "cut" into an existing mask, and is used by example with "StringMask" - check the example)
MaskType::BlendWithPreviousMask - set this mask to have a Drawable blend with the mask previously drawn on its area (only draw where alpha > 0)
MaskType::BlendWithPreviousMaskReversed - set this mask to have a Drawable blend with the NEGATIVE of the mask previously drawn on its area (transparent areas become opaque and vice-versa).

MaskUtils.h - Internal class, no need to call this from your code.
Basically where all the magic happens, OpenGL calls are made, states are saved and restored, etc. Some code that was in "sf::Drawable" related to blend modes was pasted here.
RenderWindowMask.h - must be used instead of a regular sf::RenderWindow, inherits from it. Adds the "ClearMask()" function, which clears just the color buffer's alpha channel.
SpriteMasked.h - use this to draw a Sprite using masking, or to use a Sprite AS a mask. Inherits from sf::Sprite. Adds the "maskSetType/maskGetType" functions necessary to define the masking type.
ShapeMasked.h - use this to use a Shape as a mask or to mask a Shape. Inherits from sf::Shape. Adds the "maskSetType/maskGetType" functions necessary to define the masking type.
StringMasked.h - use this to use a String as a mask or to mask a String. Inherits from sf::String. Adds the "maskSetType/maskGetType" functions necessary to define the masking type.

P.S. no need to preserve states (use "App.PreserveOpenGLStates(true)"), it's all done internally.

MaskTypes.h


#ifndef MASKTYPES_H_INCLUDED
#define MASKTYPES_H_INCLUDED

class MaskTypes
{
   public:
   enum Type
   {
       None = 0,
       Mask,
       MaskOverWritePreviousMask,
       BlendWithPreviousMask,
       BlendWithPreviousMaskReversed
   };
};

MaskUtils.h


#ifndef MASKUTILS_H_INCLUDED
#define MASKUTILS_H_INCLUDED

#include <sfml/graphics/drawable.hpp>

using namespace sf;

class MaskUtils
{
   public:
       MaskUtils()
       {
           reset();
       }

       void reset()
       {
           restoreColorBuffer = false;
           restoreBlendMode = false;
       }

       void setBlendModesBasedOnMaskType(MaskTypes::Type maskType, Blend::Mode blendMode)
       {
           switch(maskType)
           {
               case MaskTypes::None:
               {
                   restoreBlendMode = true;
                   blendModePreviouslyEnabled = glIsEnabled(GL_BLEND);

                   // Setup alpha-blending
                   Blend::Mode myBlendMode = blendMode;
                   if (myBlendMode == Blend::None)
                   {
                       glDisable(GL_BLEND);
                   }
                   else
                   {
                       glEnable(GL_BLEND);

                       switch (myBlendMode)
                       {
                           case Blend::Alpha :
                               glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
                           break;
                           case Blend::Add :
                               glBlendFunc(GL_SRC_ALPHA, GL_ONE);              
                           break;
                           case Blend::Multiply :
                               glBlendFunc(GL_DST_COLOR, GL_ZERO);               
                           break;
                           default :                                                                        
                           break;
                       }
                   }
               }
               break;

               case MaskTypes::Mask:
               {
                   blendModePreviouslyEnabled = glIsEnabled(GL_BLEND);
                   glEnable(GL_BLEND);
                   glColorMask(false, false, false, true);// we can just write the alpha info
                   glBlendFunc(GL_DST_ALPHA, GL_SRC_ALPHA); // include the source (picture we are drawing) alpha, ignore the destination (info already in color buffer) alpha
                   restoreColorBuffer = true;
                   restoreBlendMode = true;
               }
               break;
               case MaskTypes::MaskOverWritePreviousMask:
               {
                   blendModePreviouslyEnabled = glIsEnabled(GL_BLEND);
                   glEnable(GL_BLEND);
                   glColorMask(false, false, false, true);// we can just write the alpha info
                   glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); // include the source (picture we are drawing) alpha, ignore the destination (info already in color buffer) alpha
                   restoreColorBuffer = true;
                   restoreBlendMode = true;
               }
               break;
               case MaskTypes::BlendWithPreviousMask:
               {
                   blendModePreviouslyEnabled = glIsEnabled(GL_BLEND);

                   // draw stuff inside window
                   glEnable(GL_BLEND);
                   glBlendFunc(GL_ONE_MINUS_DST_ALPHA, GL_DST_ALPHA); // blend with alpha info in color buffer, which was written by previous image
                   restoreBlendMode = true;
               }
               break;
               case MaskTypes::BlendWithPreviousMaskReversed:
               {
                   blendModePreviouslyEnabled = glIsEnabled(GL_BLEND);

                   // draw stuff inside window
                   glEnable(GL_BLEND);
                   glBlendFunc(GL_DST_ALPHA, GL_ONE_MINUS_DST_ALPHA); // blend with alpha info in color buffer, which was written by previous image
                   restoreBlendMode = true;
               }
               break;
           }
       }

       void restoreStates()
       {
           if(restoreColorBuffer)
               glColorMask(true, true, true, true);  // make sure that for further images that we are writing all colors

           if(restoreBlendMode)
           {
               if(blendModePreviouslyEnabled)
                   glEnable(GL_BLEND);
               else
                   glDisable(GL_BLEND);
           }
       }

   private:
       bool restoreColorBuffer;
       bool restoreBlendMode;
       bool blendModePreviouslyEnabled;
};

#endif // MASKUTILS_H_INCLUDED

RenderWindowMask.h


#ifndef RENDERWINDOWMASK_H_INCLUDED
#define RENDERWINDOWMASK_H_INCLUDED

#include <SFML/Graphics.hpp>
#include "MaskTypes.h"

using namespace sf;

class RenderWindowMask : public RenderWindow
{
    public:
        RenderWindowMask(
                            VideoMode Mode,
                            const std::string& Title,
                            unsigned long WindowStyle = Style::Resize | Style::Close,
                            const WindowSettings& Params = WindowSettings())
        {
            Create(Mode, Title, WindowStyle, Params);
        }

        RenderWindowMask(   WindowHandle Handle,
                            const WindowSettings& Params = WindowSettings())
        {
            Create(Handle, Params);
        }

        // clears the alpha channel
        void ClearMask()
        {
            glColorMask(false, false, false, true); // disable messing with the rgb channels, just change the alpha
            glClear(GL_COLOR_BUFFER_BIT);    // clear the color buffer (just the alpha channel)
            //glClearColor(FillColor.r / 255.f, FillColor.g / 255.f, FillColor.b / 255.f, FillColor.a / 255.f));
            glColorMask(true, true, true, true); // enable messing with the rgb channels, just change the alpha
        }
};

#endif // RENDERWINDOWMASK_H_INCLUDED

SpriteMasked.h


#ifndef SPRITEMASKED_H_INCLUDED
#define SPRITEMASKED_H_INCLUDED

#include <SFML/Graphics/Sprite.hpp>
#include "MaskTypes.h"
#include "MaskUtils.h"

using namespace sf;

class SpriteMasked : public Sprite
{
    public:
        SpriteMasked() :
        Sprite(),
        maskType(MaskTypes::None)
        {
        }

        void Draw(RenderTarget& Target) const
        {
            // Save the current modelview matrix and set the new one
            glMatrixMode(GL_MODELVIEW);
            glPushMatrix();
            glMultMatrixf(GetMatrix().Get4x4Elements());

            MaskUtils maskUtils;
            maskUtils.setBlendModesBasedOnMaskType(this->maskType, GetBlendMode());

            // Set color
            Color myColor = GetColor();
            glColor4f(myColor.r / 255.f, myColor.g / 255.f, myColor.b / 255.f, myColor.a / 255.f);

            // Let the derived class render the object geometry
            Render(Target);

            maskUtils.restoreStates();

            // Restore the previous modelview matrix
            glMatrixMode(GL_MODELVIEW);
            glPopMatrix();
        }

        void maskSetType(MaskTypes::Type maskType)
        {
            this->maskType = maskType;
        }

        MaskTypes::Type maskGetType()
        {
            return this->maskType;
        }

    private:
        MaskTypes::Type maskType;

};

#endif // SPRITEMASKED_H_INCLUDED

ShapeMasked.h


#ifndef SHAPEMASKED_H_INCLUDED
#define SHAPEMASKED_H_INCLUDED

#include <SFML/Graphics/Shape.hpp>
#include "MaskTypes.h"
#include "MaskUtils.h"

using namespace sf;

class ShapeMasked : public Shape
{
    public:
        ShapeMasked() :
        Shape(),
        maskType(MaskTypes::None)
        {}

        ShapeMasked(sf::Shape& shape) :
        Shape(),
        maskType(MaskTypes::None)
        {
            // copy points
            for(unsigned int idxPoint = 0; idxPoint < shape.GetNbPoints(); ++idxPoint)
            {
                this->AddPoint(shape.GetPointPosition(idxPoint), shape.GetPointColor(idxPoint), shape.GetPointOutlineColor(idxPoint));
            }

            this->SetOutlineWidth(shape.GetOutlineWidth());
            this->SetColor(shape.GetColor());
        }

        void Draw(RenderTarget& Target) const
        {
            // Save the current modelview matrix and set the new one
            glMatrixMode(GL_MODELVIEW);
            glPushMatrix();
            glMultMatrixf(GetMatrix().Get4x4Elements());

            MaskUtils maskUtils;
            maskUtils.setBlendModesBasedOnMaskType(this->maskType, GetBlendMode());

            // Set color
            Color myColor = GetColor();
            glColor4f(myColor.r / 255.f, myColor.g / 255.f, myColor.b / 255.f, myColor.a / 255.f);

            // Let the derived class render the object geometry
            Render(Target);

            maskUtils.restoreStates();

            // Restore the previous modelview matrix
            glMatrixMode(GL_MODELVIEW);
            glPopMatrix();
        }

        void maskSetType(MaskTypes::Type maskType)
        {
            this->maskType = maskType;
        }

    private:
        MaskTypes::Type maskType;
};

#endif // SHAPEMASKED_H_INCLUDED

StringMasked.h


#ifndef TEXTMASKED_H_INCLUDED
#define TEXTMASKED_H_INCLUDED

#include <SFML/Graphics.hpp>
#include "MaskTypes.h"
#include "MaskUtils.h"

using namespace sf;

class StringMasked : public sf::String
{
    public:
        StringMasked() :
        String(),
        maskType(MaskTypes::None)
        {}

        StringMasked(sf::Shape& shape) :
        String(),
        maskType(MaskTypes::None)
        {
        }

        void Draw(RenderTarget& Target) const
        {
            // Save the current modelview matrix and set the new one
            glMatrixMode(GL_MODELVIEW);
            glPushMatrix();
            glMultMatrixf(GetMatrix().Get4x4Elements());

            bool restoreColorBuffer = false;
            bool restoreBlendMode = false;
            bool blendModePreviouslyEnabled;

            MaskUtils maskUtils;
            maskUtils.setBlendModesBasedOnMaskType(this->maskType, GetBlendMode());

            // Set color
            Color myColor = GetColor();
            glColor4f(myColor.r / 255.f, myColor.g / 255.f, myColor.b / 255.f, myColor.a / 255.f);

            // Let the derived class render the object geometry
            Render(Target);

            maskUtils.restoreStates();

            // Restore the previous modelview matrix
            glMatrixMode(GL_MODELVIEW);
            glPopMatrix();
        }

        void maskSetType(MaskTypes::Type maskType)
        {
            this->maskType = maskType;
        }

        MaskTypes::Type maskGetType()
        {
            return this->maskType;
        }

    private:
        MaskTypes::Type maskType;
};

#endif // TEXTMASKED_H_INCLUDED

Example programs:

SpriteMask example:

(actually, shows two examples: on the left, we can see a simple masking example. On the right, a way to do sub-windowing, by combining overlapping masked elements).


#include <SFML/System.hpp>
#include <SFML/Graphics.hpp>
#include <iostream>
#include <fstream>

#include "SpriteMasked.h"
#include "RenderWindowMask.h"

int main()
{
    //sf::RenderWindow App(sf::VideoMode(800, 600, 32), "SFML Graphics");
    RenderWindowMask App(sf::VideoMode(800, 600, 32), "SFML Graphics");
    //App.PreserveOpenGLStates(true);

    sf::Clock Clock;

    sf::Image Image;
    Image.LoadFromFile("northeast.jpg");


    sf::Image ImageMask;
    ImageMask.LoadFromFile("images/window.tga");

    SpriteMasked spriteMask;
    spriteMask.SetImage(ImageMask);
    spriteMask.SetPosition(200, 200);
    spriteMask.maskSetType(MaskTypes::Mask);


    sf::Image ImageInsideWindow;
    ImageInsideWindow.LoadFromFile("images/image.tga");
    SpriteMasked spriteInsideWindow;
    spriteInsideWindow.SetImage(ImageInsideWindow);
    spriteInsideWindow.SetPosition(200, 200);


    const sf::Input& Input = App.GetInput();
    int             mouseXPrev = Input.GetMouseX(),
                    mouseYPrev = Input.GetMouseY(),
                    mouseX, mouseY;

    float timeSinceLastUpdate;

    int a = 0;


    // Start game loop
    while (App.IsOpened())
    {
        // Process events
        sf::Event Event;
        while (App.GetEvent(Event))
        {
            // Close window : exit
            if (Event.Type == sf::Event::Closed)
                App.Close();
            if ((Event.Type == sf::Event::KeyPressed) && (Event.Key.Code == sf::Key::Escape))
                App.Close();
        }

        timeSinceLastUpdate = Clock.GetElapsedTime();
        Clock.Reset();

        mouseX = Input.GetMouseX();
        mouseY = Input.GetMouseY();
        float mouseMoveX = (float)(mouseXPrev - mouseX) * timeSinceLastUpdate * 6.0f;
        float mouseMoveY = (float)(mouseYPrev - mouseY) * timeSinceLastUpdate * 6.0f;
        mouseXPrev = mouseX;
        mouseYPrev = mouseY;

        App.Clear(sf::Color(200,0,0,255));


        /////
        ///// Example 1: simple mask
        /////
        // draw sprite to use as mask
        spriteMask.SetScale(1, 1);
        spriteMask.SetPosition(100, 250);
        spriteMask.maskSetType(MaskTypes::Mask);
        App.Draw(spriteMask);

        // draw normal sprite
        spriteInsideWindow.maskSetType(MaskTypes::BlendWithPreviousMask);
        spriteInsideWindow.SetScale(1, 1);
        spriteInsideWindow.SetPosition(100, 250);
        App.Draw(spriteInsideWindow);


        /////
        ///// Example 2: use masking to do sub-windowing
        /////

        // how to draw sub-windows:
        // 1) draw window contents first
        // 2) draw stuff outside afterwards
        // details:
        // 1) draw window contents - background to foreground
        //   a) draw window bg (don't care about mask)
        //   b) draw mask
        //   c) draw "negative" image (BlendWithPreviousMaskReversed)
        //   d) draw other stuff on top of it
        //   e) draw parent mask on top of it
        // 2) draw stuff outside
        //   a) draw "positive" other stuff over it (BlendWithPreviousMask)
        //   ( b) draw mask again if necessary for every new image to draw? dunno)


        // 1) draw window contents - background to foreground
        //   a) draw window bg (don't care about mask)
        //   b) draw mask for next element
        //   c) draw "negative" image (BlendWithPreviousMaskReversed)
        //   d) draw other stuff on top of it
        //   e) draw parent mask on top of it

        //   a) draw window bg (don't care about mask)
        spriteInsideWindow.SetScale(1,1);
        spriteInsideWindow.maskSetType(MaskTypes::None);
        spriteInsideWindow.SetPosition(500, 250);
        App.Draw(spriteInsideWindow);


        //   b) draw mask for next element (1)
        spriteMask.SetScale(0.4, 0.4);
        spriteMask.SetPosition(550, 250);
        spriteMask.maskSetType(MaskTypes::Mask);
        App.Draw(spriteMask);


        //   c) draw "negative" image (BlendWithPreviousMaskReversed) (1)
        spriteInsideWindow.maskSetType(MaskTypes::BlendWithPreviousMask);
        spriteInsideWindow.SetScale(0.4, 0.4);
        spriteInsideWindow.SetPosition(550, 250);
        App.Draw(spriteInsideWindow);


        //   b) draw mask for next element (2)
        spriteMask.SetScale(0.4, 0.4);
        spriteMask.SetPosition(590, 250);
        spriteMask.maskSetType(MaskTypes::Mask);
        App.Draw(spriteMask);

        //   c) draw "negative" image (BlendWithPreviousMaskReversed) (2)
        spriteInsideWindow.maskSetType(MaskTypes::BlendWithPreviousMask);
        spriteInsideWindow.SetScale(0.4, 0.4);
        spriteInsideWindow.SetPosition(590, 250);
        App.Draw(spriteInsideWindow);



        //   e) draw parent mask on top of it
        spriteMask.SetScale(1.0, 1.0);
        spriteMask.SetPosition(500, 200);
        spriteMask.maskSetType(MaskTypes::Mask);
        App.Draw(spriteMask);


        // 2) draw stuff outside
        //   a) draw "positive" other stuff over it (BlendWithPreviousMask)
        spriteInsideWindow.maskSetType(MaskTypes::BlendWithPreviousMaskReversed);
        spriteInsideWindow.SetPosition(350,150);
        spriteInsideWindow.SetScale(2,2);
        App.Draw(spriteInsideWindow);

        // Display window contents on screen
        App.Display();
    }

    return 0;
}

ShapeMask example:
(masking using a sf::Circle)


#include <SFML/System.hpp>
#include <SFML/Graphics.hpp>
#include <iostream>
#include <fstream>

#include "SpriteMasked.h"
#include "ShapeMasked.h"
#include "RenderWindowMask.h"



int main()
{
    //sf::RenderWindow App(sf::VideoMode(800, 600, 32), "SFML Graphics");
    RenderWindowMask App(sf::VideoMode(800, 600, 32), "SFML Graphics");

    sf::Clock Clock;


    sf::Image ImageInsideWindow;
    ImageInsideWindow.LoadFromFile("images/image.tga");
    SpriteMasked spriteInsideWindow;
    spriteInsideWindow.SetImage(ImageInsideWindow);
    spriteInsideWindow.SetPosition(200, 200);
    spriteInsideWindow.maskSetType(MaskTypes::BlendWithPreviousMask);


    const sf::Input& Input = App.GetInput();
    int             mouseXPrev = Input.GetMouseX(),
                    mouseYPrev = Input.GetMouseY(),
                    mouseX, mouseY;

    float timeSinceLastUpdate;


    // masking for shapes
    sf::Shape circle = sf::Shape::Circle(0, 0, 100, sf::Color(255,255,255,0)); // note: zero alpha
    ShapeMasked shapeMask(circle);
    shapeMask.maskSetType(MaskTypes::Mask);

    // Start game loop
    while (App.IsOpened())
    {
        // Process events
        sf::Event Event;
        while (App.GetEvent(Event))
        {
            // Close window : exit
            if (Event.Type == sf::Event::Closed)
                App.Close();
            if ((Event.Type == sf::Event::KeyPressed) && (Event.Key.Code == sf::Key::Escape))
                App.Close();
        }

        timeSinceLastUpdate = Clock.GetElapsedTime();
        Clock.Reset();

        App.Clear(sf::Color(200,0,0,255));


        // draw shape mask
        shapeMask.SetPosition(500,300);
        App.Draw(shapeMask);

        // draw masked image
        spriteInsideWindow.SetPosition(450, 200);
        App.Draw(spriteInsideWindow);


        // Display window contents on screen
        App.Display();
    }

}

StringMask example:


#include <SFML/System.hpp>
#include <SFML/Graphics.hpp>
#include <iostream>
#include <fstream>

#include "StringMasked.h"
#include "SpriteMasked.h"
#include "RenderWindowMask.h"


int main()
{
    //sf::RenderWindow App(sf::VideoMode(800, 600, 32), "SFML Graphics");
    RenderWindowMask App(sf::VideoMode(800, 600, 32), "SFML Graphics"); // we'll need to use our RenderWindow to have access to "ClearMask" function
    //App.PreserveOpenGLStates(true);

    //std::ofstream myfile;
    //myfile.open ("pixels.txt");

    sf::Clock Clock;

    sf::Image Image;
    Image.LoadFromFile("northeast.jpg");

    sf::Image ImageInsideText;
    ImageInsideText.LoadFromFile("images/image.tga");

    SpriteMasked spriteInsideText;
    spriteInsideText.SetImage(ImageInsideText);

    float timeSinceLastUpdate;


    // masking for text
    // Create a graphical string
    StringMasked stringMask;
    stringMask.SetText("Hello !\nHow are you ?");
    stringMask.SetFont(sf::Font::GetDefaultFont());
    stringMask.SetPosition(100,50);

    stringMask.maskSetType(MaskTypes::Mask);
    stringMask.SetColor(sf::Color(0,0,0,255));

    // Start game loop
    while (App.IsOpened())
    {
        // Process events
        sf::Event Event;
        while (App.GetEvent(Event))
        {
            // Close window : exit
            if (Event.Type == sf::Event::Closed)
                App.Close();
            if ((Event.Type == sf::Event::KeyPressed) && (Event.Key.Code == sf::Key::Escape))
                App.Close();
        }

        timeSinceLastUpdate = Clock.GetElapsedTime();
        Clock.Reset();


        App.Clear(sf::Color(200,0,0,255)); // clear the background to red

        //// How to correctly draw a String to Mask/MaskReverse a sprite:
        //// 1. clear the Window Alpha Mask before drawing the text (or the sprite may appear where you drew previous masks)
        //// 2. draw the SPRITE as the mask (masking everywhere where the sprite would be)
        //// 3. draw the STRING using the mask type "MaskOverWritePreviousMask" (thus "cutting" into the mask the previous sprite left)
        //// 4. draw the Sprite again, normally, using the mask type "BlendWithPreviousMask"

        App.ClearMask(); // 1. clears just the Window's alpha channel

        // 2. use sprite to draw as mask
        spriteInsideText.SetPosition(100,10);

        // save the sprite mask and color state (may be necessary if you reuse this sprite elsewhere)
        MaskTypes::Type prevMaskType = spriteInsideText.maskGetType();
        sf::Color prevSpriteColor = spriteInsideText.GetColor();

        spriteInsideText.SetColor(sf::Color(0,0,0,0));    // set the sprite's alpha to 0
        spriteInsideText.maskSetType(MaskTypes::Mask);    // set the sprite to act as a mask
        App.Draw(spriteInsideText);

        // restore sprite mask+color state
        spriteInsideText.maskSetType(prevMaskType);
        spriteInsideText.SetColor(prevSpriteColor);


        // 3. draw text mask
        stringMask.SetPosition(100,50);
        stringMask.maskSetType(MaskTypes::MaskOverWritePreviousMask);
        App.Draw(stringMask);

        // 4. draw the masked sprite
        spriteInsideText.SetPosition(100,10);
        // using this blending mode, the sprite will be drawn normally and the text area will be "cut" from the sprite
        spriteInsideText.maskSetType(MaskTypes::BlendWithPreviousMask);

        App.Draw(spriteInsideText);




        // Example 2:
        App.ClearMask(); // 1. clears just the Window's alpha channel

        // 2. use sprite to draw as mask
        spriteInsideText.SetPosition(500,10);

        // save the sprite mask and color state (may be necessary if you reuse this sprite elsewhere)
        prevMaskType = spriteInsideText.maskGetType();
        prevSpriteColor = spriteInsideText.GetColor();

        spriteInsideText.SetColor(sf::Color(0,0,0,0));    // set the sprite's alpha to 0
        spriteInsideText.maskSetType(MaskTypes::Mask);    // set the sprite to act as a mask
        App.Draw(spriteInsideText);

        // restore sprite mask+color state
        spriteInsideText.maskSetType(prevMaskType);
        spriteInsideText.SetColor(prevSpriteColor);


        // 3. draw text mask
        stringMask.SetPosition(500,50);
        stringMask.maskSetType(MaskTypes::MaskOverWritePreviousMask);
        App.Draw(stringMask);

        // 4. draw the masked sprite
        spriteInsideText.SetPosition(500,10);

        // using this blending mode, the sprite will be drawn "inside" the text's characters
        spriteInsideText.maskSetType(MaskTypes::BlendWithPreviousMaskReversed);

        App.Draw(spriteInsideText);


        App.Display(); // Display window contents on screen
    }

    //myfile.close();
    return 0;
}

This method has a few inconveniences, such as having the overhead of redrawing polygons, and Strings have some boring extra work needed and work the other way around than sprites and shapes, but I think it's altogether a good and flexible solution, and all-encompassing, technology-wise (supporting older hardware).

Plus, here's a little function for debugging, that saves the current alpha buffer to a file named "imageAlpha.png" (upside down, OpenGL stuff). May help you debug if you run into problems.


void GetGLPixels()
{
    unsigned int startX = 0, startY = 0;
    unsigned int width = 800, height = 600;

    GLubyte* pixels = new GLubyte[width * height * 4];

    glReadPixels(startX, startY, width, height, GL_RGBA, GL_UNSIGNED_BYTE, pixels);


    for(unsigned int idxPixelRow = 0; idxPixelRow < height; idxPixelRow++)
    {
        for(unsigned int idxPixelColumn = 0; idxPixelColumn < width; idxPixelColumn++)
        {
            unsigned int index = ((idxPixelRow * width) + idxPixelColumn) * 4;
            unsigned int indexAlpha = ((idxPixelRow * width) + idxPixelColumn);

            float valueRed = pixels[index + 0];
            float valueGreen = pixels[index + 1];
            float valueBlue = pixels[index + 2];
            float valueAlpha = pixels[index + 3];

            pixels[index] = pixels[index + 1] = pixels[index + 2] = 0;
        }
    }


    // create and save image
    sf::Image imageAlpha;
    imageAlpha.LoadFromPixels(width, height, pixels);
    imageAlpha.SaveToFile("imageAlpha.png");


    delete pixels;
}

I hope this is helpful to others. I spent too much time looking for how to do this, longer than I thought should be for something as useful and old (masking is used on old arcade games to great effect, remember those big scrolling letters which masked the game going on behind it?)

Engine growing pains

2010-03-28T02:24:00.006+01:00

Where did I left off? Oh, that's right:

After playing around with Chipmunk for a while, and implementing a few of the features that I want for one of my projects, I can do little but recommend it as a great physics library, very easy to code with, with great performance, and flexible! Allowed me to prototype some more complex features I want to add (destructible objects) with ease, and its structured in a way to allow to adapt it to many game mechanic scenarios. Some tests I did on an older computer showed it performed better than Box2D, but it was a superficial test, so I won't back up that claim :)

Having a fine physics engine at my disposal, I decided I needed to create a level editor to easily start laying down levels; so, I needed a GUI. I looked around for a barebones lightweight GUI that would integrate well into Allegro, and went with the recommendations for GUIChan. It was indeed easy to integrate and use, and allowed me to design a GUI that let me add floors, walls and connect them with joints. This gave me an incredible sense of achievement, motivation, and the project started feeling more like a game and less like tech development, which was great. And doing levels in it was fun :)

From this point, the code to connect the several engine parts was becoming a bit muddled, so I took a break to refactor it, and from there decided I needed to integrate scripting into the Engine, to allow for easier prototyping (I frequently realize that doing something that will apparently take a long time pays off in the long run, as it simplifies greatly the work and speeds it up after it is integrated and working).

I looked around for available scripting engines, considering Lua, GameMonkey, Angelscript, Squirrel (I rejected Javascript as I don't quite like its syntax). I had some experience working with Lua, and it's generally the, but Wolfire's reasons to their choice for scripting engine sounded quite reasonable (most importantly to me, C++ native integration and syntax), and the Internet showed me that AngelScript was showing a lot of promise, so in I went.

I can say from my experience, integrating a new and unknown library into a project always involves some degree of time needed just to become acquainted with it's workings and quirks, and for integrating a scripting library, it takes quite a lot of time. After this initial period of figuring AngelScript's binding format and details, it was very rewarding to see my "main" function reduced to a few lines and the main code running from a script file, from there having access to all of my engine, being it graphics, gui or physics :)

The next step was to integrate Hardware Graphic Acceleration into Allegro's drawing routines.
I have been an Allegro fan for quite a few years, since I was exposed to Johan Peitz's excellent games "Alex the Allegator", "Operation Spacehog" and "Icy Tower", which I played extensively and all used Allegro).

It presents lots of great features for quickly prototyping games, but being a library with a long legacy (from early DOS days), nowadays it requires a few add-ons to have important features, such as Jpeg and Png loading, and hardware acceleration for graphic rendering (and subsequent benefits from hardware rendering, such as fast transparency and lighting effects).

With these being features I need for my projects, I looked into integrating hardware acceleration into Allegro, based on available libraries. The most obvious options were AllegroGL, which allows making OpenGL calls directly from Allegro (but requires knowledge of OpenGL, of which I possess but am quite rusty on:) ), or OpenLayer, which nicely covers all of OpenGL's technical stuff under a simple API. So, OpenLayer it was.

...happily I went to integrate OpenLayer. Everything was going well, until... I wanted to load a Jpeg. OpenLayer natively allows png loading, but provides no support for Jpeg. "Ok", I think "I'll just the jpeg loader which I had previously included, it let's me load jpegs into Allegro fine".

Turns out it wasn't so easy. OpenLayer was not doing well with me making non-Openlayer Allegro calls, which were necessary to load jpegs, and was not being capable of obtaining the data I passed onto it after loading from the image file. Looking around the web for some help or a solution made the problem obvious: OpenLayer once had a forum/mailing list, but is now discontinued; all the help I could get would be from Allegro's forums, but I could not find any information related to the problem I was facing, and to add the fact that OpenLayer had not been updated since 2007, I figured it was better to try another approach: move on.

I went for a walk on the cold night air, to think it through, ponder my choices and come to a sound decision. Removing Allegro would involve refactoring most of the engine (and possibly losing the chance to use GUIChan), which would take extra time. However, with what I knew at the time, it was something I needed to do.

So I looked for alternatives, from "game libraries", to "graphic libraries" to "game engines" (the difference between a library and an engine being that a library is code that integrates into other code, generally in C or C++, and an engine provides a more or less "complete" set of game necessary features such as graphics, sound, input, and collision/physics and is interacted with trough a scripting language, which allows for faster prototype/game development but is less flexible to adapt to your needs and probably slower than a game engine customized by yourself).

So, for the switch from Allegro to another library, I went with Simple and Fast Multimedia Library (SFML), an excellently documented (tutorials are the best documentation ever!), with a live community, great and simple API and feature complete for what I needed.
I also considered using a 3D engine (Irrlicht, which I have some experience with and found very fast, unlike Ogre3D, and is used by Soldat's Michał Marcinkowski to a similar end that I would use), or an already available "game engine", such as "cocos2d", "angel-engine", "indielib", "love2d", or 2dboy's "rapid-prototyping-framework".

Fortunately, SFML's great design and easy to follow documentation, and the fact that I already had the design for my engine decided and thought out made the reimplementation quick and painless. I strongly recommend SFML as a 2D game development library :)

So now the Engine is composed of:

SFML - Windowing, Graphics (Hardware accelerated), Input, Image/Font/Sound loading (and much more :))
GUI - still to determine (possibilities: CEGUI, cpGUI, GUIChan with SFML wrapper)
AngelScript - for Scripting
Chipmunk - Physics library

P.S: at the time I was thinking/looking for alternatives, I totally forgot that Allegro's recent branch (which will become Allegro 5) has included hardware acceleration and png/jpeg loading, which were the main features I needed to add. However, it's always refered to as "work in progress" and "unstable" and there weren't many Internet references to it, so it's probably best to avoid it for a while, and keep SFML as my current engine.

So currently, I'm working on an animation system and resource management. Next, re-exposing the new engine to AngelScript, and finding a GUI. Then, defining and adding game objects including both visual and physical representations :) And from there, a game level with most/all game features in it (and naturally, starting work on graphics).

Change of Pace

2010-02-28T22:05:00.003Z

So I started thinking about how complex the whole Game Engine was becoming, and specifically the collision response module, and decided to switch gears for a while. In order to take a more frugal approach to the development of an engine I might use to create games, I decided to start from the other end, developing games without an underlying game engine, and learn from what I actually use to create the game, and then go from there.
Started a new project which uses the excellent Chipmunk 2d Physics engine, hopefully I'll post more about it soon (the "Stealth-Platformer-Shooter Project" I mention in the top right box).

Breaking news - Working on Game Engine

2010-01-28T17:42:00.005Z

So hay!

These past few months I have been experimenting and designing a collision detection and response method that would allow me to configure the objects collision parameters and don't have to implement how it would be handled, and make it reasonably flexible so it would cover most of the kinds of collision response seen in platforming games like Sonic, Megaman, or simpler ones like puzzlers.

This has taken quite a lot of thinking, research, trial and error, and mostly TIME, and will take even more of these, so stuff got delayed (all this when I realised I wanted to not have to bother much with how collision response would behave in Pong! Then i started thinking how to build a unified and configurable collision response method so it would work for the kind of games I want to do, and would save me the trouble of rewriting code or worse, having to redesign my Game Engine).

I'm designing it so it will not suffer from the problem of "tunelling", a frequent problem in game collision detection/response in which fast moving objects will go through other ones, ignoring the collison. This is something that i don't see correctly handled in many games, even to this day, and since I don't want to have to worry with bugs occurring from things that I can avoid by designing against them, I will design with that in mind.
Also, it will feature basic dynamics, so that one can configure object's mass or bounciness, add some speed to them and they'll bounce around like nuts (no rotation though, yet).

I see recent game creation frameworks such as Unity also do this, and i see it as a quite useful feature for an engine of this kind.

On the other hand, I added a list on the side with the projects I plan on doing, which will be updated as I get into them, linking to posts about them, and will ultimately link to the game download.

To break the monotony of not actually making games, I started work on a side project about a game played by writing mathematical equations. I'll post it when it reaches "really fun" status (right now it's only "marginally interesting").

Playing around with cyberclay (a mimetic polyalloy)!

2009-12-29T13:32:00.007Z

So I got the word (from TIGSource) that a cool freeware sculpting tool came out, Sculptris, by the same guy who made the coolest sound generator tool sfxr, and took some time off working in the "physics response" coding lab for the game engine, to give it a go. It's pretty cool, reminds me a bit of ZBrush's sculpting mode but has a few more interesting features (such as adding geometry where details is being added), is much easier to get into and do cool stuff, and all this for free!

Xml-style game loading

2009-09-25T22:29:00.004+01:00

How are you gentlemen

After continuing the process of adding features to the Engine in order to allow the building and playing of a basic Pong game, i came to the point where i wanted to have the whole thing loaded from an external xml file.
So i've spent the past 2-3 weeks designing a way to parse xml files and load the appropriate objects into the game, which has been quite a challenge because

1. writing xml file parsers is kinda boring
2. took a bit of code refactoring (to allow incremental construction of an Object - define an empty game entity and add modules to it as they are read from the file)
3. adding the feature to inherit properties from an object (kinda like inheritance in object oriented design)

So after testing loading a few basic entities from the xml format and playing with configuring them in different ways from the xml file, i'm now beginning to add all the available tags to fully allow the definition of the game in xml format. More uncreative and repetitive code, but necessary to have great big fun with it later :)

May News Update

2009-05-22T17:00:00.000+01:00

So here's the current state of affairs: the game engine has reached a point where there still is a lot missing from it, but some basic gameplay can be designed. So i've started to do some old-school basic games, and keep building the engine as the games require, and generalize from that (i think it's good practice to design around the necessary game requirements instead of over generalizing the engine, which tends to make it in a state of never being complete).

I've started with Pong, which interestingly has a few somewhat advanced features that some modern games don't even use, such as collision detection and dynamics (ball/paddle speed), and causes me to add stuff to the engine that i may have missed in design or underdesigned.

I hope to post these first efforts soon :)

It's rewarding to finally see (after some months of working on it) how easy the game engine allows to quickly come up with a game prototype, edit and change stuff, instead of always having to rewrite the game scratch. Also, as the engine design was broken into modules, it's fairly easy to pick up where i left off the past week (since i work on it mostly at nights, sometimes a week or so will go by without having time or energy to do coding)

Next up will be Tetris! Yay :)

First sketch of the title screen:

Screen cap of the current game main screen state of the game:

Actualização Noticiosa - News Update

2009-03-28T14:30:00.000Z

Jump to English Version

Boas, pessoal! Aqui vão notícias sobre aquilo que tenho andado a fazer.

Tenho estado a trabalhar num "motor" de jogos, que me permitirá produzir vários jogos partindo de um programa comum, reduzindo o esforço de reimplementar tarefas comuns para cada jogo. O motor aproximar-se-á mais de um ambiente de desenvolvimento de jogos completo, e menos de uma "framework" em código sobre a qual se implementa mais código, procurando oferecer o maior número de funcionalidades possível para desenvolver qualquer jogo (para já, apenas baseado em "sprites", ou imagens 2D, não suportando ainda 3D real, mas permitirá uma série de truques para simulação 3D).
Resolvi seguir uma abordagem de uma ideia que me surgiu depois de ler este post ("Three Hundred Mechanics - #004 - Environment Tree"), quando tiver avançado mais o desenvolvimento explico o funcionamento interno do programa em maior pormenor. O código está a ser desenvolvido em C++, utilizando a biblioteca de jogos "Allegro", e outras para carregamento de formatos de imagem.

As principais funcionalidades que oferecerá serão:

separação entre lógica de jogo e código, para configuração desta durante o curso do jogo ("run-time")
definição de toda a estrutura de jogo a partir de uma estrutura hierárquica (armazenando o "jogo" num ficheiro com estrutura baseada em XML).
características frequentes em jogos:

gráficas

definição de modelos visuais de jogo ("side-scroller", isométrica)

efeitos gráficos ("scrolling", zoom)
aceleração gráfica por hardware
gráficos "raster" ou vectoriais
definição de GUIs.

Acções úteis na implementação de inteligência artificial (linha de visão, navegação baseada em percepção do ambiente)
Modelos para detecção de colisão/física simples ou newtoniana.

Algumas destas funcionalidades estão já implementadas, outras estão em curso disso, e algumas estão ainda a ser pensadas. Mas quando estiver tudo, vai ser bastante porreiro, e vão sair daqui uns jogos interessantes :) alguns dos quais já tenho pensados há bastante tempo e têm de ser feitos!

Ocasionalmente trabalho em pixel-art, ou faço uns modelos 3D (tudo nos tempos livres, o emprego não permite mais). Aqui estão algumas das coisas que posso mostrar (cliquem para ver ao pormenor):

(english version)
Hey guys! Some news on stuff i've been busy with.

I've been working on a "game engine", which will allow me to produce different games using a single program, reducing the effort of reimplementing tasks which are common between games. The engine will be more of a development enviroment than a code framework on which to further code upon, and will provide a large feature list, allowing to develop (almost) any sprite-based game (only 2D sprite-based for now, some 3D effects can be simulated, but "real" 3D isn't really in the plans right now).

The engine will follow a paradigm based on an idea that came to me after reading this post ("Three Hundred Mechanics - #004 - Environment Tree"), when development is further advanced i'll post more information on how it works. Right now, i've been coding in C++, using the Allegro game library, and several libs for image format handling.

The main engine features will be:

separation between engine code and game logic, allowing logic configuration during game run-time
definition of a full game using an hierarchy structure (storing the "game" on a XML language based file).
frequently used game features:

graphics:

selection of the game's visual mode ("side-scroller", isometric)

graphical effects ("scrolling", zoom)
hardware acceleration
"raster" or vectorial graphics
GUI construction support

Useful agent actions for Artificial Intelligence implementation (line of sight, environment based navigation)
Collision Detection/Physics: simple or advanced (newtonian) models.

Some of these features are already implemented, others will be later, some requiring further thinking, but when it's done, it'll be pretty neat, and some interesting games will come out of it :) (some of which have been planned for quite some time, and must be done!)

Occasionally i'll do some pixel-art or 3D models for fun, all in spare time (my job allowing). Here are some incomplete 3D stuff i've been working on, click for bigger size:

Ascensão de Alvizzar

2008-11-30T06:52:00.000Z

Apresentação

2008-11-28T17:06:00.001Z

Ora muito bem vindos ao blog do PJMendes! Sou Paulo Mendes, habito em Coimbra, gosto de jogos electrónicos, filmes e séries de tv, e BD de todo o género.

Pretendo apresentar neste blog as coisas que vou fazendo nestas áreas. Faço ilustração CG, pixel-art, animação (fg), modelação 3D e texturação, programo diversas coisas e de vez em quando aventuro-me no campo sonoro.

Fiquem por perto.