How do you code scenes? (I need to change HTML, not just CSS.)

Help
1

I want to edit Narrat scenes (the HTML) for basically every part of the UI - however, I don’t know Vue at all. I got very confused for multiple reasons when I started attempting to write my own scenes.

I definitely want to edit/customize these built-in scenes:

  • engine-splash
  • game-splash
  • start-menu
  • playing

At first, I was just confused by how Vue works. I still don’t get it, but I feel that I know enough about HTML, CSS, and vanilla JS to copy and paste what is necessary.

Then, I tried to actually start writing Vue components for game-splash and start-menu. I gave up because I was trying to copy and paste existing scene code from the narrat-engine GitHub repo but so many scenes require so much other code that I felt like I was copy and pasting most of the internals of the Narrat engine.

I gave up for that reason, but now I feel like I really can’t do this with CSS alone (I tried that again and again).

Would someone be willing to, maybe, if they are feeling very generous, provide some sort of simple, one file template for each of these built-in scenes:

  • engine-splash
  • game-splash
  • start-menu
  • playing

I understand if that is too much to ask. I feel exhausted so I am inclined to be lazy, but I would also be open to just an explanation of how to understand and edit the narrat-engine code for each of these scenes.

I’m not sure I’ve been clear about what the problem is. The engine code all depends on each other, so I was unable to extract a single scene from the engine and it felt like I was being forced to rewrite the actual engine in order to just redesign the splash screen. I don’t think that’s intentional or that it is necessarily a universal experience! It is probably my own lack of experience with Vue and TypeScript interfering, but I would like help regardless.

2

You’re not really meant to be able to edit built in screens other than via CSS. The scenes features is to add your own custom screens for advanced users who know enough html etc to implement them.

You can copy paste and replace the built in splash screen scenes because they’re simple, but once you get to playing, you’d have to reimplement half of the game engine.

It’s not just a matter of swapping out html bits, UI components also do logic and the engine has to have a certain html structure to work. If you replaced the layout with a completely different one then most of the UI code wouldn’t make any sense, which means at that point you’re remaking everything (except the language itself and other internal engine stuff like stores)

You can do a lot with css and it’s been enough for most people. There are sprites which you can use to display custom elements, and scenes or plugins to display new screens.

If you want to do something so radically different that you want to rewrite the entire UI then maybe you need to write a game from scratch in a game engine like unity. But it’s a lot more work. And if you don’t have much knowledge in html js css, I would stick to what narrat is made for