✂︎ - - - - Banded - - - - - (minimal rope physics puzzle)

chamaeleon

Member
The updated version works well. :) I hope you are able to take the concept further. What I like about the game I linked is the very easy game play coupled with increasingly harder challenges to solve.
 
The updated version works well. :) I hope you are able to take the concept further. What I like about the game I linked is the very easy game play coupled with increasingly harder challenges to solve.
Thanks, I'm hoping to achieve something similar here. But I will need testers to play it and "rate" how hard they found each level so I can establish the best order for them. Anyone interested in doing that, please do leave a comment here!

Devlog:
After watching my friend try and play, I noticed that there is an issue with understanding rope length.

The only way you can tell you've run out of rope, is when you see the dots here:
1626876456796.png
It shows you where the rope reaches to


So in this situation, you want to close the loop.
1626876781955.png

So you'd move the mouse up and then around. But here, you'd realise it wasn't long enough because of the dots.
1626876936962.png

But if the edge of the window is here, you'd never be able to get the mouse there.
1626877017400.png
Leaving you confused, because when you try to close it, nothing happens.

So my fix is to add this warning.


I wanted to keep the UI as minimal as possible, so this is what I came up with.


That arrow serves as multipurpose, as it's also to indicate that you have an inventory, and once the inventory is open, it becomes the item selector:
 
Last edited:

CMAllen

Member
You could try a bit of a texturing to the ends of each band, too, like some sort of color-inverted hash pattern or stippling. Another option might some sort of vibration to the unanchored end-portion of the band, and if the user drags it too much beyond its max length, a 'snap' sound effect can play and the current band is removed -- it could simply disappear outright, or it could break apart around other active anchor points and fall away. Something to visually indicate, on its own, that the user tried to pull the band too far.
 
Thank you for the feedback! Those are some great ideas.

You could try a bit of a texturing to the ends of each band, too, like some sort of color-inverted hash pattern or stippling.
I agree that the art style can appear a little plain and perhaps in need of some detail. I also like the idea of adding some kind of detail to the ends of the ropes like perhaps a knot or a fray. But I think if I start adding patterns and textures, it could get cluttered quickly, and I really want to avoid that with this art style. Do you have any specific examples of what you mean? I had a look on google and I'm assuming you mean something like this?

1626953066010.png1626953085180.png
But not specifically that pattern, just any pattern that fades away?


Another option might some sort of vibration to the unanchored end-portion of the band, and if the user drags it too much beyond its max length, a 'snap' sound effect can play and the current band is removed
I really like the concept of having a 'no text' visual way of showing the player what is happening, and it actually may have made more sense to start having the dotted lines come from the starting point rather than the end. That's a very interesting idea.

But I think having the rope outright disconnect would cause frustration, because it's likely they had everything lined up except for the last part, and to have to do it all again would be a hassle.


Devlog:

There's now an indication as to what colours need to be wrapped around which circles. Once you've wrapped that colour, it stops flashing
 
Last edited:

CMAllen

Member
Thank you for the feedback! Those are some great ideas.


I agree that the art style can appear a little plain and perhaps in need of some detail. I also like the idea of adding some kind of detail to the ends of the ropes like perhaps a knot or a fray. But I think if I start adding patterns and textures, it could get cluttered quickly, and I really want to avoid that with this art style. Do you have any specific examples of what you mean? I had a look on google and I'm assuming you mean something like this?

View attachment 41529View attachment 41530
But not specifically that pattern, just any pattern that fades away?
Yeah, something along those lines. Something that clearly indicates there's no more length left to use.

I really like the concept of having a 'no text' visual way of showing the player what is happening, and it actually may have made more sense to start having the dotted lines come from the starting point rather than the end. That's a very interesting idea.

But I think having the rope outright disconnect would cause frustration, because it's likely they had everything lined up except for the last part, and to have to do it all again would be a hassle.
Maybe the first time, but the visual and auditory feedback should be more than enough to let the user know what happened and why. At which point, the mechanic emphasizes the challenge of the gameplay itself: using the rights bands with the right lengths. That being said, do you have any UI feedback to let the user know how long a given band is?



Devlog:

There's now an indication as to what colours need to be wrapped around which circles. Once you've wrapped that colour, it stops flashing
That should help guide the user.
 
Maybe the first time
This is a good point too, the player is unlikely accidentally break the rope more than once, if there's enough visual feedback leading up to the snap. The first time will be curiosity, on an inconsequential level early on.

That being said, do you have any UI feedback to let the user know how long a given band is?
Not yet, but the idea is to have the sizes of the circles in here:

