Welcome, Guest. Please login or register.

Login with username, password and session length

 
Advanced search

1411275 Posts in 69323 Topics- by 58380 Members - Latest Member: bob1029

March 28, 2024, 09:31:18 AM

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsCommunityDevLogsFlip Flow - Puzzle game
Pages: [1] 2 3
Print
Author Topic: Flip Flow - Puzzle game  (Read 10243 times)
Mannapi
Level 0
***


.


View Profile
« on: February 28, 2016, 01:54:32 PM »

A "simple" puzzle game.




[v] Trace color paths
[v] Start/End blocks
[v] Color gates
[-] Winning conditions
[-] Numbered color gates
[-] Bridges to cross 2 paths
[-] Feature creeping
« Last Edit: September 19, 2017, 02:53:37 PM by Mannapi » Logged

Mannapi
Level 0
***


.


View Profile
« Reply #1 on: March 13, 2016, 02:16:59 PM »

Borders / Negative space


[v] Trace color paths
[v] Start/End blocks
[v] Color gates
[v] Winning conditions
[-] Numbered color gates
[/] Bridges to cross 2 paths
[-] UI
[-] Feature creeping
   [v] Borders
   [-] Teleporter
   [-] Color changer
   [-] Splitter
« Last Edit: April 30, 2017, 03:28:23 PM by Mannapi » Logged

belbeeno
Level 1
*


video games


View Profile WWW
« Reply #2 on: March 13, 2016, 04:28:36 PM »

Cool!  Looking forward to playing this.

Hope to see some more time spent on making it clearer how clicking on a line with change the play field; as it stands the change is so suddenly on click that it's hard to keep up.  Also, maybe color merging?  Like, you could have red & green start gates with a yellow exit gate?

And just out of curiosity, how are levels made?  Do you generate them or make them by hand?  In either case, how many do you plan to have?  And how do you plan to quantify difficulty for a level?
Logged

@belbeeno - website
Buy my dang game, Factory Hiro!
Mannapi
Level 0
***


.


View Profile
« Reply #3 on: March 14, 2016, 05:37:19 AM »

Thanks for the interest!

I was hoping to just have it instantaneous, since you might not want to wait for an elaborate animation every time you flip a tile. The hope is that the player will trace a path by flipping a bunch of tiles in a row.

The levels are made by hand as it stands. The interesting thing I found out after starting this is that the paths have a logic to them that is not obvious. For instance if you have a board with an even number width and put a start on a leftmost bright tile, you can't put a goal on a dark tile on the other side, since it can't reach it.

I was thinking of starting with a few dozen levels. I have made an OK-ish editor for them. I will put something playable online soon to test.

Meanwhile I have created the color changer (graphics wip):


[v] Trace color paths
[v] Start/End blocks
[v] Color gates
[v] Winning conditions
[-] Numbered color gates
[/] Bridges to cross 2 paths
[-] UI
[-] Feature creeping
   [v] Borders
   [-] Teleporter
   [v] Color changer
   [-] Splitter
« Last Edit: April 30, 2017, 03:28:49 PM by Mannapi » Logged

Mannapi
Level 0
***


.


View Profile
« Reply #4 on: March 15, 2016, 01:53:09 PM »

A quick gif to show a possible solution to a possible problem.

« Last Edit: April 30, 2017, 03:29:10 PM by Mannapi » Logged

HopFrog
Level 1
*



View Profile WWW
« Reply #5 on: March 15, 2016, 02:16:39 PM »

Looks very interesting!  Kiss
Logged

Mannapi
Level 0
***


.


View Profile
« Reply #6 on: March 23, 2016, 02:28:10 PM »

I added portals. It turns out they are needed to solve some situations where the start and end can't line up (demonstrated in the gif below). They will also be required for crossing chasms.

They work both ways, and required quite a rewrite of the trace logic.



I debated many options to have multiple different portal pairs. In the end the one that scales best is to use colors and a separate palette. The ones below are yellow, but the next pair would have a different color. The actual graphics for the portals and color changing gates are still up for debate.

[v] Trace color paths
[v] Start/End blocks
[v] Color gates
[v] Winning conditions
[-] Numbered color gates
[/] Bridges to cross 2 paths
[-] UI
[-] Feature creeping
   [v] Borders
   [v] Teleporter
   [v] Color changer
   [-] Splitter
