Excalibatta - A small puzzle game prototype #2658
Replies: 2 comments 6 replies
-
|
@chrisk-7777 This is so cool! It's got a great deal of polish already, I'm excited to see where you go with it! Did you run into any issues hosting on netlify? I'm really curious how integrating the UI went, any good patterns to share? |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @eonarheim ! As always Excalibur is a joy to work with ⚔️ Next stepsFrom here, I will tidy up the code, fix a few bugs, and add a few more levels to demonstrate all the game mechanics. After that, I probably won’t take this prototype too much further. The real goal was to learn "end to end" against a restricted scope to support another game I’m (slowly) working on. I'll post a bit more about that other game soon, its the 2d FF-inspired turn based one. It actually made it onto the demo reel on the Excalibur 0.27.0 release YouTube video - a very proud moment for me! 😊 HostingNetlify was actually a last minute swap! The original plan was to have it on itch, but I had some issues with the keyboard not working 99% of the time. I think I've seen you mention it in the past, and also saw this issue on itch: itchio/itch.io#727 . It's something to do with the iframe. Excalibur worked absolutely seamlessly with Vite. If you're looking for a near-zero config, super quick alternative for local dev. UIGood UI patterns - I could probably write a few pages on this 😅 Feel free to skip the next paragraphs. The first attempt of my "main game" was to use React for the entire game (no game framework). React excels at state, especially with its single flux-like store. This always seemed like an ideal choice for something like an RPG, with so much state for stats, characters, etc. However, I personally found React struggles with transitional state (eg x/y coordinates updating every tick). You have to be super careful not to thrash the (v)DOM with re-renders. Even though I made it reasonably far with just React, I felt like I was fighting against the grain. The second attempt, was wiring Excalibur and React together with Zustand (similar to Redux) as a central store. The nice thing about Zustand is it can be accessed outside of a React context. React was the orchestrator, and responsible for mounting the Excalibur game and was also "in charge" of data. This still resulted in a weird position of the game relaying data back to the central store, and again, I had to be super careful not to thrash the (v)DOM. It also didn't feel "natural" to use a functional approach, when game objects are so comfortably represented by classes. My third attempt is this one. React has been "demoted" to purely UI, and the Excalibur's event system acts a bridge between the two. React almost treats Excalibur as an API it subscribes to, and updates its internal state based on key points in time (events). This works really well, and closely resembles how React normally operates. For React, the Excalibur game is just another data endpoint. |
Beta Was this translation helpful? Give feedback.
-
|
Next steps - I'm excited to see where you go with Excalibatta and your turn based FF-inspired game! Both will definitely make the next demo reel ❤️! Hosting - I'll need to take another look at the keyboard iframe stuff 🤔 I remember that being pretty sticky... On the long docs todo list is to have a section on how to host on the popular platforms like itch, vercel, netlify, gh pages, etc. Any contributions you have there would be awesome! UI - The docs/samples need more examples of UI, this looks super great and would love it to be included. I'll pick your brain some more, might be nice to setup a sample repo following this pattern in React! |
Beta Was this translation helpful? Give feedback.
-
|
Yeah the keyboard issue is a bit of a prickly one. It's not a blocker for me, but I guess itch is pretty popular, so others might find it useful. I'm happy to raise a PR for deploying to itch/Vercel/Netlify. Vercel and Netlify pretty much work out of the box as long as there is a build command and an output folder. Itch has a few extra steps. More than happy to chat more about UI, just let me know how can I contribute to that conversation. I can probably extract out a simple example for the docs if that helps |
Beta Was this translation helpful? Give feedback.
-
|
Definitely! If you are up for adding PRs for those platforms that'd be amazing! Also 100% yes on the UI! Any examples to the docs would be fantastic! |
Beta Was this translation helpful? Give feedback.
-
|
Cool cool, I've raised a PR for the hosting side: excaliburjs/excaliburjs.github.io#340 I'll try get the UI one done soon(ish) 😅 |
Beta Was this translation helpful? Give feedback.
-
|
This is looking awesome @chrisk-7777 ! |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @drewconley ! It was so fun working through your code. |
Beta Was this translation helpful? Give feedback.
-
This is a small puzzle game built in Excalibur, TypeScript and React.
The game is more a prototype, than a finished product - but I do think the codebase is reasonably robust and extendable.
My key learning was to have some decent patterns in place to interact between Excalibur and React.
This game is an Excalibur port of a React game called Ciabattas Revenge.
The core game mechanic, concepts and assets are all based on the excellent tutorial series by Drew Conley. I have spoken to Drew and he was totally cool with me doing a port and reusing the assets and mechanics
Beta Was this translation helpful? Give feedback.
All reactions