DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,547 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for BOTS: Mischievous Pixel Avatars
Ciprian Popescu
Ciprian Popescu

Posted on

BOTS: Mischievous Pixel Avatars

This year I have coded and launched a small app (available on Google Play Store and as a PWA), where you can generate an avatar (looking like a square bot), and give it a name, a rarity/probability and a class. The name is BOTS.

Iron Carnival: BOTS

Iron Carnival: BOTS

It started small, mostly in JavaScript and Canvas. Later, a database has been added, but things didn’t go according to plan, and I switched from PouchDB to SQLite3 to SleekDB and then back to PouchDB. When the number of bots grew from a few to a few hundreds, I decided to go with a proper PHP/MySQL implementation and a membership system. This is how BOTS 2 came to life – a user-generated Bot app, with no constraints, no microtransactions, no time limit.

I am not looking to keep the Google Play Store app any more, so I will turn this into a website (also PWA-ready), with full membership capabilities, user ranks, badges, points, profiles and more.

The logic behind the main Bot generation is based on random settings, while some of them are linked. There are custom eyes, custom textures, custom colours, random elements and items, random names, random classes and random rarities.

Iron Carnival: BOTS

This is how BOTS started. We moved all the code into a Canvas element and started building everything in there, with zero HTML or CSS. BOTS evolved, and we got around 10 different parameters to play with and randomize their values. As my son wanted to be able to play with these parameters, I exposed them all as HTML checkboxes and dropdowns.

Fast-forward a few weeks, I had a fully working PWA and a native Google Play app on my phone. As the β€œrequirements” evolved, I needed to save the generated Bots in a small database. So, as I was saying in my previous article, I switched from PouchDB to SQLite3 to SleekDB and then back to PouchDB. When the number of Bots grew from a few to a few hundreds, I decided to go with a proper PHP/MySQL implementation and a membership system.

Fast-forward this week, I have a fully working website with a membership system and a dynamic Bot generation system. There are badges, texture packs, and upcoming trading and collection features.

One of the features under heavy development is a parameter-based generation system with lots of variables. And I mean lots.

So, finally, here it is, the BOTS website – Iron Carnival: BOTS.

I wrote more about the process here – BOTS v2: Development Update.

Top comments (0)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!