be relative to the size of the rope, and there will also be infinite ropes which will have an infinity sign next to them to indicate that.


Devlog:
In certain situations, specific colours will show.

Normally, the only colours that show will be the colours a circle still needs. And it will be an occasional glint as seen from the previous post.



But if you move your mouse over a circle, it will show all the colours it needs continuously.



Moving your mouse over an inventory item will show all the circles that need it.



The same will happen if you move your mouse to cut a band. It will show all the circles that need it.

I am undecided if this makes things too complicated, maybe the above behaviour should only occur if, say holding shift.
 

CMAllen

Member
Yeah, definitely restrict the color flashing/panning effect unless the player is holding a specific key or has the inventory panel open. Otherwise it would get kind of overwhelming.
 
Yeah, definitely restrict the color flashing/panning effect unless the player is holding a specific key or has the inventory panel open. Otherwise it would get kind of overwhelming.
From my own testing, occasional colour flashing has been ok. We will see what response is from community playtesting and work from there. But the information from these flashes is crucial to gameplay, so it would be much better if they were occuring without prompt.

Also, it makes the game look more interesting in gifs!

Currently working on a level editor:

The shortcuts that show in the corner are relevant to the current action / what you're mouse is over (rather than dump the 15+ shortcuts all on a help screen somewhere).
 
1627733086611.png

When I was first developing Banded, I was under time pressure because it was a jam entry, and I couldn't get it working where a band could touch the same wheel twice without it crashing.
So I just made it so you couldn't do that.

As far as I remember, I haven't changed this code at all, but out of curiosity I removed that restriction... And it works? No crashes? lol
 

GoK

Member
I might be dumb, but what's the goal of the game? I can wrap bands around the circles, I can cut them, but it seems to do nothing...

UPD:
There's no gameplay or objective yet, it's just to test the mechanics.
Oh, I see!

About the length indication. I don't know if it's gonna look good, but what if it will behave like a rubber band: the more you stretch it, the thinner it becomes. This way the player can estimate the length of the band without stretching it all the way.
 
Last edited:
I might be dumb, but what's the goal of the game? I can wrap bands around the circles, I can cut them, but it seems to do nothing...

UPD:
Oh, I see!
You're right though, I really need to fix it and actually add some levels! The functionality is all there I just need to "tie it together". Otherwise it's a waste of a view!
Thank you for playing and the feedback. How did you find it?

what if it will behave like a rubber band: the more you stretch it, the thinner it becomes. This way the player can estimate the length of the band without stretching it all the way.
I really like this idea, that would be a great visual cue. My only concern is that all the bands are the same widths, and if they start changing thickness as a size indicator, it will hurt the aesthetic. Unless you mean they only start getting thinner right at the end, once they're already beyond their maximum length? That could look nice. Although the locations of the bands would all need to be updated if you start changing the width, which could be a problem.

Also I managed to waste 30 minutes just playing around with the autozoom in the editor.

There's definitely potential for a game just with this mechanic alone.

Perhaps you can mark a region with all the points, and the smaller the region, the more resistant you are to attack but the less area you cover, so the less resource you can harvest
 

GoK

Member
I really like this idea, that would be a great visual cue. My only concern is that all the bands are the same widths, and if they start changing thickness as a size indicator, it will hurt the aesthetic. Unless you mean they only start getting thinner right at the end, once they're already beyond their maximum length? That could look nice. Although the locations of the bands would all need to be updated if you start changing the width, which could be a problem.
Ok, maybe not a width, but some sort of cue for band length is still needed. It's not just about visuals but also about giving players information. A game will expect them to think about how many circles to wrap? Which ones? Where to start? Which is next? Which is next after that? The current length of a free band is very much relevant to all of those questions.
As an alternative you can attach some sort of abstract "spool" to the end of a band - the bigger the spool the more unused bend player has.


Thank you for playing and the feedback. How did you find it?
It's a curious little game! The graphics are nice and the movement is very satisfying. The only thing that annoys me, I constantly miss click when starting a new band. My brain just can't get used to the fact that I need to click on the area outside a circle and not on a circle itself. Other than that, it's good!
 
Last edited:
The only thing that annoys me, I constantly miss click when starting a new band. My brain just can't get used to the fact that I need to click on the area outside a circle and not on a circle itself.
Hmmm. The reason behind this is that sometimes you'll be able to move the circles, and to do that you'll be able to drag them. It would be inconsistent if sometimes dragging from the circle started a new band, and other times it would move it.

Ok, maybe not a width, but some sort of cue for band length is still needed. It's not just about visuals but also about giving players information. A game will expect them to think about how many circles to wrap? Which ones? Where to start? Which is next? Which is next after that? The current length of a free band is very much relevant to all of those questions.
Very true, you're right, it's not clear enough.

