Text-Based Game in Phaser?

[Riddle]

Backstory:

I've decided for better or worse that I want to create a text-based game in Phaser (as opposed to Inform 7, Tads 3, Squiffy, Ren'py and other text-based games engines). Had I heard of Unity w/Fungus I would have used that together with Dialoguer, but I discovered Phaser first. The criteria I was looking for was to create an HTML5/Javascript based game-framework that could handle just the looping while I built a scalable world in a similar fashion that I would have if building C#. 

I needed the ability to add graphics and animations for certain atmospheric reading scenes, I needed the ability to create large worlds you could explore like an MUD but for single player, I needed the ability to use it on any website or device without having users install anything, but I also needed it to be simple and beginner friendly. I love to code, but I suffer from a really bad case of programmer anxiety that has followed me since I was 16, in my late 20s, early 30s now, on the cusp of 30. This year is the year I stop hacking together code and start programming...so I'm explaining this to explain why I would even attempt to use Phaser for a Text-Based game.

But here's my struggle. I know how to write a text-based game using C#. It's very simple to write imo a simple text-based game that outputs onto the console. But the way to do this in the web development world which is where I want to program (games for the web) is a whole different ball game, as you have to use a variety of different tools to bring it altogether.

Sooooooooo:

So my question is: How would I create a Text-Based game for Phaser? Since it's predominately Text: Input/Text:Output. What would be the 'flow'. I am familiar with building web pages HTML/CSS, and then I'm familiar with building text-based console games with C#, and I'm familiar with programming in Tads 3 and even a little bit of Inform 7. I'm also familiar with Unity's interface. I'm using Typescript for this project; so I really think that this should be doable. I'm just anxious about the 'how', as it is kinda new to me.

Here are some examples:

Dialogue

I use Articy Draft, and write dialogue that can be exported into XML. I have no problem learning how to export XML and converting it into JSON. But my understanding based on a tutorial I read that Dialogue would be simpler if instead of relying on Phaser's built in text, I rely on the DOM. My understanding of this means I would use HTML/CSS/XML to create the dialogue. How do I 'merge' that dialogue with Phaser's engine?

Text Output - Command Line

So when should I use Phaser's in-built text vs. relying on XML. How do I control HTML and CSS with Phaser or do I use a different structure altogether. Are there ANY text-based Phaser-Typescript or even just Phaser-Javascript games out there?

I'm thinking that for just the command line and menu that could be done with Phaser's built in text???? But I'm not sure if that's feasible or not. But then how do I loop through the menus' with phaser? And is this feasible for a scalable game long-term? Should I just use XML or JSON-- I really just don't know.

Game Loops & Logic

My understanding is that the game loop is held in extends Phaser.Game; and that the logic is held in Update(), Preloading and Creating assets; and working with input/output seem easy to follow. But where would I...how would I...create a text-based game's logic, Switches and Loops. 

Sometimes I feel like I'm in over my head with this; but the only way to learn is to do, and I don't see why a text-based game wouldn't be doable...Just not sure how I would implement it here. 

And maybe this is my lack of confidence and anxiety in general when it comes to anything programming related.

Any Guidance would be very helpful. I did find a tutorial on dialogue somewhere which mentioned using JSON but it just wasn't as detailed as I needed it to be and I can't remember what it was. Though it was helpful for suggesting that JSON might be a better way to handle all the dialogue features. What should be handled by JSON/XML what shouldn't--I just don't know right now.

 

[drhayes]

Whoo boy! That could be weird and fun.

I'd steer you towards Twine, first. It lets you create text adventures in HTML/CSS/JS. If you know those technologies you can customize the hell out of your Twine game for interesting results once you're done using the editor.

Then I'd steer you towards Inform 7 cuz SWEET JESUS it's the best example of a programming platform I know of. Time travel, test cases, great docs. Seriously nice. 

If you've done HTML/CSS/JS programming for the "normal" web before that will serve you very well in making a text game in Phaser. You probably don't want to rely on the HTML canvas for doing text-heavy work. Text processing in CSS3 is way more performant and will provide nice text stuff like word wrap, RTL (if you translate your game), accessibility for other input devices, etc. If I were you I'd absolutely position a div or two on top of the canvas and rely on the canvas for pictures, particle effects, and atmospherics. You could also use Phaser to play sounds for you, etc. But the text and input stuff I'd leave to plain HTML with fancy styling.

XML is fine for browsers. You can query the XML structure just like you can HTML once it's loaded (which Phaser's loader can help you with), since they're both offshoots of Standard Generalized Markup Language. You don't have to translate your XML into JSON just yet, I don't think.

