Civilization VI UI, but made in Webflow (a no-code tool)
webflow.com
webflow.com
Still, Civilization games have impressively complex UI, so even to approximate that is quite a task.
as a solo hobbyist game developer that can dedicate a couple hour/week a tool like this can save me months of tedious work, as long as establishing a two way data channel between the ux state and the game state is easy enough.
OTOH I'm willing to bet that if someone built Civ 6 in a no/low code tool the API costs would be astronomical.
Apparently he's having a livestream the 29th showing how he did it.
Message Box: Before you dig in, note that while sites built in Webflow work in all modern browsers, we don’t actively support use of the Designer in Mozilla Firefox. For the best experience, use the Designer in Chrome or Safari. If you’d like to see us support this browser, let us know about any bugs you run into. Happy designing!
This thing loads faster than my actual copy of Civ VI.
My biggest frustration is that the game crashes when it attempts to submit a play by cloud turn if webhooks are turned on. And it has for a year now. With no indication it will ever be fixed.
And don't get me started with the game on MacOS completely ignoring mouse clicks for the right third of the screen.
They also completely broke cross platform play a while back, although there was a hack to "fix" it (fix meaning per-turn de-syncs)
https://i.imgur.com/zAlvIcv.png
Had I instead got a minimum wage job, I'd have £4,000 more money.
Thanks a lot for sharing it along with your kind words and constructive feedback. Happy to answer any questions you have. I'm a product designer specializing in software prototypes and MVPs. I'm on a mission to unlock and share the full potential of nocode tools.
Unfortunately, they are often viewed as primitive website builders. So I rebuilt Civilization VI's entire UI and UX to demonstrate how far you can push nocode today. This is the largest cloneable Webflow project ever released featuring 12,400 elements, 1800 styles, 1200 assets, and 400 interactions. The interface can easily be hooked up to a backend to incorporate functionality. This is not a playable game but a demonstration of how far we can push nocode. It took roughly two weeks during my spare time. This prototype is a loving tribute to Sid Meier and one of my favorite games of all time. I've integrated all 46 leaders along with their soundtracks and nearly every feature in the game. The project stands at a whooping 124GB and runs on one single screen. So yes, you may notice lags from time to time depending on what machine you're using. The next time someone tries to dismiss nocode or asks you what's possible, just ping them this link.
Civilization.webflow.io
Learn more on Webflow.com/sarkis
Follow my work on Twitter.com/sarkisbuniatyan
Watch the masterclass tomorrow on YouTube https://www.youtube.com/watch?v=ZXAGmosa7R8
Webflow engineer here. (On the accessibility team.) We are on a mission to dramatically make it easier to build for the web and are hiring across a bunch of roles: https://boards.greenhouse.io/webflow.
Feel free to reach out with questions about the roles. Contact me at (my first name) at webflow.com.
Everything will eventually end up in a browser :)
There's also some differences from the original
* there's a weird parallax effect if you move the mouse around
* the cursor rotates when you hover over an element, so it ends up pointing straight up
* the menu opening/closing transitions
* when you're creating a new SP game, the leader/civilization information that you get when hovering over a civilization is missing
* none of the sliders work (they "work" when you hover over them, but they don't stick after your release your mouse or leave the hover area)
I'm a product designer and I love Civilization.
I made some personal additions to the prototype that I felt looked and worked better in my subjective opinion.
I integrated nearly every feature, left out some details because the project was already too heavy. But things like the leader info could be easily added.
The sliders aren't meant to work but can easily be set up with logic. I left it out to avoid confusion.
In addition to making additions to the prototype, I also discovered dozens of mistakes across the UI and fixed many of them or completely replaced them.
But to your point, isn't what you described most of the web?
I wonder, is the AI any better? (obviously this effort maybe isn't about AI).
I've played a lot of Civ but VI really turned me off with the AI's random decisions to just rage quite / inability to actually fight a war with ANY coherent effort.
I don't think it does.
Standard Caveat: Not a lawyer. Also this is based on US Law.
This isn't the game itself, just the Game UI recreated in Webflow.
So while it doesn't recreate the game per-se, it does use image assets which are likely copyrighted by Firaxis.
In my limited legal understanding--assuming the author did not first seek permission to use game assets, the author could claim defense by Fair Use doctrine, that allows copyrighted materials to be used in limited cases. For example using a short clip from a movie as part of a movie review, or an excerpt from a book in a book report.
In this case, the author could claim the images were used to teach people how to use Webflow, but again my limited legal opinion is that Firaxis could counter that claim by pointing out the author isn't a teacher, and this is not part of any sort of educational series.
The author could instead claim that the images were used as part of research into the capabilities of Webflow. Again, there Firaxis could simply counter that this was not done in conjuction with any research, and no research materials were published.
Civilization's official twitter account congratulated me already on Twitter and I hope my work inspires more people to dive into nocode tools.
I played with some random no code tool I could find a few years ago, mostly in the mobile sphere and they seemed very bad producing bloated cookie cutter applications. Ivenever beleived no-code tools would ever see much adoption but I'm not sure anymore.
I would advise developers worried about these kind of tools to focus on the skill that really differentiates a developer who is basically effective from one who isn't, which is data modeling.
These things shine a spotlight on your high level data skills because you can't just code around bad database design decisions early in the project.
When the data is exported, your low level attention to detail and consistency come into focus. Did you encode Yes/No questions consistently? Were there free text fields where there should have been predefined options?
These low code/no code options are just revealing that coding was never the hard part of making software.
Could you please elaborate? What tools do you interact with? Is this mostly backend work, getting the data out of no code tools for further processing?
The other part is building custom apps that run alongside the no-code app, often backed by the API. I've implemented some fun things like transactions that lock so you don't have simultaneous write problems and full text search.
If you are in that business, the distinguishing features that I would look for is being able to use the relational model, an API or way to run code, and regulatory compliance (HIPAA, FERPA, 21 CFR Part 11). Native transactions would be a miracle (for instance update a record and associated child records and roll back if validation fails).
I'm thinking about picking up some freelance work in this area. Not really sure where to start
I'll need to check out some of the no-code tools again, the world has come a long way from WYSIWYG html tools.