9 ms·
Civilization VI UI, but made in Webflow (a no-code tool)
- daolf 6y agoAll credits to https://twitter.com/SarkisBuniatyan https://twitter.com/SarkisBuniatyan. Apparently he's having a livestream the 29th showing how he did it.
- timdorr 6y agoYou can open up the "source" in their preview editor here: https://preview.webflow.com/preview/civilization?preview=d9435087458c2a7101726d996c13b553 https://preview.webflow.com/preview/civilization?preview=d94...
- komatsu 6y agoI fear that this is going to be encountered more and more often: 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!
- jeroenhd 6y agoThat explains why I couldn't get this demo to work for me. Sad. Guess I won't be recommending WebFlow to anyone.
- probszachsean 6y agoJust use the live site link, it'll work in any browser. Only the Designer (the tool that you work in to build the websites) don't work in Firefox, every published site does. https://civilization.webflow.io/ https://civilization.webflow.io/
- Elzair 6y ago$#17! It seems like I need to switch to Chromium. Le sigh.
- searchableguy 6y agoI thought show HN was for original authors.
- pvg 6y agoLike the sibling comment says, Show HN is for your own work. Take a look at https://news.ycombinator.com/showhn.html https://news.ycombinator.com/showhn.html
- SarkisB 6y agoSee you there :) https://www.youtube.com/watch?v=ZXAGmosa7R8 https://www.youtube.com/watch?v=ZXAGmosa7R8
- eloff 6y agoThat's completely insane. Clearly WebFlow is more powerful than I thought. Props to Sarkis for pulling this off.
- non-entity 6y agoThis is certainly one of the most impressive works I've seen done with a no-code tool.
- brianbreslin 6y agoThis is bananas. Didn't know webflow was that extensible.
- odomojuli 6y agoAmazing. Some of the buttons don't quite register or click on time but the functionality seems to work all the same. Couldn't quite figure out how to found a city or move my warrior. This thing loads faster than my actual copy of Civ VI.
- non-entity 6y agobit of a random tangent, but Civ VI does not run well on Linux at all, even with good specs, even unplayable depending on you exact OS.
- zimmertr 6y agoI have it running on Arch Linux about as well as MacOS. Which plainly speaking means absolutely awful. 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.
- non-entity 6y agoI tried it on several Ubuntu versions and it was completely unplayable. Extreme lag in single player and even attempting to start a multiplayer game will freeze. I was able to play it on Fedora 32 (I suspect the more up to date kernel probably helped) but it had to be in the lowest settings. Of course I also have an Nvidia card so I probably asked for it. They also completely broke cross platform play a while back, although there was a hack to "fix" it (fix meaning per-turn de-syncs)
- gkop 6y agoIt’s an abomination on PS4 too for what it’s worth.
- iso1631 6y agoSadly this is wrong, as my play time of 448 hours shows https://i.imgur.com/zAlvIcv.png https://i.imgur.com/zAlvIcv.png Had I instead got a minimum wage job, I'd have £4,000 more money.
- deklerk 6y agoWhat in the world. This is incredible. Could we have a blog post about how this is achieved? Is there webassembly involved?
- wrink 6y agoHoly Crap - nice work
- scott31 6y agoCrashed my browser
- notsureaboutpg 6y agoYeah I am on mobile and it crashed my browser too
- duxup 6y agoMy browser is dying here so I'm not able to really get a feel for how it plays... 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.
- Hamuko 6y ago>My browser is dying here so I'm not able to really get a feel for how it plays... I don't think it does.
- Kapura 6y agoThis is the UI for civilization, correct? i didn't seem to be able to interact with the... game part of the game. Still, Civilization games have impressively complex UI, so even to approximate that is quite a task.
- sktrdie 6y agoEven if it was just state-transitions it would already account for 97% of what React is used for
- LoSboccacc 6y agoyeah even if it is just state transition, a good, depth UX is a huge part of a game coding budget. 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.
- SarkisB 6y agoComplete UI and UX, which can be hooked up to a backend.
- non-entity 6y agoThis is a very interesting showcase of what seems like a capable no code tool. I dont think I've ever seen this much power in one, especially a web based one, in fact most no-code developed apps ive used are nothing more than plain old forms, hardly worthy of the app title. 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.
- Nilef 6y agoNocode is much more than that these days! Check out https://nocode.tech https://nocode.tech and https://nocode.tech/learn https://nocode.tech/learn!
- jrumbut 6y agoIronically a large part of my current job is writing code that runs on/interacts with a no/low code platform. 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.
- justaguyhere 6y agoIronically a large part of my current job is writing code that runs on/interacts with a no/low code platform. 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?
- 6y ago
- nemacol 6y agoI am curious how this is legal. Sorry if this is an ignorant question.
- non-entity 6y agoI wager it isn't, sadly but its still incredibly cool.
- nemacol 6y agoThank you for the reply.
- Hamuko 6y agoIt's probably going to be hit with a takedown notice sooner or later. They even had the original companies' logos in the intro.
- MaxBarraclough 6y agoIt's chock full of other people's trademarks, there's no way it's legal.
- balls187 6y agoDepends on the jurisdiction, and the law being broken. 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.
- safog 6y agoIncredible stuff! I'll need to check out some of the no-code tools again, the world has come a long way from WYSIWYG html tools.
- 0dmethz 6y agoThis seems a little misleading. It's the game's UI built in Webflow, but the actual game is 100% missing from this.
- MaxBarraclough 6y agoA real pity, in my opinion. It would have been great if they'd built a highly polished web-based frontend for FreeCiv, rather than an ultimately unusable (though still very impressive) tech-demo full of trademark violations, that will presumably soon disappear under an avalanche of entirely justified legal threats. It would have been a good deal more work, admittedly.
- csharptwdec19 6y agoWell, on one hand it looks like WebFlow is primarily geared towards UI versus complex logic. OTOH I'm willing to bet that if someone built Civ 6 in a no/low code tool the API costs would be astronomical.
- smt88 6y agoFlagged for misleading/clickbait title. Accurate (much less impressive) title would be: "Civilization VI UI made in WebFlow"
- daolf 6y agoamended
- smt88 6y agoUnflagged
- schniederinc 6y agoit's actually 'Webflow' - no camel case
- dang 6y agoBelatedly fixed. Thanks!
- branon 6y agoAmazing, but feels like it doesn't belong in a browser. Will run very slowly on everything besides reasonable fast Intel hardware.
- SarkisB 6y agoIt's a prototype designed to push Webflow to the edge. Everything will eventually end up in a browser :)
- spcebar 6y agoI know "you may only witness our glory on desktop" is a joke, but it comes off as very arrogant.
- speedgoose 6y agoYes. And it would have been more interesting to show a responsive UI.
- SarkisB 6y agoCivilization is originally a desktop-only game with a complex UI. Please feel free to clone my prototype, make it fully responsive, and attach a more appropriate joke in the 404 page :)
- deleted 6y ago[deleted]
- darepublic 6y agoWas somewhat janky but quite impressive nonetheless. Whats not as clear is .. how easy is it to make this UI in webflow. I can easily imagine making this in React.. how much less time would it take in webflow? Or is the appeal purely accessibility to non devs.
- SarkisB 6y agoI developed this in two weeks during my spare time and it was a breeze. The hardest part was extracting all the assets from the game one by one manually by screenshoting, editing, and uploading.
- darepublic 6y agothanks for replying. I don't know if you're a dev but if you are would you say this is faster for you than developing via traditional means
- wazoox 6y agoMy desktop PC is a ~2009 dual core machine, but this is actually almost usable, the main annoyance being the slow mouse cursor. Everything else just works fine. Impressive.
- SarkisB 6y agoI nearly broke webflow itself building this. So I wouldn't be surprised if you encounter a bit of lag ;)
- gruez 6y agoIs it me or does the whole thing feel a little... sluggish (on firefox), even on the main menu? I get it's supposed to be no-code so it's not optimized, but the whole thing feels significantly more sluggish compared to the feature set it offers. 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)
- SarkisB 6y agoThis is the largest Webflow project ever made, it completely pushes it the edge and runs entirely on one screen. So you might notice lags depending on what machine and browser you use. This is not a typical website or a reflection of Webflow projects in general. 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.
- jnwatson 6y agoI'm genuinely super confused. This could be done in Flash in a couple hours. Am I missing something or is this just mostly static images with button transitions? Like what you could do in Powerpoint.
- SarkisB 6y agoI will personally give you a blowjob if you can do this in Flash or Powerpoint in a few hours :)
- jbarrozo 6y agoI looked at it thru webflow designer, I was like, you're amazing!! I can't count the hours it took for you to get this.
- SarkisB 6y agoCheers! :)
- RubenSandwich 6y agoHello folks, 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 https://boards.greenhouse.io/webflow. Feel free to reach out with questions about the roles. Contact me at (my first name) at webflow.com.
- SarkisB 6y agoHi everyone! Sarkis here, the creator of the project. 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 https://www.youtube.com/watch?v=ZXAGmosa7R8
- hkcray 6y agoShows how webflow and the like are the future of web dev