As an alternative you can attach some sort of abstract "spool" to the end of a band - the bigger the spool the more unused bend player has.
What a cool idea, that's perfect! It's like a little party horn thing lol


Progress pics:



I've now added a new game rule, and I wondered if you had any suggestions for how it could show this rule?
The rule is that you no longer can place a band in exactly the same place as one already exists.

So for example in the picture above, the orange band refuses to wrap around that circle because there's already a yellow one in that position.

You'd have go around the other way like this instead:

But there needs to be some feedback to show why you can't put the band there.

My idea:
The band that's already there could start vibrating

But it would be cool for it to interact with the band somehow too.
I've hit image limit so it has to be a link
Also I want to "bake" placed bands into a surface as they don't move and the rendering technique I'm using is very expensive, but erasing the segment that needs to vibrate would mean re-rendering the entire screen without it there which isn't ideal. I guess I could just draw a white line over the top of it, but yeah!
 
Last edited:

CMAllen

Member
I've now added a new game rule, and I wondered if you had any suggestions for how it could show this rule?
The rule is that you no longer can place a band in exactly the same place as one already exists.

So for example in the picture above, the orange band refuses to wrap around that circle because there's already a yellow one in that position.

You'd have go around the other way like this instead:

But there needs to be some feedback to show why you can't put the band there.

My idea:
The band that's already there could start vibrating

But it would be cool for it to interact with the band somehow too.
I've hit image limit so it has to be a link
Also I want to "bake" placed bands into a surface as they don't move and the rendering technique I'm using is very expensive, but erasing the segment that needs to vibrate would mean re-rendering the entire screen without it there which isn't ideal. I guess I could just draw a white line over the top of it, but yeah!
I was thinking of flashing, but that would work, too. Of course, if you wanted to be comical about it, you could have the placed band grow a 'hand' (colored to match) and swat the intruder away.
 
you could have the placed band grow a 'hand' (colored to match) and swat the intruder away.
That is quite funny but I'm not sure it really fits the rest of the game lol


Update!
For ages, the way to close the band was just to touch the starting circle with the mouse, and it would do the rest for you:


But with some tweaking, I've been able to make it act consistently with the way it normally reacts with a circle (if it wasn't the closing one).

This also solves an issue relating to some "cheats" that were in place to make it look right.

When you were trying to wrap around a large wheel like this:
1628334551329.png
it would actually look like you had enough band left to complete it, when actually it wasn't long enough. This was frustrating for players, so I had to add some "forgiveness" of about 100 pixels that allows you to finish the wrap even though the band wasn't long enough (because it looked like it was).

But now that you can manually do the wrap yourself, there's no need for this as you can clearly see that it won't make it round.
1628334595926.png


Also there was a bug where it would crash if you made the band cast collide with multiple wheels at the same time, so I had to have this setup to make sure it was fixed.
After I fixed it, I realised it looked pretty cool:
1628330038386.png