As to how to program them... I don't know what kind of text adventure you're thinking of making. If it's the Zork kind (e.g. "get sword", "attack orc", "go north", "inventory"), then you end up with a parser for what the user types and some state of the world. Parsing what users type is a big topic, but, basically, you define a vocabulary of verbs. A very simple parser could be "<verb> <noun>" with nothing else, nothing fancy like Inform.

First thing you do is make sure the sentence is parseable (more on that below). Then you find out if you understand the verb. Then you find out if you understand the noun based on the player state. Chances are every meaningful object in your game will have an ID; now would be a good time to translate the noun into that ID for your other code to reference.

Each verb could be a function in your game that modifies the state. You could synonymize so "take", "get", "grab", "pick" all with some grabTheThing function. Then args to the function could be the nouns, like "sword" or "coins" or whatever -- except not as strings, but as IDs. The function could then operate on that ID to do whatever it is.

Anytime you write something out to the "console", you stick it in the div. The browser will handle scrolling for you. The player's input could be the onsubmit event of a form. Meanwhile, Phaser's update is always running -- so you could do real-time events like timers and things that affect the game.

You should check out the documentation for old MUSH and MOO engines. You could (and should!) do something a lot simpler and get pretty far.

And don't forget to let us playtest!

[Riddle]

Oh wow thanks this helped a lot. It's definitely exciting! I enjoy it, I wish I had found something like this forum years ago. As I've been all over the place trying to learn my tools/find the one that fits right with me. I'm not even sure if I should be using Typescript for this project but it just feels like it makes sense. I'm familiar with C# and other C-based languages, I'm used to and somewhat rely on compilers, and I think better with the way typescript/C# are structured. I am hoping that what I do will be a template for my future projects so I can expand on them building bigger and better explorable text-based worlds, and I don't yet know how Typescript will do with scaling/growing with my projects but since it compiles into JS doesn't seem to be that big of a deal.

In some ways I'm using Typescript to help ease me into feeling comfortable with Javascript but maybe wondering if I should just use Javascript for this or not or mixing and matching. Since the HTML text is separate from phaser in this project I wonder if using React w/Typescript might be a good solution for the interface aspect? Using Phaser just for the back-end sounds, atmosphere, etc. using React for the interface features.

Is there any way to display HTML elements separate from the canvas itself without but calling those div elements from Phaser or  would that just be a matter of positioning the divs, such as absolute positioning? Example if I wanted to group some leaves (animation) to gently fall across the text briefly using phaser's preload/create  (possibly update?) system. To make it look like the 'canvas' is behind the 'console' the player is writing on. This might just be a matter of div positioning. But I'm kind of wondering can Phaser's engine make DIV elements disappear and allow me to use timed events for my text elements; or would I have to rely on creating a separate engine on top of that?

 

I'm thinking of structuring it something like this (index.html):

