🧵 OK, it's been a while but it's time for a GAME...

🧵 OK, it's been a while but it's time for a GAME DEV THREAD
This one will end up spread over several weeks as I'm pretty busy

I've always liked physics games, and Penga turned out well, so let's do another one!

The idea this time is to build a tower rather than pull it apart.
I've started off by setting up Planck.js similar to Penga, rendered with DIVs positioned relative to a point at bottom-centre. Got a few blocks falling onto a static platform; modern browsers should cope fine with dozens of objects

1rem in the CSS represents 1 unit in the physics engine, so I can easily rescale everything and only need to flip the y coordinate value

When a box is created, it's set up both in the HTML and the physics engine. 60 times a second the physics is calculated then boxes are repositioning/rotated

How I'm thinking gameplay might work:
You're given a set of different items to pick, drag them into place, then when that set's cleared the tower's measured and you get more

Breaking it up like that gives the game more structure & reduces issues with players quickly piling up iffy collapsing towers

I've set up a bar that blocks can be dragged from, obviously not very interesting when they're all the same size/shape, that's next thing to tackle

On phones I might need to position the dragged object above your finger if that helps with visibility

Yep that's getting more interesting, and I can vary density/bounciness/friction & have wonky compound shapes

Next: How should measuring work? How should the game deal with the tower filling the screen?

So, my idea is that when you've used the shapes you place a special item that triggers measurement. These special items can be 'residents' of the tower, so it makes sense you put them on top & its their elevation that matters
It also means the tower has to be stable for a while to count

Yep, that works!
I could make it so the game only ends if one of the special items falls in the muck... but then players would casually throw away awkward shapes. So you're going to have to keep everything muck-free

STYSCRAPER 🏗️🐷
Help posh pigs rise high above the muck by building a tower out of junk

It's a stupid pun but I think it works as a setting, certainly far better than some characterless Tower Builder thing

(generally, the more serious the simulation the more mundane/descriptive/ungimmicky the branding/theme should be; so something like Tower Builder would be more appropriate if it involved realistic materials & engineering)

I've refined the measurement process so that if the highest special item is moving downwards there's a longer delay and the line moves more slowly
That way, a sliding item or collapsing tower is less likely to ‘unfairly' increase your score, and it adds a little suspense

Penga is simply taller than the browser & lets you use native scrolling, I'm going to try the same here. Only worry is the possibility of glitches when extending game height & adjusting scroll position at precisely the same time

If you code your own scrolling it never feels the same, people are very sensitive to the precise behaviour of the touch/wheel scrolling they use all day

Current thinking:
- When measurement ends, extend game with enough space above highest item, but scroll down by same amount so change isn't seen
- Smoothly scroll up to give enough visible space above highest pig (not junk)
So it always keep the top pig in view, but there's room to build on top item

Seems to work well, it scrolls to position the red square at the bottom, then the last movement is me scrolling up to show spare space created due to red square not being at the top of the tower
I'll need to keep an eye out for glitches later when there's lots going on, graphics, etc

Added transition effects & cursor offset so the shapes seem to be pulled directly out of the bar; even at this early graphics-free stage it makes a huge difference to the feel

Spent a bit more time on this
Refactored how items are set up and tried to work out playable sizes/shapes. Currently they're all still boxes (some will be irregular) but it's working OK as a game, it's got that thing of being slightly frustrating but it's so quick & easy to play you have another go

If I hire someone, that not only requires money, I'll also have to carefully document everything and supply measurements and/or dummy graphics to make sure sizing & collision areas are right. And I'll need to limit fine-tuning

If I do it myself, it'll remove a load of uncertainty/faff/expense but add a different set of problems. I'd never call myself an illustrator, but I can sometimes fake it as a passable one if I pick the right style & the key images work out OK. It's a slog though

Originally I thought the game needed to be 'fair' in what items it offers, so I considered a tightly-controlled sequence or introducing trickier items gradually... but it turns out the fun of it is in being forced to try new approaches from the start, gives it that "one more go" thing

