Sup community, I'm just starting out with this engine and I was wondering how I could go about adding custom buttons in the main menu, I was thinking of making a simple battle screen so the player can test out the combat without having to trigger the event in the main story.

    5 days later

    I want to do the same thing on my project!
    It took me an embarrassingly long time to figure it out, and I still can't figure out how to create my own data-screen!
    But here's what I did figure out!

    This part is under the Init function in Main.js
    monogatari.component('main-menu').addButton ({
    string: 'ClickMe',
    data: {
    action:"open-screen",
    open:"custom"
    }
    });
    Ahaha its embarrassingly simple and took me forever!

    Sadly, I still cant figure out how to create my own screen!
    This doesn't work, but I hope it can help you in some way! Let me know if you figure it out!

    class customScreen extends ScreenComponent
    {
    render () {
    return '
    <button class="“top left" data-action="back"><span class="fas fa-arrow-left"></span></button>
    <h1>Wow! Now I have my own screen!</h1>'
    ;
    }}
    customScreen.tag = 'custom-screen';

    I see, thank you having the button there is already half the challange haha... I'll let you know if I figure out how to add components to the custom screen!

    Ayaz

    I managed to add a component. With this we should be able to add more complex things. It's mostly the same as what you have except I added the monogatari.registerComponent(<Custom Class Here>) function.

    This is what I have inside of the monogatari.init function in the main.js

    class custom extends Monogatari.ScreenComponent{
			render () {
				return `
					<h1>Test header</h1>
				`;
			}
		}
		custom.tag = 'custom-screen';

		monogatari.registerComponent (custom);


		// Jump to particular Lable for testing 
		// ***' monogatari.run("jump BattleTestLoop") '***
					
		monogatari.component('main-menu').addButton ({
			string: 'clickMe',
			data: {
			action:"open-screen",
			open:"custom"
			}
			});

    When it compiles it should show up as

    <custom-screen class="animated active" data-component="custom-screen" data-screen="custom"><h1>Test header</h1></custom-screen>

    inside of the game when you inspect element. I'm gonna mess around with some CSS styings on it right now but I managed to get the Test header to display without showing up in the main-screen so that's a WIN!!

    • Ayaz replied to this.

        Alnez Oh. My. God. It was that simple.
        Ahahah I feel so stupid! To think I was literally just missing

        Monogatari.ScreenComponent

        And

        monogatari.registerComponent (custom);

        is soooo insane to me!

        I wish you luck with your project! I'm doing mine on my school computer so that's made it a lot harder to find resources that aren't blocked which is why I'm even using Monogatari in the first place!

        Good luck and I'd love to see your project when done! 😃

          Ayaz
          Yeeeah I kept on thinking it was more complicated e.e ... my main resource has been the monogatari documentation is it blocked for you?

          Documentation link: https://developers.monogatari.io/documentation

          I've also been looking through the monogatari source code files:
          https://github.com/Monogatari/Monogatari/tree/develop

          Thank you! Good luck to you too! I'll be sure to post a link to ch.0 on this forum when it's out. (o.o)

            Write a Reply...