« Last Edit: April 30, 2017, 03:29:36 PM by Mannapi » Logged

Mannapi
Level 0
***


.


View Profile
« Reply #7 on: March 25, 2016, 03:27:15 PM »



Who needs UI when you have ... splitters!

[v] Trace color paths
[v] Start/End blocks
[v] Color gates
[v] Winning conditions
[-] Numbered color gates
[/] Bridges to cross 2 paths
[-] UI
[-] Feature creeping
   [v] Borders
   [v] Teleporter
   [v] Color changer
   [v] Splitter
« Last Edit: April 30, 2017, 03:29:52 PM by Mannapi » Logged

a-k-
Level 2
**


View Profile
« Reply #8 on: March 26, 2016, 04:52:08 AM »

Looks very nice, "simple" ideas are best!
I wonder, in games like this, how do you determine the relative merit of each mechanic? Is it by intuition or do you analyze them algorithmically?
In addition, will you introduce losing states that should be avoided (and in particular, will the order of clicks matter?)
Logged

Mannapi
Level 0
***


.


View Profile
« Reply #9 on: March 27, 2016, 06:44:00 AM »

Thanks! I really don't have an analytic approach, so you could call it intuition. The mechanics will be introduced in a controlled way, but hopefully they will be understandable enough to not need an actual tutorial.

Another mechanic I am thinking about is whether to require some levels to be filled up with colors, and then give the ratios for each color that the level should have. I hope I am explaining this properly.

Regarding lose states, I toyed with the idea of having a "confusion" tile. If you hit it then its neighbors (or the whole board) would flip randomly. I decided against it, since you could just secure those tiles before starting to solve the board. I haven't ruled it out yet though.

Another thing I need to decide is whether all levels start with randomly flipped tiles or they are all the same every time. If I want to count the flips as type of points system I will need to have the same setup every time.

As you can see, a lot of the design is still undecided.
Logged

Mannapi
Level 0
***


.


View Profile
« Reply #10 on: April 01, 2016, 04:59:56 AM »

Oh dear. Things get complicated quickly with portals + color changers.

« Last Edit: April 30, 2017, 03:30:08 PM by Mannapi » Logged

Mannapi
Level 0
***


.


View Profile
« Reply #11 on: April 29, 2016, 02:57:17 PM »

Ouch! Long time no post. I realize that looking at checkboxes being filled out is not very entertaining, and what I like about the devlogs I read here is the nitty gritty technical behind-the-scenes stuff.

One of the checkboxes that has been half checked for a while is the Bridge. In order to explain my problems with it I need to explain how the flippable tiles actually work.

The bridge enables the paths to cross:



It requires two tiles to work and originally I wanted the player to be able to tap each it to rotate it individually. I have since decided that these will be unflippable and that will be indicated with a grayer wall color (not shown here).

Each tile is an object that implements an interface that contains the function Enter().

While tracing I pass Enter a input direction argument. This direction is an enum that contains the values North, East, South and West. The Enter function looks up the output direction from a dictionary and returns it. The tracing logic then gets the next tile and uses the new output as the input for the next tile. This means that a tile that has a diagonal from top left to bottom right (see picture) would map the input direction North to the output direction West and the input South to output East.



Now a bridge tile presents a problem for this approach as seen in the picture. Both North and South entries map to the West. To fix this I added 4 new directions to the enum: NorthUnder, EastUnder, SouthUnder and WestUnder. Only bridge tiles will give an output direction when they get a xUnder direction.



I originally thought of the bridge as the only way to cross two paths, but then had the idea for the portals later, which explains their placements in the checklist.

Currently I am working on a palette system where I can swap palettes for every color (including the white and black), and improving the editor since I will start cranking out levels soon.

Anyway, no more checklists. More behind the scenes info!
« Last Edit: April 30, 2017, 03:31:08 PM by Mannapi » Logged

Mannapi
Level 0
***


.


View Profile
« Reply #12 on: May 29, 2016, 03:15:28 PM »

A lot of progress lately. A lot of under the hood stuff. Exchanging hacks for proper code and fixing bugs and edge cases.

