next »

[Prodigga]

Mowing Franchise RPG

Recruit and train the most elite mowing crew on the planet! Slay lawns, tame hedges and cleanse gutters as you progress through a world full of untamed gardens.

Pocket Lawns is slated for release on Android and iOS.

We are currently in the prototyping stage, so keep an eye out for lots of cool gifs and the odd technical post here and there.

The primary developers are myself and my friend BillyGoat. I am the programmer, and he is the artist (but there's also a fair bit of overlap!). Billy came up with the original concept for the game as a university assignment, we've partnered up, fleshed out the mechanics, and we're putting the game together from the ground up. Billy said he was keen on posting screen shots of the old project so expect those soon.  

[BillyGoat]

Hey everyone

So As Tim briefly mentioned, Pocket lawns has been a game in the making for quite a few years.
I created a very basic lawn mowing game while i was learning to program, and then a few years later i created another version of part of the game for my University project which is what i'll be posting screenshots of.

I have a brief video on where the previous version of the game was at which was used as part of the submission for the University project ( hence the time-lapse ) Note that what we are building now is quite different. Although still follows the same premise.

A previous iteration of Pocket Lawns

I've decided to stay with the low poly art for Pocket Lawns, although i wasn't quite happy with how it looked, so there will be quite a few changes in that department also such as baking ambient occlusion per scene for all static objects for nicer gradients, along with Luts for color grading the environments which i'll post more about later.

Here's some images from the previous version of the game.

An image from the previous version of the game.

[cow_trix]

Looking good guys! Love the toony aesthetic.

[Excy]

The art for the guy reminds me of Wind Waker, which I guess is funny considering the game is about cutting grass.

Looks good, keep it up.

[BillyGoat]

Thanks for the kind comments
Hopefully the new direction i'm taking the art is still to your liking :D It's still very much the same aesthetic, just looks better haha.

We're starting to bring to life the "Over world" map, where you drive your employee vehicle around to various jobs in the Pocket Lawns world. Discovering Unemployed workers to hire and enter levels.

[BillyGoat]

Some basic block in for how the levels will work are in place. Basically you have a "day" to complete as many of the jobs in the street as possible. You enter the level with your team of employees, and from there you disperse them onto the properties and manage their activities, placing them onto different properties when they are finished in order to complete the houses as fast as possible before the day is over. The GIF is currently only showing the 1 job of cutting a lawn, although we have multiple that will be required.

[Prodigga]

Hey ya'll thought I'd put together a few more gifs to give a closer look into the 'level mechanics' featured above.

You can drag and drop your workers on to different 'jobs' in the level. Billy already mentioned that we'll have more job types! We we're thinking of making the job that you are hovering the worker over become 'highlighted' or 'outlined' so you knew what job you were assigning them once we start adding more jobs into the game. We're just prototyping at the moment, so we probably won't look into that for a little while though.

Drag and drop workers to assign jobs


Drag and drop workers between jobs

[BillyGoat]

Put together a mock up of the "Loot box's". You'll be finding these appearing randomly around the Pocket Lawns world and as rewards for specific things. These box's will contain goodies, ranging from character customization items, consumables, currency, and special company equipment.

Loot Toolbox

[Prodigga]

Hey guys. Today I spent time working on the job system a little more. I've added in a few different types of jobs for the workers to perform. (Hedging and guttering). We've added in a "work time" for each type of job, as well as how many points that job grants you for completing it. (IE trimming hedge takes 3 seconds and grants 6 points). These points go towards your level progress and determine your star rating for the level!

Currently it is all functional but there is no UI so nothing really to show. Billy is busy putting in a UI and will be posting gifs tomorrow of the new jobs!

I thought I would show off our shader for Pocket Lawns. We are creating our own "uber shader" for Pocket Lawns. It is optimized for mobile with a lot of stuff stripped out compared to Unitys standard shader, and also has some cool effects built in!

Since the entire screen will be filled with pixels using our shader, I've written in LUT color grading and a vinette effect straight into our shader. Normally these would be post processing effects and that kills performance on mobile. With this technique we get it "for free". (Obviously there is the actual cost of performing LUT color correction and calculating vinette, but no where near as costly as stepping through all the pixels on the screen 2 extra times - yikes!)

The settings for the LUT and vinette are global shader variables. I've put together a script to let Billy change the LUT and vinette settings "on the fly" (both play mode and edit mode) so he can iterate quickly and get the look he is after.

Here is what the script looks like:


For those who haven't used LUTs for color correction, the workflow is really awesome. You bring the "stock" out in to Photoshop, along with an "uncorrected" screenshot of your game. You apply whatever color adjustments that you like to get the look you are after. You apply the same corrections to the LUT texture. Then you save the LUT texture and now you've essentially "baked out" your color adjustments into this LUT texture. The shader color corrects every pixel using the LUT.

Here is a black and white example, including the LUT that was used:



And as a bonus, here is an exhadriated vinette to show it in action:

[DireLogomachist]

Hey that's pretty awesome! I'll have to try that out sometime.

[Prodigga]

Hey guys, didn't have much time to work on things today, so Billy will be showing off the things he has been working on next time! Here is an update on what we've done today.

We were getting a little bit annoyed with the drag and drop mechanic with the workers. Visually, the worker is floating up in the air when you are dragging him. Say you are dragging a worker around and want to make him cut a certain grass block. You drag him over to it - your finger is pointing at a grass block on the screen. But when you release the worker, he has to first "fall downwards" since he is up in the air, and then he has to move forward to approach the grass block you were pointing at off in the distance. In practice it felt about as awkward as me trying to explain it to you guys.

Ideally the worker should be placed exactly where you are pointing. We've done just that and here's what it looks like now:



Moving on: the Pocket Lawns Standard shader has been refactored quite a lot. The various parts of the shader has been split up into CGInclude files, mimicking what Unity does with their shaders. The biggest advantage to come out of this is that we can reuse use our color grading and vignette code in any new shaders that we write just by doing an #include "PocketLawnsColorGrading.cginc" which is super awesome.

Also, we've gone and added transparency support to our standard shader. It is all using a single shader, and if you've ever written any shaders you might be wondering how it's done. Normally, you have to specify the blend mode and render queue within the shader file. So a shader will either be opaque or transparent. It can't be both, as it is "hard coded" in. Well, the Unity Standard Shader somehow does do both in the single shader, so we downloaded the build in shaders and tore it apart to figure out how it was done.

It turns out that through a custom shader GUI editor script (similar to custom inspectors, but for shaders instead), you can add RenderQueue overrides and other overrides. This is basically how Unity supports both opaque and transparent render modes in the same shader (where normally you'd have an exact copy of the shader with the only change being that transparent BlendMode/RenderQueue details hard coded in as apposed to opaque BlendMode/RenderQueue - you can see how that would be a PITA to maintain!)

All this effort means we have a single shader to maintai. We don't loose any performance from supporting all these features either! Unity multi-compiles every possible permutation of configuration options of the shader and uses the appropriate version based on the active materials settings. (IE disabling LUT means that unity uses the version of the shader with the LUT code "stripped out" completely - this is all handled automatically which is awesome)

Anyway, here is the fancy new Pocket Lawns Standard shader editor:



We had an issue where houses would block the players view of the garden, and so we wrote a script to fade away the building when it is blocking the players view (using the new transparency option in our shader!)



Thats all for today. 

[jctwood]

Wow i really love this project! The drag and drop seems so intuitive and watching them mow is satisfying ^_^

[BillyGoat]

Yiewwww, thanks Jctwood!
Lot's more exciting stuff on the way to share hopefully soon so be sure to check back in

[BillyGoat]

Progress bar and point "bubbles"


We spent some time working on in game UI, there's now an overall progress bar at the top of the level, the end on this bar represents 100% of all jobs in the level being completed. This bar is then broken down into sub bars which indicate the type of job that fills that portion of the progress bar. ( I'm saying bar a lot sorry haha ).

Along with this there is a "Bubble" animation which shows the points earned by completing different jobs. Harder jobs earn more points to get towards the 100% goal.

We also chucked in one of the house assets from the previous version of the game, although i think i'll re-do these houses to better fit the style.

Employee UI breakdown


The employees now have some basic UI which represents the different values the user needs to know about.
This being
- Current job progress.
- Employee Stamina (We haven't talked about this much yet, but we'll explain this more when we go over talent trees and specs).
- Ability cool down.

When the ability cool down has fully recharged a new Ability UI element will pop up above these bars, of which the user can click the button to activate it and thus restart the cool-down. Currently these bars aren't hooked up to anything, but we'll be sure to post something here when this is all moving and lookin snazzy.

[BillyGoat]

Made a Gif to better explain how this will work.
The green "Job progress bar" slows down once the employee stamina has been used up.


If any of this looks strange to you or you have an idea how it could work better please don't hesitate to let us know in the comments :D

[breakfastbat]

Pocket Lawns is such a good game name

[Prodigga]

Thanks man, another quick gif for today - we've added in a selection highlight thing so you can see which job you will be assigning the worker to. Small update, but really useful feature!

[Prodigga]

Hey y'all! Sorry we've been so quiet, we've been so busy as we've both returned back to "real" work

Not much progress gameplay wise, but the prototype is nearing completion.

We've taken some time to explore some UI options. We found a style we like and I spent some time putting together some tools to help as achieve the look we want.

The style has a lot of rounded cornered panels with drop shadows and outlines. We wanted it to be easy to put together in the editor, and run well on even low end devices. We also want to create a UI that scales correctly to match your devices native UI. This means physically consistent UI sizes regardless of screen resolution and size, and it means coming up styling rules for text/padding so that everything roughly matches what you would see in the devices native UI.

Here is a mock-up scene with our UI:



Our UI contains no images. The above was composed using our RoundedRect UI script, SVG UI icon script, and unitys build in Shadow and Outline UI effects. Because everything is mesh, everything stays nice and crisp at any resolution without needing huge UI textures.

Here is a picture showing the physically consistent sizing across 2 devices:



A breakdown of all the goodies that went into making this:

RoundedRect (Graphic)

The rounded rectangle script implements unitys MaskableGraphic class, and generated the rounded rectangle to fit the RectTransform. This means it "just works" with the UI system. (Masking, tinting, click detection, layout placement etc). And because there is no custom material or shader required to render the rounded rectangle, unity is able to batch the rounded rectangles together (regardless of color, border radius and border pinch) which is awesome for performance.

Note the gifs bellow are using the built in UI "shadow" effect to generate the darker border at the bottom of the rect.

We can configure the radius:



And the pinch of the corner:



Pointer (Effect)

An effect that can be attached to any UI graphic. It appends a triangle pointer to the graphic that points at another RectTransform. Again, using Unitys UI effect "pipeline". This means that I can apply a shadow effect to the object and the shadow is applied to the appended triangle pointer too. It "just works".

It has 2 modes, one that points exactly where the other rect is all around, and another mode that clamps the pointer to the sides of the rect.



Sheen (Effect)

A sheen effect to play over UI graphics. Think coins, or flashy buttons. There are some pretty messy ways to achieve this effect... For example, you can treat the parent graphic as a mask, and add your sheen effect as a child to it. You can pan the child across to give it a sheen effect. But this is super messy and pretty expensive for a small effect. (You need 2 seperate graphics and a mask, all of this breaks batching too.). Our approach uses a custom shader to render the sheen, and all sheens using the same texture are batched together. Sheen properties (like Width, Pan Speed) are encoded into the second UV channel of the graphic, so it means you can have lots of sheen effects with lots of different properties, all without breaking batching. Kind of overkill, but it was fun to implement!

Here is the effect on a button.



This script also uses the appropriate UI pipeline for effects, so you can mix and match it with other effects. You can see that in the above gif (the shadow and outline of the button receives the sheen correctly). In the gif bellow, I've mixed the pointer effect with the sheen effect.



We can even repurpose the sheen for other cool effects, like this loading bar!



SVG UI Mesh (Graphic)

This script lets us plug in SVG files and treat them as regular UI images. Crisp icons, low file/memory footprint!

Here is a cog SVG adhering to its RectTransform.



Again, since we are using the proper UI pipeline, it means that our icons react correctly in layouts, for example:


Hopefully more gameplay related updates soon. 

[Davi Vasc]

Awesome cartoony art style. Who would have thought that hairy middle-aged men could look so adorable.