Show HN: Play the game I'm developing directly on its website(athenacrisis.com)
athenacrisis.com
Show HN: Play the game I'm developing directly on its website
https://athenacrisis.com
94 comments
I 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)
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)
Thanks 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.
Just one note: it’s not an iframe, it’s literally on the page itself.
I 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.
As for whether it fits the rest of the style of the game – that's up for debate.
Firefox, 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
* 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
The 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.
The 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.
If they were anchored to the side of the map, that would make it more obvious they were related.
Just 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.
Is 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)
I 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.
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.
That'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.
This 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).
There's options for that. And on the new Switch version you can hold down a button to make the AI move faster...
Yes that's true, but that's not available against human players obviously :/
Note that Athena Crisis supports both sync and async play. You can play your turn against other people and only come back when they are done.
You can also play multiple games at once, and on as many devices as you like. So for example play a sync game on your desktop against a bot, and an async game against another person on your phone once in a while.
You can also play multiple games at once, and on as many devices as you like. So for example play a sync game on your desktop against a bot, and an async game against another person on your phone once in a while.
That's so cool ! I really like this format
There is a ”Fast AI” setting that does exactly this.
Your 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.
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.
I 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 ).
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
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 ).
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
I 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?
There is a section on WebGameDev, an awesome resource for building games with web technologies: 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.
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.
I'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.
Very 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.
From 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!
Nice work!
This reminds me of the "Advance Wars" game series on GBA.
Advance 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.
It 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
> It 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
"Plagiarism" does not mean what you think it means.
"Plagiarism" does not mean what you think it means.
I encourage you to check out both games side by side before making incorrect statements like these.
I 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?
It 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.
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.
I think thats also known as a genre
Yeah, it’s really common for indie games to be derivative of big name games. Examples:
Wargroove (advanced wars)
Stardew Valley (harvest moon)
Etc. Wargroove isn’t really even “indie” as Chucklefish is a very established studio.
So, yeah… this is normal and not worthy of criticism.
Wargroove (advanced wars)
Stardew Valley (harvest moon)
Etc. Wargroove isn’t really even “indie” as Chucklefish is a very established studio.
So, yeah… this is normal and not worthy of criticism.
A genre containing only one game series from one company? :P
There are probably 100s of this style of game... and from many companies. I'm not exaggerating. Many before "advance wars", too.
The earliest one I've played was Operation Combat on the Amiga in 1991.
https://youtu.be/uC845vxdyuY
https://youtu.be/uC845vxdyuY
Hadn't heard of it --cool. Along the same lines, Eastern Front[0] was a turn based tactical game about 10 years earlier. I played it in the early 90s on an Atari. The OPs game and advance wars have much more in common, but certainly the derivation goes back a long way. Later on, Japan had a lot of these turn based tacticals that didn't make it to western markets. (Super Robot Wars is a series that had some titles sold in English but not most.)
[0] https://en.wikipedia.org/wiki/Eastern_Front_(1941)
[0] https://en.wikipedia.org/wiki/Eastern_Front_(1941)
If there are so many, can you show one example at least?
[deleted]
I 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.
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.
Oh 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.
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.
It'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
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.)
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
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.)
Firefox/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
FWIW, it works fine for me on Firefox on an aged laptop (Wayland, Fedora 39)
For a second perspective, i tried it on iPhone 13 Pro using brave and worked fine
This 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?
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?
Oh 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.
The game is primarily optimized for Chrome and Safari, and should definitely work well in both.
I 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.
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.
It's unusably slow for me in Firefox/Linux, as in multiple seconds per frame with the CPU at 100%.
I 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.
FWIW, I'm also having trouble with a modern display.
Nice graphics! I lost badly, and have desire to return.
That talk is the most mind blowing thing I've watched in years. Bonkers!
This 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.
I tried the demo but after using every move on every unit nothing happens
Tap the button on the right bottom to end your turn.
Sheesh, I thought that was part of the webpage rather than the game...
I completely missed this on a big screen.
Very 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.
(NUX stands for new user experience)
I'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.
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.
You 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".
*Some companies I worked at called it NUX because FTE would be ambiguous as it usually means "Full-Time Employee".
Personally, 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.
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.
The magic interaction to see this info is long pressing on anything. This is one of a few interactions that works consistently on all input methods since my goal is to provide the same experience across all platforms.
When playing the real game a character explains this before you get started. I chose not to show a character message for now but maybe I should when you first scroll it into view.
When playing the real game a character explains this before you get started. I chose not to show a character message for now but maybe I should when you first scroll it into view.
Hey! 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.
Very 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.
The 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?
Very 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.
AthenaNovo.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
Not sure why the file name change, but looks a bit fishy.
[1] https://www.myfonts.com/collections/johto-font-superpencil
The 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!
Ha, that's cool. Consider adjusting meta in the .woff file then? It still holds Pascal's copyright.
Works 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.
I 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.
The game looks really good, love the art style and the readability of it all.
[deleted]
Wow, I haven't seen a browser game this full-featured since CrossCode. Were there any completely unexpected challenges on the web?
Is it inspired in Advance Wars?
Inspired would be an understatement, but that is not a bad thing.
I did not mean it would be a bad thing. Just to know what to expect. :)
have been playing this for sometime. quite addictive! ty @cpojer
is this game run a mining script? '__') main page uses 90% of 32 cores..
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 ) and I'm planning on open sourcing as much as possible in the future.