12 ms·
Show HN: Play the game I'm developing directly on its website
I've been working on Athena Crisis for about two years, and full time for the past 9 months. The game is entirely built from scratch using React and CSS without a game engine. It runs anywhere, including the Steam Deck. You can even use a gamepad on the landing page to play!
Previously the landing page had a video of the game but my goal was to always just put the actual game on the website. I merged the landing page into the game's monorepo, added the game's React components, and boom – the video was replaced with a playable version of Athena Crisis.
Of course, the real game has tons more features, but the landing page now always runs the exact same code as the actual game – including assets, the AI, and the UI/UX – and it is pushed within 5 minutes as the actual game is being updated live.
I frequently talk about the tech behind this game (see this React Summit talk about "How Not to Build a Video Game": https://www.youtube.com/watch?v=m8SmXOTM8Ec https://www.youtube.com/watch?v=m8SmXOTM8Ec ) and I'm planning on open sourcing as much as possible in the future.
- tesrx 3y agoNice work! This reminds me of the "Advance Wars" game series on GBA.
- cpojer 3y agoAdvance Wars is one of my favorite games of all time. Nakazawa Tech, the indie studio I founded, is aiming at recreating games that I loved playing as a kid, and building on top of them with twists and novel ideas.
- dagurp 3y agoCheck out Wargroove if you like this sort of game
- alacritas0 3y agoIt does, and it's a very good game, but this feels like plagiarism with how similar it is -- artwork style, mechanics, even UI is essentially identical to the GBA games
- cpojer 3y agoI encourage you to check out both games side by side before making incorrect statements like these.
- mplewis 3y agoI think plagiarism is a bit far, but I definitely understand why others think your game is extremely derivative of Advance Wars. Could you elaborate on what makes your game special?
- cpojer 3y agoIt expands on the formula with new units, buildings and gameplay elements like you’d expect from a new entry 20 years later. It also doesn’t take itself too seriously. You can play on any device at any time, in sync or async games and interact with other players. It comes with the exact same map and campaign editors we are using to build the game. You can collaborate with friends on a campaign and share them with anyone. It has no load times.
- burnished 3y agoI think thats also known as a genre
- mtlynch 3y agoI tried it out, but it froze up my browser on Firefox + Windows on a pretty well-resourced desktop. The page loaded fine, but when I hit "Play" everything ground to a halt, and even scrolling the page up and down had a 3-5 second delay.
- jasonjmcghee 3y agoFor a second perspective, i tried it on iPhone 13 Pro using brave and worked fine
- cpojer 3y agoOh that sucks. If you don't mind helping me troubleshoot the issue: Does this also happen with a Chromium based browser? Any chance you could profile using Firefox's web tools and send it to me (Find my details on twitter.com/cpojer or on the bottom of cpojer.net). Firefox has not been a focus for the game as it mostly ships on Chromium/WebKit based browsers/app wrappers, but the landing page should still work great.
- andai 3y agoIt's very laggy on my phone too. (Several seconds input delay.) That's fairly normal for a game made in React though (at least the ones I've tried). Is the paid version also made in React? For some context, my phone is old (2016) but I do find it amusing that it can run this page with a physics engine and 3D rendering without any lag http://kripken.github.io/box2d.js/demo/webgl/box2d.html http://kripken.github.io/box2d.js/demo/webgl/box2d.html Your game looks great though, and the website matches it perfectly! Nice work (As an aside, I'd urge you to take the from-scratch ethos just one step further and make you next game without any libraries, or with sensible exceptions like Howler and Pixi.)
- leononame 3y agoFirefox/Linux also runs extremely slow for me and turns on all the fans of my processor. I've got a gaming notebeook. I'll see if I can get it to profile for you
- cl3misch 3y ago
- mashlol 3y agoVery cool demo, but I think it needs a NUX as I have no idea what to do. I randomly clicked stuff but I have no idea if anything accomplished anything.
- personjerry 3y ago(NUX stands for new user experience)
- theogravity 3y agoI've always known it as FTE (First Time Experience). Agreed, the controls aren't entirely intuitive. I didn't know I had to click on the wait icon to 'end' that char's 'turn'. Didn't know what to do when all the chars were dimmed out. Also it didn't seem like I could move then attack? It was either move or attack (that or the tiles that showed the actionable area was way too dim to make out to see if it overlapped with an enemy tile). The artillery didn't show any range tiles at all so I thought I couldn't use it even though it wasn't dimmed.
- cpojer 3y agoYou are all correct, both about calling it NUX or FTE* and that the game should teach players better. That's been recurring feedback, and the actual game once it fully launches (after Early Access) will feature a gentle introduction – which I'll also add to the landing page then. *Some companies I worked at called it NUX because FTE would be ambiguous as it usually means "Full-Time Employee".
- comex 3y agoPersonally, I'm somewhat charmed that it threw me into battle without an explicit tutorial… although that's probably because I'm familiar with Advance Wars. However, even for me, the unlabeled buttons were confusing (both the unit actions and the buttons on the side). And I would have wanted some way to show an info panel for a given unit describing what the unit can do, its strengths and weaknesses, etc. Indeed, I tried several interactions in the hope of getting one. I tried clicking a unit and then moving the mouse to the box at the bottom (the one that appears while you're mousing over the unit and shows the unit's name etc.; I was hoping that clicking the unit would make the box not go away after the mouse left the unit). I also tried clicking the unit and then clicking the info button on the right, as well as right-clicking the unit. Just mentioning this as weak evidence for what kind of interface users might consider intuitive, if you do add such a feature.
- npinsker 3y agoYour game looks great! Love the color palette, I’ll keep an eye on this for sure. Sorry for the curveball, but I’d be really interested in hearing about the process of finding your publisher (if you don’t mind) — it seems incredibly tough for devs without huge resumes right now, so I’m curious how the process went.
- cpojer 3y agoI started building this game while I was on paternity leave after our second daughter was born. At the time it was a fun side project, and I was sure I would ship it in some form, but I never even thought about founding a company and finding a publisher. When I had something fun I got a few keynote slots at React and web conferences in 2023 (that's where the resume comes in, I guess?) and while I put together the presentation I also put a publisher deck together, mostly just for fun. The game was fully embedded in the slide deck just like it is now on the website, and how I did it in the public presentation (see: https://www.youtube.com/watch?v=m8SmXOTM8Ec https://www.youtube.com/watch?v=m8SmXOTM8Ec ). A mutual friend introduced me to Null, we had one meeting, and that set me on this path. I didn't seriously talk to other publishers. I'm afraid this story is not super repeatable and mostly just hard work and serendipity. Before all that I spent 10 years as a teenager and early adult building games and social networks, and than I spent 12 years at Facebook & Stripe. I wrote about my reasons for starting a company here: https://cpojer.net/posts/building-a-company https://cpojer.net/posts/building-a-company
- tetrisgm 3y agoVery cool setup. Congrats. Obviously this is geared at people who already know Advance Wars. If you wanna make it more newbie friendly (not that you have to), plenty of hand holding you could add. But definitely a neat demo.
- tsukurimashou 3y agoI tried the demo but after using every move on every unit nothing happens
- cpojer 3y agoTap the button on the right bottom to end your turn.
- nomel 3y agoSheesh, I thought that was part of the webpage rather than the game...
- have_faith 3y agoI completely missed this on a big screen.
- appden 3y agoThis is so freakin’ cool! Love the animated screenshots and whole retro vibe. I hope the tech behind this will enable you or (through licensing or open source) others to build more immediately playable, cross platform games.
- elliottcarlson 3y agoVery neat -- one issue with the site is once you have started a game, if you try to scroll down to check out the rest of the page it keeps scrolling me back up to the game. I was looking for a pause button, hoping that would let me check things out, but couldn't find one.
- mxstbr 3y agoThat talk is the most mind blowing thing I've watched in years. Bonkers!
- ambrood 3y agohave been playing this for sometime. quite addictive! ty @cpojer
- adamredwoods 3y agoNice graphics! I lost badly, and have desire to return.
- ukuina 3y agoDemo was tough, but fun, so I bought the game! How do I build structures in the prequel campaign? Is it an action on the Pioneer on specific land squares?
- cpojer 3y agoYes, the Pioneer can build buildings on a "Construction Site".
- poopsmithe 3y agoI like this kind of game so I gave it a go. First thing I had trouble with is differentiating the two team colours. I'm not colorblind but they look too similar on this 10 year old monitor with a blue light filter I'm playing on. Second thing I had trouble with was telling what I can click on or when it was my turn. I'm still figuring that out actually. Gonna jump back in and see if I can blow up some stuff.
- jtokoph 3y agoFWIW, I'm also having trouble with a modern display.
- vidarh 3y agoIs there a "fast forward" for the AI actions? The thing that will turn me off a game like this faster than anything else is being forced to sit through and watch the individual moves the AI takes in "normal time", and I couldn't find one (I didn't look very hard)
- cheeseface 3y agoThere is a ”Fast AI” setting that does exactly this.
- cpojer 3y agoI agree! That's why we made the conscious choice not to show choreographed battle animations through overlays like similar games in the genre do. On the landing page you can press shift (or hold Y on a Gamepad) to speed up AI actions. Once you play the real game, you can change the settings to make all AI moves fast, or make all animations including your own (and other players) fast.
- vidarh 3y agoThat's great. I'd suggest showing that tip when the AI moves - at least on the landing page. It made it far more enjoyable to test the game.
- TheRoque 3y agoThis is literally the reason why I never liked advance wars. It's painfully slow (especially against a human) and you have to wait for every single unit move, and because I'm bad, I'm waiting to get crushed. Sometimes there are so many units. I'm ok with other tacticals, but mostly because it's alternating players (whereas advance-wars-likes just move all the units at once).
- boxed 3y agoThere's options for that. And on the new Switch version you can hold down a button to make the AI move faster...
- iraldir 3y agoI was going to be fairly underwhelmed, I mean, yeah it's a web game of course you can play it on its website, wooplidoo. But actually having a demo directly in the middle of the action embeded in an iframe of the landing page is quite neat. It blends properly with the rest as well, so actually well done. Some feedback: - Demo plays music. If the user clicks the purchase button, a new page opens which also plays music, this can be quite unpleasant as they are both playing at the same time. - Personally I like the art of the game, including the pixel art character faces, but I don't like the banner. The banner feels like it was drawn by a teenager discovering photoshop with a book "learn to draw manga style in 2 hours" – That might be a bit unfair and I'm sure it was a lot of effort, but a lot of details make it feel amateur-ish in the wrong way, in particular the most central character and its face. Have you considered using the same pixelised style that you use for describing each character bellow? - on firefox the character faces overlap with the text on "Create your own maps..." (Firefox, Mac OS, very large screen)
- cpojer 3y agoThanks for the feedback! We tried key art in the pixelated style and it doesn’t work well since it’s used across a wide variety of services (Steam, Twitch, etc.) who downsample images a lot. Pixel art just looks bad in those places, so that’s really the only good option. Just one note: it’s not an iframe, it’s literally on the page itself.
- yreg 3y agoI think the banner looks good, there's nothing amateurish about it. As for whether it fits the rest of the style of the game – that's up for debate.
- zoidb 3y agoI just watched parts of your "How Not to Build a Video Game" talk and I am blown away. I have not seen anyone build a game at this level with css. Do you know of any other games that take this approach? If you were doing this again would you choose a 2d game rendering engine that uses canvas like phaser or pixi.js? I'm curious as well about speed and loading times, if there really is a noticeable benefit over using canvas?
- cpojer 3y agoThere is a section on WebGameDev, an awesome resource for building games with web technologies: https://www.webgamedev.com/games-demos#dom-based-games https://www.webgamedev.com/games-demos#dom-based-games There are only a few crazy folks like us right now I became a lot more pragmatic, so next time I'd probably start with a game engine that uses WebGPU/WebGL. You get so much value from the DOM and CSS, but it's also really not meant for building such interactive experiences like I want to. It works kinda ok for a turn based strategy game, but likely breaks down for some more involved games.
- CuriouslyC 3y agoI'm currently developing a web game and initially I wanted to go the pseudo-3d route with perspective facades and a "stage" feel and lean into the css/svg filters to make it pop. The effect was kinda cool but having to do all the effects bespoke rather than have batteries included from the three ecosystem/playcanvas felt like I mistake and I could already see performance limits, so I also pivoted to webGL and aside from the learning curve I couldn't be happier.
- adamlarsson78 3y ago[dead]
- germandiago 3y agoIs it inspired in Advance Wars?
- incrudible 3y agoInspired would be an understatement, but that is not a bad thing.
- germandiago 3y agoI did not mean it would be a bad thing. Just to know what to expect. :)
- freetonik 3y agoVery cool approach and the demo! One minor critique is the color palette choice. As far as optometric tests go, I do not experience any color blindness, but I still struggled to comfortably distinguish between the violet and orange characters, and especially orange characters standing on orange backgrounds. I can clearly see them, it's just slightly uncomfortable for the eyes.
- deleted 3y ago[deleted]
- Narishma 3y agoIt's unusably slow for me in Firefox/Linux, as in multiple seconds per frame with the CPU at 100%.
- PetitPrince 3y agoFirefox, Windows 11 on a fairly modern computer. * I don't know what to do when all my units have played. Is there a next turn button ? * The info/goal/next unit buttons are fixed to the page and doesn't feel linked to the game itself, making them easily confused for page navigation instead of game element. * I have trouble distinguishing between the background and the active units. Perhaps make the background slightly more desaturated ? * Disable the music by default. It's jarring to have it play directly. * It's super impressive to have a game playable like that in the browser
- cpojer 3y agoThe end turn button is on the right bottom! Sorry that's not more clear right now – I opted for no distractions before starting to play.
- pimlottc 3y agoThe way that the turn button (and the others) are positioned as floats make them feel disconnected to the game. There's a lot of space between them and the game board and they don't move in sync with when scrolling. I thought they were for site navigation or something. If they were anchored to the side of the map, that would make it more obvious they were related.
- Shawnecy 3y agoJust came here to say the exact same thing. I moved all my units, and looked all around what I thought was the game screen for what to do. Didn't realize other elements on the page were part of the game.
- huhtenberg 3y agoAthenaNovo.woff2 is actually a font called Johto [1]. Not sure why the file name change, but looks a bit fishy. [1] https://www.myfonts.com/collections/johto-font-superpencil https://www.myfonts.com/collections/johto-font-superpencil
- cpojer 3y agoThe font was designed by my friend Pascal. I bought it from him, made some very minor modifications, and renamed the file. The name was his idea!
- huhtenberg 3y agoHa, that's cool. Consider adjusting meta in the .woff file then? It still holds Pascal's copyright.
- vinnymac 3y agoThis is the third time I’ve seen your beautiful game now. So I decided to pull the trigger and buy early access. Unfortunately after filling out the stripe form on iOS Safari the pay button remained gray and I couldn’t checkout. I actually experienced a variety of quirks on mobile while navigating that might require some investigating. Perhaps because it is optimized for Chrome?
- cpojer 3y agoOh that's not good. If that was within the Stripe popup it seems to be a Stripe issue. Did you use a password manager to autofill the input elements? I sometimes run into issues with that on various websites. The game is primarily optimized for Chrome and Safari, and should definitely work well in both.
- vinnymac 3y agoI didn't use a password manager, and filled the input elements by hand. Definitely have seen similar issues with autofill in the past. If it helps I have been doing web development for over 20 years, so whatever the issue was, it wasn't obvious to me. If I get time later I'll hook up the device to a debugger and get a closer look at what happened there.
- dagurp 3y agoWorks great for me on Vivaldi on Android and Linux but I couldn't figure out how to end my turn on desktop. There should probably be a help dialog for that when you don't have anything left to do.
- NohatCoder 3y agoThe whole thing scrolls in a very weird fashion. Despite only taking up around 1/6 of my screen it manages to scroll so that part of the map is hidden. The whole thing lacks instructions on how to play, along with rules. What units do what? What does the terrain do? How is damage calculated?
- intruder 3y agoI absolutely love when products have interactive versions of their product right in their product pages. The game looks really good, love the art style and the readability of it all.
- frozenlettuce 3y agoHey! I'm also developing a game with some Advance Wars inspiration. I also had a UI challenge when developing the interaction with tiles that have a unit + a city. Instead of displaying a window to select the desired entity, I opted to displaying the controls for both. The city controls can be displayed in a small window in a corner and the mouse still controls the unit. I'm not sure if that's the better interaction, but it's what results in fewer clicks.
- usrusr 3y agoFrom a gameplay perspective, the demo gives me the impression that it's mostly about avoiding unrecoverable mistakes while attrition takes its course. I guess that's what real war is like, but for a game I'd rather win by finding enough good moves and the occasional very good one, not by "diligently avoided making any mistakes" (on the other hand that sentence would look worse in a job performance review, heh). Sorry to be that person on the internet who complains that the game is too realistic!
- pie_flavor 3y agoWow, I haven't seen a browser game this full-featured since CrossCode. Were there any completely unexpected challenges on the web?
- kokizzu5 3y agois this game run a mining script? '__') main page uses 90% of 32 cores..
- greentext 3y agoHad fun killing an hour there, fun gameplay. Is there multiplayer?
- cpojer 3y agoYes, extensive multiplayer support. It makes no difference if you are playing a bot or a real person, and you can set up games in any way you like.
- clocot 3y ago[dead]