Changelog
Also for motivation purposes, I always keep track of what changes I've made each day, but for some reason I've never thought to post them. So this all the changes that have been made since the most recent public build was released (it's been like 3 weeks).

ADDED - Spiral to indicate how much band you have left while placing
ADDED - Band no longer instantly closes upon touching the final wheel, you can do the full wrap
ADDED - Buttons to the pause screen
ADDED - Current length preview in editor
ADDED - Bands cannot overlap identically (so they’d be covering each other up)
ADDED - Change length shortcut hides if the band is infinite
ADDED - Trim band to current length shortcut goes away if it’s already done
ADDED - Toggle to make bands infinite in length
ADDED - Foundation of a pause screen
ADDED - Ability to trim a placed band to the length it’s wrapped at
ADDED - Ability for a band to touch a wheel more than once
ADDED - Colourful 123456 UI for setting wheel colour requirements
ADDED - Hovering a stripe about to cut it previews all wheels that need that colour
ADDED - Inventory arrow bounces down when you select an inventory item
ADDED - Rating UI at end of level
ADDED - Outline for what the trailer should look like
ADDED - Ability to zoom the view out (used at end of level)
ADDED - Detection for when the level is over
ADDED - “Next level” button with animation
ADDED - “THANKS!” When you rate
ADDED - Inventory closes when zooming out
ADDED - Warning UI when rope is too short
ADDED - Made UI for when a band needs to touch a colour
ADDED - Added preview of all needed colours when mousing over a wheel
ADDED - No white stripe if you mouse over
ADDED - Eye icon when you mouse over wheels
ADDED - Too short icon
ADDED - Can press space to toggle which side the stripe starts from
ADDED - Roadmap and expected time left to put into project
ADDED - Spawn animation for wheels
ADDED - Inventory is open at start and then closes (to draw attention to it).
ADDED - Onscreen UI keyboard shortcut prompts
ADDED - “cannot place here” cross UI for wheels when they’re involved in a collision
ADDED - Ability to spawn new bands
ADDED - Ability to delete bands
ADDED - Ability to change colour requirements of wheels
ADDED - Ability to change band’s colours
ADDED - Current band length shows on [^][v] change length UI
ADDED - Ability to load any specific level
ADDED - Ability to clear the current level
ADDED - Levels now smoothly transition at the end, when starting a new level
ADDED - Ability to resize band length
ADDED - Ability to resize wheel size
ADDED - Ability to spawn wheels
ADDED - Ability to move wheels
ADDED - Rating saving/loading system for windows platform
ADDED - Exit transition animation when completing a level
ADDED - An ad for banded on the free sound page

FIXED - Spiral has no animation when it despawns
FIXED - You can place a band even when it’s too short in some specific circumstances
FIXED - Random crashes when you move the mouse too fast
FIXED - “too short” warning no longer shows due to new finishing mechanism
FIXED - Wheels stop collision checking upon first collision, resulting in wheels without crosses on that should have them.
FIXED - Some macros are not named correctly
FIXED - You can start casting from new ties when there are collisions between wheels
FIXED - Band overlap prevention system was utterly broken, no idea how it was seeming to work
FIXED - Band still shows as dotted with cross even when band is marked as infinite
FIXED - Spiral only plays spawning in animation once at the start and forever more just pops in
FIXED - When spawning a band on a wheel, a small circle appears at 0,0 for one frame
FIXED - Keyboard shortcuts are all over the screen at game launch
FIXED - Holding shift presses the backspace key on the UI
FIXED - A wheel can require more colours than can fit around it
FIXED - 123456 flashes white when they despawn
FIXED - Game crashes if you use 123456 shortcuts while the UI is despawning
FIXED - Inventory collision box too large
FIXED - You can resize a wheel you’re banding from and it breaks everything
FIXED - The “Select” rating text displayed at the bottom had wrong opacity at 1 star
FIXED - Moving mouse below inventory doesn’t trigger the hover and it looks bad
FIXED - “Move wheel” UI shows even when creating a new band
FIXED - Changing wheel size with bands attached to it despawns bands entirely
FIXED - Deleting an inventory item can cause the inventory selected position to go outside and crash
FIXED - Camera is very broken if you actually move the level around
FIXED - When moving a wheel in the editor, occasionally you’ll see a small spot from the tie trying to spawn.
FIXED - You can move a wheel into a collision with a band and nothing will happen
FIXED - Placing a wheel in a position that breaks a band prevents you from ever spawning another band
FIXED - Transition glint is drawn on top of the “can’t place here” cross
FIXED - Mousing over a band to cut it doesn’t immediately show only those colours
FIXED - When closing a band, there’s an ugly line that spans between the first node of the band and the closing nodes
FIXED - Improved how the finishing-a-band animation looks
FIXED - If you nearly let scissors cut but pull away last second, any band you mouse over next will instantly get cut
FIXED - Not committing to snipping a band, but holding the mouse down and then mousing over any band makes the snip sound play until the mouse is released.
FIXED - Wheel band required animations not working in HTML5 (floating point issue)
FIXED - Flicker in some collision cases of band being too long
FIXED - Window can now scale to any resolution
FIXED - Inventory can get locked open if you start band casting before it closes at the start
FIXED - New stripe: -4 spam in the console
FIXED - Can’t start editing until inventory goes away
FIXED - Inventory location is wrong if you change the window size
FIXED - Mousing over a wheel during a normal preview locks it into that preview instead of showing all colours
FIXED - Warning (!) icon is blurry

PATCHED - When you complete a band, sometimes the final stripe is in the wrong place (unable to fix this).

REMOVED - Prototype legacy stripe system
 
Last edited:
  • Like
Reactions: GoK

Mert

Member
I have following this for a while, as I told you before: Animations are very smooth and the colouring is just tooooo amazing!! Because of this, I'd had to rework on my current game 😅 (Yeap colouring!)

My best wishes for you, and good luck 💯
 

dadio

Lemon Overlord
Forum Staff
Moderator
Beautiful, clean visuals. Very neat mechanics.
Has potential to be a big mobile game.
Very curious to see how you "gameify" this.
Best of luck!
 
Top