(That tower only works because they're all boxes, it'll be trickier once some are other shapes)

Currently each stage picks 4 'easy' items, then sets random one to a pallet to increase no. of those, then sets random one to 'difficult' item. From stage 5 onwards it's reduced to 3 & no difficult item

Graphics update: I've rummaged down the back of the sofa and found enough loose change to hire the first illustrator I thought of for this (they've drawn things with similar structures AND animals), it's going to look amazing

You can see why he came to mind for a game involving animals & constructing towers

Styscraper graphics DONE! This week I'll group them into sprite sheets and refine how the background works, then next week I might have time to get on with finishing the game

OK, after some fiddly measuring of sizes & positions I've got the item graphics in there, BUT...

...they're all boxes. Which, with a bit of a 'dead zone' around the edges, is fine for some things (the 2 items on the right) & no good for others (the 2 on the left). I'm going to have to do lots more fiddly measuring to switch their physics shapes to one or more convex polygons

The pigs have a variety of poses, but dynamically changing the physics shape would be bad for simulation stability (& gameplay fairness!), so I've got to find a common boundary that works OK for all poses, seems to be possible

Custom polygons are working nicely; I'm keeping them as simple as possible, so hopefully they won't harm performance
The centre of gravity of the chair has shifted rightwards, if you casually drop it it'll tend to bounce & tip over, that's initially surprising but then feels right

The pigs now also have a custom hexagonal shape, I've tried to make it reasonably generous in terms of flat spots on their heads & bellies
Next, I need to refine the actual gameplay, tweaking physics properties & how items are dished out, and make the pigs look around

I think this little screenshot sums up the strategic element really nicely; you're given all these different things and have to find ways to combine their heights & shapes to create stable structures, rather than just dumping it all into a messy pile. And it's completely different every time

One more screenshot for now; this started off as 3 ridiculous piles but somehow managed to bring it together

Pigs now randomly look around, look towards anything being dragged, and react when it all goes wrong

Fiddly details: the random looking around is 'debounced' with a counter to avoid glitchy-looking brief changes, it doesn't try to look at dragged item if pig is too tilted, and if you drag something near the top of a pig's head it stops looking upwards so there's a more obvious surface to land on

Something to think about: how to store/present scores
I've used different approaches for different games:

1. Show score, share it with buttons
2. Show score, also high score for current session, share high score with buttons
3. As (2) but high score persists in browser

Persisting the high score can sometimes make the game less satisfying, as that all-time best looms over every attempt, rather than getting more congrats for improving during session
It depends on how quick-fire the game is, how invested in each attempt, what kind of sharing impulse, etc

4. Show score, also high score persisted in browser, but share buttons are for latest score

I'm leaning towards that option (4) for this game, as it's hopefully got some lasting playability, and several minutes may be invested in an attempt, so preserving that achievement & reminding you of it probably makes sense
But it needs some thought

Got some scenery in (hills loop seamlessly for wide displays) plus a fly & wisps of green gas
Some nice detail & colour's been lost by blurring & fading things, might tone that down but it's important to keep the foreground clear & prominent

Added a big red X to mark where something first fell in muck, in case it's not obvious/visible by the time the user's looking at that area
Particularly on mobile, it's possible the fallen junk was off-screen, so the X is kept within view to indicate this (& conveniently gets cropped to an arrow)

(this is the kind of stuff that avoids a LOT of confused players and tedious "the game's broken" comments)

I've also made the two pallet types differ in shape a bit more, it's subtle but makes you think more carefully about how to use them. I want items that vary a lot but can fit together neatly in interesting ways if you're lucky & skilful

I'm sure some players will manage to create towers twice as complicated as this, fingers crossed it'll run fast enough 😬

