Left bottom in the above image is an inked drawing on isometric paper showing the signed off concept artwork for a game where you drive a drone around a 2/3D isometric grid. The idea is that using the WASSDFZ keys you can steer the drone to and through any of the unoccupied spaces in a 4x4x4 grids space populated with isometric pixel art.
We wanted to use some technologies already familiar to the shop and get going as quickly as possible and found a nice pixi-react repository that combined the stable flexibility of React and the no nonsense 2D rendering library Pixi.js. This gave us our first emergent design constraint: a single point of view and being okay with the drone being completely invisible when behind some scenery [perhaps a later version could make the assets fade out, but for now it’s a quite a challenge for the player]. We did a further pencil drawing on isometric paper where did the sprite offset sums by hand for each of a 1x1x1 2x2x2 and 3x3x3 as well as 1×2 and 3×1 grids. This process helped better visualise the 3d space we would be working with as well as providing some useful test cases for when we start coding.
The IDE in the image above shows the prototype layout engine for the game. This is set next to an image of the working prototype left. Here we display in the isometric art in the loading screen map. This is rendered from mocked json to demonstrate how our procedurally generated maps will be converted to tile positions and with the drone sprite resting in it’s save space. For this we used the Pixel Drone asset from knik1985 on opengameart.org and the iso-64×64-outside.png isometric sprite sheet from likely the same website.
I wanted to explore the cutting edge of easy deployment services for contempory full stack JavaScript applications. NuxtHub seemed like a good place to start. Here is my journey.
My ideal domain was not available – I bought a good enough one todone-list.com Total Spent so far: $10.44
Reading ahead in the documentation the first thing I needed was a Cloudflare account. I decided to create a fresh one for this project to keep everything at factory settings throughout. Emerging from a LTS project and blinking in the dazzling light of the modern js ecosystem, I had run through numerous boilerplate projects which used various external auth packages and image hosting plaforms and I wanted as much as possible a single sign in for the project and that is one of the reasons I went with NuxtHub really. It failed at the first hurdle in some ways but they promised that all I would need is a free tier Cloudflare account and they would do the configuration so that sounded close enough, with Cloudflare handling the file storage, database storage and web hosting, and NuxtHub handling Cloudflare as as well as authentication, user management and the whole CI layer, I quite happily visited dash.cloudflare.com/….f/domains/verify-email and opened my new account.
The onboarding was easy annd straighforward and working through my admin.hub.nuxt.com/binary-geometry/settings/cloudflare page was an AI guided cake walk.
I get a warning, but I’m trying to launch for very little money
You are using Cloudflare Workers Free, we highly encourage to upgrade to Workers Paid plan to remove the 1 MB limit on the final, compressed, bundle size and more. https://dash.cloudflare.com/3f09f9b5a03377b4020065005760709f/workers/plans To enable Blob storage, make sure to have a valid R2 subscription on your Cloudflare account. https://dash.cloudflare.com/3f09f9b5a03377b4020065005760709f/r2/plans
Lets see for now
I needed to link my github account so that I their actions protocol would act as my CI trigger. The automated set up worked for my requirements.
I choose the let them do everything option and the “Gavarnie SASS Starter”
New project >> Clone a template >> Gavarnie. Added this to a private GitHub Pro repo.
https://github.com/BinaryGeometry/todone-list
Which is cool, since i signed up with github, this lets me just follow the guide to reimport my generated repo and I already have my first failed build!
This is where I finally got stuck, everything seemed to work, but the link to my preview sub domain is not working
I looked on the cloudfare page for my new app and could find a nice reassuring Build Failed message, no weird config hicups – just a straightforward thing to action in the deployment log
Please enable R2 Storage on your Cloudflare account to leverage Blob storage and try again: https://dash.cloudflare.com/3f09f9b5a03377b4020065005760709f/r2/plans
Cool, I enabled the bucket, so far I have only had to spent my initial investment of a custom domain.
The next error message had me worried, was this a really dark pattern to get me to pay for something used by the suggested theme?
This feels pretty sub optimal, like I’ve connected everything up using the automatic on boarding and need to spend 250 just to keep going?
I looked at the repo for the theme I’m using, noticed that it does warn me on the front page Readme that O
I need the Pro Licence, reflected on how much bang I’m getting through just clicking through an automated process and figured that maybe a billable day for the all the added value continuing with this theme is quite is worth it all things considered and that I was happy spending some money to support the project I was enjoying.
I had to laugh when i realised i was paying Lemon Squeezy Plc
After a little confusion with my card not working, and eventually getting an SMS from my bank asking me to reply 1 if not fraud, i make it to the confetti modal.
Finally I have a Nuxt UI landing page with a custom logo and favicon and hero at a real URL behind a watertight SSL gateway.
Next steps are to get the database running locally and on production. This didn’t go quite so smoothly and I’m going to revisit this article with a linked article of why bleeing edge Nitro and Cloudflare R2 buckets can cause a jilted developer experience on some machines.