The most visible change recently is the support of palettes. This means I can have different palettes at different stretches of levels in the game. Perhaps switch palettes when a new mechanic is introduced, or just every 10 levels or something. This meant that I had to change all the graphics into layers of transparent sprites, where each layer can be colored independently.

The palette swapping (editor feature) can be seen at the end of this gif along with a new palette at the start.


I have also added proper persistence of levels using simple serializable structures. Before that I was using Unity scenes (don't tell anyone).

One simple thing I added also was the click/tap indicator to tell you which tile you just interacted with. A single misclick can have devastating consequences so now you can simply click the tile again to undo.

A few bugs remain and then I can start churning out some playtest levels.
« Last Edit: April 30, 2017, 03:31:28 PM by Mannapi » Logged

bittwyst
Level 1
*


Twitter: @bittwyst


View Profile WWW
« Reply #13 on: May 29, 2016, 03:34:38 PM »

Following this, nice visual style and looks like the kind of thing I might play.
Logged

Mannapi
Level 0
***


.


View Profile
« Reply #14 on: June 23, 2016, 02:46:53 PM »

Added UI and a background. Also added undo and restart functionality.

Dear god UI is frustrating! It is so simple but yet so aggravating.

16x9 landscape mode


9x16 portrait mode. For the phone.


Progress has been slow lately because of lack of free time, but that is set to improve as the baby's sleep schedule solidifies.

Will continue UI work for splash screen and level selection.

Here is a very old playable WebGL build you can cut your teeth on while I get some more up and running:
https://dl.dropboxusercontent.com/u/4396617/flipp/index.html

Let me know how you do! It is a single level and is not a beginner level so be prepared for some head scratching!
« Last Edit: April 30, 2017, 03:32:30 PM by Mannapi » Logged

Artifice Machine
Guest
« Reply #15 on: June 23, 2016, 02:56:15 PM »

Interesting. I'd like to see the bridges in action. The new palette is much nicer than the original. You could use a more distinguishing title though, I think. Maybe something like Oblique?
Logged
Mannapi
Level 0
***


.


View Profile
« Reply #16 on: June 30, 2016, 03:43:58 PM »

Thanks! Oblique is a cool name but as a non native English speaker I had to look it up.

I might have settled on the name Flip Flow, but if I find a better one I will jump on it.

Anyone can suggest names for the game here! Do people like the name Oblique?

I have updated the build posted before to have the new UI/palette etc. It is still the same level, though. I hope the UI is self explanatory.

I have been hesitant about starting full scale level production because I was saving the levels as binary files that could become obsolete (unreadable) with new features and code changes. I have now switched to Json and I have no qualms about retroactively batch processing text files when I add features/change important level things (Python FTW).

Anyway, please try the new webGL build!
Logged

michaelplzno
Level 10
*****



View Profile WWW
« Reply #17 on: June 30, 2016, 06:15:40 PM »

Clever idea! You might want to consider adding some extra frames to the flip animation so its a bit juicer and its quicker to figure out the concept. Good work.
Logged

Mannapi
Level 0
***


.


View Profile
« Reply #18 on: July 12, 2016, 03:18:47 PM »

Yes, that is the most common feedback I get. I will need to address that soon.

In other news, I made all the original graphics in ms paint and then added the transparency in gimp. You could call it programmer art. I decided I needed to double the resolution of the sprites and I had no easy way of doing it so I made a script in python to draw it for me at arbitrary resolutions.

I started summer vacation today so expect more updates soon. I will be staying in a cabin for a week and will bring my laptop to make puzzles. I wont be online but hopefully I can show the stuff I made when I am.
Logged

Zorg
Level 9
****



View Profile
« Reply #19 on: July 12, 2016, 11:14:49 PM »

Your game idea is very clever.

It would be great if you could visualize in which direction a path is going. You could use gradients to create a flow animation, like this:



(Probably much slower and with a lower contrast.)

Your game looks very complicated at the moment. You should add walls, which cannot be flipped to adjust the difficulty level. Simply start with just one single flipable wall.

Edit:
My solution of the single WebGL build level:
SPOILER http://i.imgur.com/4uXsnhw.gif SPOILER
« Last Edit: July 12, 2016, 11:25:56 PM by zorg » Logged
Pages: [1] 2 3
Print
Jump to:  

Theme orange-lt created by panic