(if frame rate drops, it runs the physics sim twice per render to aim for 30fps, so there's some leeway)

Here's a 19m tower; I had to zoom out & grab a screenshot before it collapsed, but game could store item positions whenever the score updates then have "View Tower" buttons alongside score & high score so you can admire/show off your architectural masterpiece

Just realised the green gassy wisps rising from the muck could be used for something else - they now also get emitted from the rear of left/right facing pigs

Added a chain when you're dragging an item, just as another cosmetic touch
(Won't be fully finishing off this game & launching it until I've got fewer distractions & have recovered from my op, so probably late Feb)
#styscraper

Doing bits & bobs when I have the time. Just added several labels explaining how to play, hopefully should be fairly clear

One problem I noticed fairly early on: you build an amazing tower but can't see all of it and it falls apart as the game ends. You never get to admire your handiwork or show it off!

So I've added the View Tower button, which recreates the visible state from when the final height measurement was taken, scales it to fit the browser, and hides other clutter

Sometimes your tower crumbles just as it's being measured, so the snapshot ends up like this

(When this happens, the measuring line doesn't go through the middle of the pig as it was still rising when something hit the muck. I'm sure I'll get at least one grumble/query about this, but it's the only way measuring can be fair, robust & suspenseful)

Remaining to-do list to tackle when I’ve recovered from minor op I’m having next week:
- Optimise images
- Sound effects
- Possibly music?
- Link preview image
- Browser testing
- User testing

Just optimised the images (lower res for blurrier stuff, then ImageOptim), whole game excluding sounds is 1.4MB

Looking forward to doing the audio in a couple of weeks, will have to find lots of piggy snorts & squeals

#Styscraper sound effects DONE, all in one file that the code will play as segments ("audio sprites")
It's likely one or two will change though, often the "timbre" of a sound will be obviously wrong once it's in the game

I'm also going to put in a placeholder music loop at low volume and experiment will raising its pitch as the tower gets taller, the idea is that it'll add to the tension but it could just be annoying
If it does work well, I'll commission an original loop

All of the sound effects are from https://freesound.org and CC0 licensed. Occasionally I've used commercial sound effects in games for awkward/obscure sounds, but there's always a slight worry about somehow falling foul of small print

Freesound

freesound.org

OK, it's a NO to music that speeds up & rises in pitch - whatever the initial tempo & metres-per-semitone, it became annoying & overly frenetic. Yes, the game gets tense, but in a slow-paced way that varies each time
Probably going with farm/countryside ambient background loop instead

I might see if there's a clever way I can add a creaking sound for tall, wobbly towers, eg check if enough items have been used and the highest pig has some horizontal velocity but virtually no vertical

I've sourced creaking sounds plus a tractor and crow I can throw in for atmosphere
New plan for background is to have a countryside loop that fades to wind noise when you're high up, a little fiddly but should work and the game does start feeling different once the tower's 10m+ high

#Styscraper audio coding is almost done, only a couple of annoying repetitive sounds need replacing
I've use 3D spatial audio for most of it, which adds some stereo but is mainly so that sounds change as you build higher & scroll away from things, changing the feel and reducing audio clutter

In Dog Poo Golf I coded the spatial effects from scratch as I needed careful control rather than realism; for this Howler's spatial features are working OK, having to cheat a bit with positioning though to get the right feel
https://github.com/goldfire/howler.js?tab=readme-ov-file#plugin-spatial

GitHub - goldfire/howler.js: Javascript audio library for the modern web.

Javascript audio library for the modern web. Contribute to goldfire/howler.js development by creating an account on GitHub.

GitHub

Anyway, the game should be going out to testers this week and hopefully live next week

🐷🏗️ Testing’s gone well, so #Styscraper is going live TOMORROW
Follow @VOLEwtf to get the launch announcement ASAP

VOLE.wtf 🐹⁉️ (@VOLEwtf@crispsandwi.ch)

🐷NEW GAME🏗️ Get building and show off your tallest towers! https://vole.wtf/styscraper/

crispsandwi.ch 🥪🐘