1. Div ID for Phaser Canvas (Sound/Animation/etc) (Question how does phaser know which div to use in a project with multiple divs? So far in all the phaser tutorials I never see where Phaser's canvas gets assigned to a div id) - phaser used for loading Json/XML, sound, etc.
2. Div ID for Player's Console (Text Output) - here is where I'm thinking of using React w/Typescript for building the interface, which would display room descriptions, etc., since this would be all DOM and text processing HTML/CSS3 related. (Note can this Div be called or embedded within the Phaser canvas or phaser animation elements made so that it floats over the interface and/or around it? Ex. to have leaves fall over an interface that isn't rendered/is separate from Phaser's canvas?).  I know for sure Dialogue will be XML (or JSON because I'm using articy draft se for dialogue).
3. Option1-Input. Div ID for Parser. This is the parser option by which users would write commands, it's traditional. I know that player inputs in all options will rely on JSON files or a JS file that contains items, item descriptions, actions, nouns, and so on.
4. Option2-Input. Div ID for Menu. This is the predominate way I'd like to encourage people to navigate. It's basically a switch Menu for traveling back and forth. Though I'm still debating this. Great for phones. And more Oregon Trail style which is what I like.
5. Option3-Input. Div ID for Keyword. Still vague on this but just typing or selecting keywords available to access elements within the game. Like Blue Lacuna's keyword system, typing "Door" instead of open door.

 

So files I'd be working with:

• .TS (for JS) w/Phaser-Engine - for sounds, atmosphere, some animations, etc.
• JSX (for HTML/DOM/& UI) - for displaying output/character dialogue, NPC, interface, etc.
• .JSON & .XML - for storing world maps, dialogue, characters, items, objects, etc.

Does this seem like a plausible way to structure and build a text-based game using Phaser?

----

Oh and P.S. I really loved Inform 7 when I used it, I think what got me is I build big worlds, and need different files to manage it, and my brain became a big pile of spaghetti trying to keep everything organized in one big file, so I switched to Tads 3 which I loved esp. for project management but I needed more flexibility and would have had to modify Tads 3's core engine to move beyond the framework. Twine was nice too, I esp. love the story mapping which was great (I use Articy now to map my stories and dialogue for games). Undum which is all CSS3/HTML5/JS if I remember was also great as well, and the list goes on. The day Inform 7 ever allows you to break up your files along with some other things I'd love to see it support I'd be back with it. I love playing around with it sometimes just to play. But I digress XD. 

[symof]

It can be done. Unfortunately it takes a while to set everything up.

This should get you started, but it's not even 5% of what you would need for the finished game, but It did take me 4 hours to make, and I'm fairly new to phaser myself, so if you make it like a monthly project you should have something solid by the end of this month(well it depends on how much time you spend on it  ).

https://jsfiddle.net/cwLfqu0x/

 

http://phaser.io/docs/2.6.1/Phaser.KeyCode.html to add more keys, and

http://phaser.io/examples 

I'd start by looking into

http://phaser.io/examples/v2/category/input

http://phaser.io/examples/v2/category/text

 

[Riddle]

I guess what I'm trying to ask is:

1. Can Phaser Load and Use React User Interfaces/DOM elements? Or do I have to load The React User Interfaces on top of Phaser's canvas or BELOW phaser's canvas?

[drhayes]

Yes? Kind of? Since it's all HTML I think you'll be loading them side by side and spending time trying to sync them up. If you absolutely position things on top of each other and make sure they have transparent backgrounds it'll look just fine.

Really, I think you're going to be answering this question the whole time you're making the game. Phaser and React have very different lifecycles at the top (create+update+render vs. componentDidMount+componentWillReceiveProps+render) but, somewhere down below, could probably interface nicely via events. e.g. clicking on a button in React could turn on a particle emitter in Phaser, a tween completing in Phaser could setState on a React component. I suspect Phaser will drive most of the interactions towards React, but I wouldn't bet money. It depends how you write it. I would just start and see where you get.

Seriously, you should start if you haven't already and see where you get. BTW, I really like redux with React as a data model, but that's just me. ( =

[mattstyles]

Don't take this the wrong way, I'm trying to help your anxiety, you are asking way way way too much of yourself at this stage. You sound like you're a decent programmer but with limited experience on the web? Correct? If so then the following holds true of all the things you're trying to learn:

* Phaser -> fairly straight forward to learn (not even too many advanced JS techniques) but there's a lot of parts, plus its not going to help you with a text adventure.

* React -> Based around functional programming, data flow is different to MVC, DOM is scaffolded from JS (which is awesome btw), a small-scope library but lots of concepts that are not native to programmers versed with MVC or OO languages, so, initial learning curve is steep.

* Typescript -> Not too bad to learn if you're from a strongly typed background but mega fiddly to use in the JS world, plus, it only gets you so far (actually, not very far) for making things safer and more reliable in JS. Bit of a learning curve (maybe) but unnecessary for a single team and will mask some aspects of JS from you that you should have a firm grip of (this assumes you don't have a real solid base of JS knowledge, intermediate at least, probably advanced knowledge required).

* String parsing -> you've probably done this before, so not a problem for you (loads of JS libs to help too)

* Data and control flows -> You've probably done this too in a number of ways, merging React & Phaser isn't too tricky, but its another big hurdle.

With all this in mind you are asking way way too much of yourself. You can't boot string parsing out of the list, neither can you negate effort into control and data flow, that means you can (and should) ditch Typescript (for now) and pick one out of Phaser and React. If you choose one then your effort into control and data flow is reduced because those libs steer you towards certain models.

If it was me, I would ditch Phaser (for now). Use React, get comfortable with it, it's going to be the bulk of your application. Pick a data methodology, Redux is good, but adds many abstractions, I'd probably lean towards Flux to start (it leads fairly naturally into Redux, so long as you can get your head around streams and functional programming). At this stage you have React scaffolding your front-end and Flux (maybe) handling your data, at this stage your text game is fully working and will be a great experience.

Once you have the text bit going, then add in Phaser, if you want, to handle animations and stuff to supplement your text game. Whack Phaser into a React Component and have its own lifecycle method. It won't be easy to manage Phaser from your React platform but its perfectly possible and will work fine (I'd still say that Phaser is unnecessary, if you only need some animations flying around there are better ways).

TL;DR

You're doing too much. Ditch all the cruft (for now), pick React if thats your preference for UI, reuse whatever data model you used in C# and just bolt on React (you don't need it, raw DOM manipulation will make things even easier for you) to render your front end.

The simplest method would be to create a component (not necessarily a React component) that handles logging strings to the screen (i.e. creating DOM) and treat that component as your rendering component and then just port the same style you used in C#, but rather than output to console you output to your component to render and have another one that mocks keyboard entry (just an input element with a few listeners would be more than enough).

