Dev Log - Puzzle game - 4

V0.3 Road so far

Glow puzzle pieces - Chosen, completed, etc..
Complete Pieces with each other - Grouping
Gui control for selecting files <- In progress
Full screen or windowed
Check image formats
Save puzzle for later solve
“Hint” - Where you should put a puzzle piece.
Special glowing piece which bring more points.
Prepackaged images

V0.3 is a version that improves overall gameplay with small additions and many code changes which will help me bring my game into multi-player!

The most difficult feature so-far was the grouping of pieces together, so you can stick them together and put them inside the puzzle at once.

Fixing the alignment of pieces for groupings.

My main issue with the grouping was to align them together, at the end the solution is simple since there are few types overall of drag and drop behavior:

Single piece on single piece
Group of pieces on a single piece
Single piece into a group
Group of pieces on another group of pieces.

But the concern is only on dragging a group and aligning it properly onto another piece.
The algorithm at end was much simpler than I thought, because the other end is static - does not move.
It’s easier to assume the position of the piece that is being dragged and use the difference in location to align the other pieces.

As you can see the X and Y are the difference between the positions and it’s calculated using the width as well.

In games the position is usually calculated as top-left or centered if you use also an Origin point - usually for rotating sprites in their place instead of rotating in arc.
I won’t be getting into right now.

At the end this is how proper alignment looks:

Grouping

Group of pieces is implemented using a class that bonds together pieces.
By this logic when group is aligned with another group I actually merge them together to create a single group!
This way I can control the pieces easily rather than gluing together groups.

The code is actual pretty clever:

An interface defines a group:

public interface IDraggableGroup<T> : IEnumerable<T>
{
    void Add(T obj);
    void Clear();
}

Which if you know resembles a List - However I don’t need the whole list behavior so a pre-defined list-like methods are used to explicitly disable the usage of lists.
I actually tried using composition and inheritance however they were all too complicated.
I keep following the rule of KISS - Keep it simple stupid!
And YANGI - Ya ain’t gonna need it!

Because my Draggable pieces are working on events I can use them to sign up to each piece dragging,
Then On dragging I move the position of the other pieces as well.

public void Add(DragablePuzzlePiece draggable)
{
    mGroup.Add(draggable);
    draggable.OnDragging += PieceDragging;
}

private void PieceDragging(DragablePuzzlePiece originalDragged, Vector2f deltaPos)
{
    foreach (var draggable in mGroup)
    {
        if (originalDragged == draggable)
        {
            continue;
        }

        var deltaX = draggable.Dragged.Position.X - deltaPos.X;
        var deltaY = draggable.Dragged.Position.Y - deltaPos.Y;
        draggable.Dragged.Position = new Vector2f(deltaX, deltaY);
    }
}

This behavior will help me to detect single presses when I join multiple users :)

File selection tree

This is exactly as it reads - I re-implement the tree selection for file selection.
This is tedious but kind of fun, rethinking the concepts and implementation details.

I don’t think I actually implemented it very well, I decided to go on a flat list however I think I need to decouple more into:

Logical and UI components, there are tree nodes, content for the tree nodes (Like file path) and the UI for the tree nodes.
So when I open a folder for example I need to take into account few things:
What logic actually is performed when retreiving children (Or load everything and change the state - more memory I won’t take this approach.).
How it’s rendered - when opening a folder all UI nodes should move down in the control.
The coupling between tree node content and UI elements. (Kinda resembles MVVM pattern but I won’t take MVVM fully here).
Styling - how the element renders.

It needs a lot more work and the graphical refinement will come later!