Help a noob!

[bhargavaman]

Hey guys! I'm starting a new project and I think this is the best place I can find some help. 

The way the story progresses in this upcoming project is very akin to an interactive graphic novel. I was wondering, would Pixi be the way to go? I see in one of their showcases they do in fact have a graphic novel in there, but I'm absolutely lost about how to start creating something like that. As far as I can understand, Pixi doesn't have global variables, right? So for example if the reader makes a choice in Chapter 1, is it possible to call that variable in Chapter 2? 

I'm exploring Pixi because it's a project focusing on mobile devices first, desktop browsers second. For app creation, I'm looking at Cordova/Crosswalk. 

Anyone who could point me in the right direction? Any advice is greatly appreciated! 

[mattstyles]

I'd be inclined to say that the DOM would be more than enough in this case, Pixi is more applicable to rendering lots of things that change really fast, in your case that won't be happening. That's not to say that the structure of Pixi wouldn't be a help, I doubt you'd have too many problems using it to create a graphic novel sort of thing (although I still think DOM would be easier!).

1 hour ago, bhargavaman said:

As far as I can understand, Pixi doesn't have global variables, right? So for example if the reader makes a choice in Chapter 1, is it possible to call that variable in Chapter 2?

No JS library can prohibit this, JS has globals which are available everywhere, so if you're writing in JS you can always use globals and access them where you like.

Pixi is just concerned with rendering and doesn't make any opinions about whether you should use lots of globals or a different structure.

You might be thinking of Phaser where a common pattern is to create a global Game object and some State objects and I know we see some questions about sharing app state between distinct game states.

[bubamara]

Maybe you can look at Chat Mapper. It's not free, but it's perfect for the job. If you'll be happy with their built-in HTML player, no coding is required at all.

Or you can make story and dialogs in Chat Mapper (it exports json file) and use Pixi/Phaser for some visual effects.

[bhargavaman]

Thanks for all the help, guys! Although I'll have to apologise, I think I may have over-simplified the project I'm talking about. While it IS essentially a graphic novel, the reason I was leaning towards Pixi was mainly because it will also have a few game elements in there. For example, the protagonist of the story always keeps a journal, which can be checked at any time and is constantly updated with new information about other characters, new clues, etc. I'll basically need to keep this consistent across all levels of the game. So, would Pixi allow me to do something like this? Can Pixi transition from one "Stage" to another, and then back to the same Stage, with all variable states intact? (I'm assuming the journal would be a separate stage)

There is also a persistent health bar, which is the same from the start of a chapter through to the end. If you've played the Phoenix Wright: Ace Attorney games, you'll know exactly what I'm talking about.

@mattstyles Oh great, I didn't know about that. I'm coming straight out of a UDK/UE4 background, so I'm still figuring my way about JS and git and all that good stuff. While I did check out Phaser as well (no hands-on experience, just saw their site and a few examples) I think it would be too bloated in the end for this project. There's just way too much in there that I would never need. Plus, Pixi seems like it's a lot more flexible.

@bubamara Wow Chat Mapper looks really good! Definitely something I can see myself experimenting with. Thanks for pointing it out!

 

[mattstyles]

4 hours ago, bhargavaman said:

Can Pixi transition from one "Stage" to another, and then back to the same Stage, with all variable states intact?

No, Pixi just renders stuff really really fast, everything else is up to you.

Phaser has the concept of stages, called states, and handles moving between states.

But, if you're just worried about globals, JS can not restrict globals:

window.foo = 'bar'

// usually

var foo = 'bar'

If its done at the top level (i.e. not in a closure) then both of the above are equivalent in the browser and mean that the variable 'foo' is available everywhere (outside web workers, possibly, I dont know). You can't restrict this. So if you want to share state across different sections of your code that would be one way to do it.

[bhargavaman]

Good to know! I'll start exploring Phaser as an option as well. I also came across CreateJS, which looks quite similar to Pixi. Checking that out too.

Thanks for all your help, @mattstyles!