Add Phaser/Typescript/whatever later, start smaller, conquer the world later.

[Riddle]

Matt you're absolutely right. Yesterday I sat down and began researching React.js and Redux after drhayes mentioned it (I'm glad it was mentioned as my focus will be react, then learning and integrating redux, once I get comfortable seeing what I need Phaser w/Typescript for and if I need it adding that there). But before I came to that conclusion my anxiety worsened and  I became overwhelmed with Redux trying to swallow it all down at once and my anxiety increased, and even some depression as I began to feel like a terrible programmer and that I was in over my head/biting off more than I could chew. Somewhere in that moment I realized that I'm not a bad programmer, I'm somewhat decent, I just need to assess my current skills, start small, start where I am and build up from there, keep it simple. At that moment I decided to just focus on just React.js which was a whole new way of programming and paradigm that I wasn't used to up until this point. I naturally ended up setting my Phaser project aside and began working only with React.js, reading what I could get my hands on and dealing with that, 1 day and ½ later and I managed to get a Hello World up using what tutorials I could find and that was a start.

It was while working on learning React.js and even basic javascript eventhandlers that I realized that I could make a text-based game with just basic javascript and react.js. I put phaser w/typescript aside, and Redux as well (which hit me hard when I tried to wrap my mind of how to use it before even wrapping my mind around react), and focused on one thing "react.js", wireframing a UI and building an interface with it.

 I still wasn't sure about typescript in the long-run, but figured if I did use it, it would be single-case and with Phaser only.  I ended up naturally just focusing on javascript as most tutorials were in javascript and it was just easier to work with as a newcomer to Web Programming (and ES6 is pretty nice as well). I decided when I pick up phaser I'll play with typescript but for this, a little bit different. I think I came to the same conclusion you did, but your confirmation just sets me at ease. 

The web is different and it's not just one web technology that I have to learn; but many. I decided it's better to start where I am and keep it as simple as possible; not adding on anything more until I'm comfortable. So phaser got phased out and here I am working on a text-based game using Javascript, CSS, Html and React.js for the interface. I'll add Phaser w/Typescript later once I get the basics down. 

I logged on here and saw this reply and it not just confirmed my decision but eased my mind as well.

Thanks so much you guys!

[mattstyles]

@Riddle I think you've made the right decision, the JS world moves so quickly that its all but impossible to keep up with it all. Don't be afraid to set things aside for a while and return later, there is always a chance that things will move on and what makes a good decision at one point in time might be a bad one in 6 months time (or, rather, there are better ones then).

React is a good learning endeavour in any case, its a library that is eminently usable (as you'd expect from FB) but it also takes a slightly different course of methodology so its not only JS skills you learn but also a different methodology to maybe what you're accustomed to, these lessons you can take with you even if you decide that you're not a fan of React in the end (I think you'll love it though). Not all libraries are like this, React tries to build abstractions on top of the platform/methodology rather than creating too many of its own idioms.

Try posting in the Coding forum here, even though you're not using Phaser etc (yet), you might get an answer, or SO or the various React user groups.

Good luck! Keep heart!

[drhayes]

mattstyles is awesome, listen to him.

I've found the community pretty helpful with beta tests. Post what you've got and we'll take a look! 

[Riddle]

This is a bit of an update, I literally after my last post walked away and began building my skills up slowly even if it meant taking a break -- I'm not sure if I'm allowed to reply to posts form a month ago but I just logged in today and wanted to update:

1. I put Phaser down
2. I started the react.js + ES6 development
3. I took a break and focused on web development
4. I began building websites with wordpress and javascript to get comfortable (locally) with SASS - somehow the process of working with Wordpress actually made concepts in react.js easier to understand (the modular, component based way the structure is organized). But also using SASS and getting comfortable with building and doing some php code helped me feel more confident.
5. Once I was comfortable I gradually added interactive elements in HTML5/CSS3/Jquery either by following tutorials for them or modifing existing plugins to meet my needs.
6. I then decided that basic hover effects and scrolls could be put together to make an 'interactive' website and was working on implementing parallax features and so on.
7. Somehow I came round circled and wondered if Phaser would be the wiser choice, or if it would be a not suggested choice. If I should keep this particular website simple (story-telling with parallax and webpages, basic hover effects, etc.) or try to add Phaser for some of the interactive features that come built in with it.

I've posted my latest question here,

I have a hard time being active in forums when I'm deep in the midsts of learning and coding. But my confidence is growing gradually and after I make the interactive website, I'll be moving back to react.js and then into phaser again.

I'm pretty excited, taking small steps and working my way up was the best decision ever and I've gotten more done than possible as opposed to jumping into complete foreign material at once. Small bites and letting it gradually get bigger and expand. Thanks you guys for helping me, this conversation we had a month ago HELPED me tons!