Slide Cube

cube face
cube while rotating

Inspiration

The main motivation was to create an easy to understand game that you can also play competitively. But we also wanted to build something technically interesting, so we ended up with the 3D perspective.

We had different ideas for the game logic, for example that all blocks have numerical values and all blocks of a side must have the same common divisor. Or a kind of 3D Sudoku. We went with the rubik's cube because it's easy to implement and very easy to understand. However, since it is supposed to be a sliding puzzle and not a rotating puzzle, you have a little more freedom of movement than with the classic rubik's cube.

What it does

You have a classic rubik's cube that you can turn. The rotation always takes place "one after the other", so you cannot rotate the cube freely. During the rotations, the orientation of the cube and the individual blocks rotates with it, as you would expect. The individual rows and columns can be slided step by step, instead of rotating the whole row at once as with the rubik's cube. These slides can be queued when scrolling faster than the animation runs.

Currently, the goal of the game is to arrange one face continuously in one color. Via difficulty levels one should have had the possibility to solve several faces, but there was not enough time. Technically we stayed with flutter web because we didn't have the time to implement mobile controls.

How we built it

At the beginning, we first collected ideas. We were concerned with various criteria

What is exciting as an end product?
What can we learn most from?
How interesting is it to implement the idea?
How well can people interact with it?

After selecting the ideas, we moved on to the technical questions. We have stayed with standard Flutter means because that is where we can learn the most for the future. Using a game engine would have been less useful for normal apps. So we started with IntelliJ and Github and worked on the cube step by step.

We worked mainly in a team of two. What worked well was that one could use Linux and the other Windows without any problems.

Challenges we ran into

We had to face two difficult problems:

Perspective logic of the 3D cube
Performance

The 3D logic is of course independent of Dart and Flutter, but was definitely a challenge.

We had big performance problems with the rotation of the cube at the beginning. After a few rotations, the animation started to get extremely bogged down. Jank! After learning with the excellent videos from the Flutter team (thanks for that!) about animations, some tweaks could be implemented. By reworking the cube logic, we were also able to get even more performance out of it.

One difficulty was definitely the time, but every second was worth it in the end.

Accomplishments that we're proud of

We like three things in particular ourselves:

The 3D logic.
The fact that we were able to eliminate the performance problems.
The use of actions / animations in a queue. When we implemented the queues, there wasn't much content on the internet. So we got creative and it works satisfyingly well. So this could end up in a blogpost in the future.

What we learned

We primarily learned a lot of flutter basics. How widgets interact with each other, where keys are needed, how animations work, etc.

We were also able to develop an understanding of what is quick and easy with Flutter and where you need to look closely for the details.

Personally, I had fun with Flutter before. That's the only reason I wanted to start working on the hackathon. But now I'm even more confident about implementing applications with it in the future.