Building the next-gen fashion game [Flarum inside]

clarkwinkelmann

Hi there !

This post is sort of an ad, but because nobody likes ads I'm turning it into an article about one of my projects. At the end you will know how you can help me if you're interested.

I'm currently working on a project called ZetaMode. It's a fashion game, targeted for France (website is in French). But if there's interest we may translate it and/or create an English side of the community.

For the last two years and a half, we developed a closed alpha with a small group of people. The project is lead by two person: My sister and I. I'm the web developer.

This is my biggest project to date. It started with a small vanilla PHP project, with a custom routing system, a custom templating system, loads of Javascript files, a hell of CSS. A lot of things changed since then.

But first, I should explain why I'm into this. In 2011 a game called Fashiown was taken down, apparently because it wasn't making enough money for the company behind it. Loads of people, including my sister were very sad. No other game offered the same kind of gameplay, mainly around models and stylists. See, most games around here don't allow people to create their own clothes. Our concept is more targeted at teenagers and older people, because a lot of things will require the players to actually think. Of course, anybody could just play our game for the dress up part, but they will miss a lot of the fun !

So, there was interest in that sort of game, and building a game like this was a good challenge for me. A quick look around will show you that most online fashion games have over-loaded user interfaces, pink everywhere, and, more dev-oriented, bad security practices, awful URL schemes, lack of extendability, no API, and closed source code.

So my goal, while creating this new game is also to raise it to the high standard of today's web practices. This includes:

Built on top of a solid framework
Version control, automatic deployments
Use of open-source libraries
No Flash (of course)
Clean and modern user interface
Public API, documentation for third-party integrations
Open-sourcing of most of the game's assets

Now, back to 2012, when I started coding on the alpha version:

I discovered Laravel, which was version 4.2 at this time. Bad luck, Laravel 5 was released just after I finished migrating my PHP code to 4.2. A year later I migrated the whole thing again to Laravel 5.2.

I also discovered React and Backbone, which made things a lot easier for the Javascript part. I switched from vanilla CSS to SASS, I added Gulp tasks and unit testing for PHP and JS.

Soon in the process, deploying this big app became a pain. I created a custom script, which would run git pull, php artisan migrate, gulp and lots of other things on my custom server.

It was far from efficient. It was slow, unreliable. I signed up for Laravel Envoyer. Things became a lot easier. I could ship several updates a day without worrying too much.

Then I started using more Laravel features: scheduled commands, cache, etc. and I was starting to have trouble configuring my machine. Conflicts with node versions, permissions issues on filesystem, cron config, and overall slow GPU... I switched for a Digital Ocean Droplet managed with Laravel Forge. In less than an hour everything was running really smoothly. I also added CloudFlare early in the process, this sped up the requests, mostly for images.

Now that we have a solid concept, we want to ship our app to the world. But after 2.5 years of patching, changes to existing features, migrations canceling other migrations, etc. the code needs a complete rewrite. It is also time to put a nice GUI on top of the current application.

And what about Flarum ?

I'm coming to it. Remember when I said everything was custom-coded at the beginning ? The forum was, too. And it survived the two and half years. I didn't go with a third-party application because our forum needs a lot of customization. You need to be able to embed clothes, photos, and other things from the game easily. It also needs to be connected to the permission system of the game, connected to the notification system, etc, etc. And most forums suck at this. So I sticked to my custom version.

Now, a few months ago I looked again at the list of available forums. I still don't like a lot of them. Discourse has a nice GUI, but I don't know why, I just don't like it. And then I found Flarum. It has the bare minimum of features, which is great, and has an amazing extension system.

So here's the plan: if we ship our beta version, it will include Flarum beta too. As a webdeveloper, I'm not afraid of using Flarum for this. I hope I'll be able to contribute back to Flarum in the process, and that both projects will reach stable sometime later ?

All this sounds great ? We are preparing a Kickstarter campaign to fund the development of the beta version (which will mostly be coded by myself). So I figured I could announce it here to get a bit more exposure.

Of course I cannot just talk about the project without taking about language. As said above, the whole thing is in French. But we plan to release it in English at some time too. English version will be a stretch goal in our campaign.

I have not yet translated the home page of the project <https://zetamode.com/> But if you're interested in just say it and I'll move the translation of that page up in my TODO-list so you can get a more in-depth description.

We're currently doing a presentation of the game Tweet-by-Tweet on our Twitter page: <https://twitter.com/zetamode> (still in French, sorry !) Following our Twitter is the best was to stay updated on our project.

Still there ? Want to help me and the ZetaMode team ? If you know anybody interested in online fashion games and specifically the design of clothes in image editors, you can show them our Twitter page so they can have a look. We will also release videos in the near future (We'll make sure there are subtitles). And if a lot of people request an English version we might go international sooner ! If you're interested to code things with me, feel free to message me on Twitter @clarkwinkelmann. You can also wait for the open-sourcing of parts of our code if the campaign is successful.

Thanks for reading !

In case you skipped to the end here are the useful links (French):

luceos

clarkwinkelmann big wall of text. Your project sounds amazing but lacking a clean minimum viable product. With some proper project management you'd never had done any rewrites. From my point of view you've been making the project too big to start with (forums, notifications, just look at how many features of laravel you mention). Some of the wisest lessons start ups learn is to get to market as soon as possible and listen to the needs of the many.

Doing the above would for instance have guided you in an early stage to the conclusion that your own voiced fear is valid; supporting the English language. Now I know the French are a proud people, but by ignoring that obvious blocking issue, you're burning your bridges before you finished.

I have much more to add to this, but sadly my laptop battery is almost depleted ?

clarkwinkelmann

luceos wise words ? Thanks.

I learned so many things since the launch of this first version !

At this time our concept was still not ready, but we needed a platform to experiment things with our small community, and I built it with the tools I new at this time ? Far from the best. We then added layers on top of it. It was never meant to become the official product.

If we succeed with our campaign, I'll have time to start again with a solid framework and, most importantly, far better specs !