Riddle

Members
  • Content Count

    25
  • Joined

  • Last visited

About Riddle

  • Rank
    Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. I never got around to using Tangle and Howler but I have been using greensock animation and magicscroll which I have to say is really great and very easy. You have to have a solid foundation in html5/css3. I would say that I've been able to create a good story using just a basic css framework like materializecss with greensock and magicscroll. I did get into react.js but am back to the same old thing. Keep it simple and slowly add more features, make it modular. I actually run a game and book publishing nonprofit so I don't always have as much time to play with new libraries without sacrificing time spent elsewhere because I'm always so busy with community outreach and our infrastructure; however we are working on bringing interactive fiction to the mainstream that shares the same concept: webnative, low overhead, and are trying to develop our own interactive fiction game engine that meets some of our criteria without reinventing the wheel entirely. Let me know if you make any progress Reaganry , haven't had much to share myself since most of my time has been spent on skill building, designing, development and community outreach.
  2. I was just wondering about this this morning , if I would have to put my site in canvas or not. I spent the weekend working on creating a horizontal parallax site using Greensock, pixi.js came up but a lot of the interactive elements I saw and was liking on some websites I noticed people were doing everything on canvas, which I had to cross out for not being accessible in the way I wanted. Another thing I noticed that a lot of those sites weren't using actual text but sprites containing text. So I logged back in to ask for some suggestions and damn it there were replies here that I missed! I just checked out Howler.js and it's GREAT just what I need audio wise. I'm using: Greensock (animation) + scrollmagic (scrolling), going to add Howler.js (audio), I was going to ask if Phaser can only work with a canvas, and if there was any javascript game engine that could work without a canvas, I guess now I'm wondering if there is an (interaction) library available. I found hvr by Ian Lunn and a few other css hvr libraries, and maybe that should be enough, but I guess I'm thinking about keyinput (like pressing down and moving a guy across a screen temporarily) and somewhat forgetting that if you're not using Canvas/only using the DOM, the DOM handles that for you (?). It may just be that if I do add that type of element to do as has been suggested, keep it seperate, in a section that can be easily disabled. Update: I just found http://worrydream.com/Tangle/ "Tangle" for interactivity! Tangle (Reactive documents) <= for the storytelling text-based part. Scrollmagic (for horizontal scrolling) w/ TweenMax/Greensock (for animation) Howler (for Audio)
  3. 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: I put Phaser down I started the react.js + ES6 development I took a break and focused on web development 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. 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. 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. 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!
  4. I'm currently working on a Website that I'm designing to work like an Interactive Novel/Game. At first glance I thought I could just use some simple CSS and Javascript (or Jquery). But then I thought about events like playing music, onkeypressdown, moving left and right, and I started wondering. Would it be possible, or even realistic to use Phaser to create an interactive based website. The entire site is going to be Interactive and is meant to be explored. I was thinking of using a simple horizontal parallax with some hover animations I found for CSS3, and some particle effects, but now I'm wondering...since the entire site, right down to the "shop" is going to be 'gamified/game-like' would/could Phaser realistically be used to develop and design a website? Is Phaser responsive/(mobile-friendly), or would I need some work to make it so? Any thoughts on this (using Phaser) or should I use something basic. Unlike my Text-Based game which is being developed for a react.js app, this particular "game" is simply an interactive website, and will have images that will have some animations attached to them. So somewhat wondering since there is graphics attached if Phaser would be best for this. Some Notes: The Site is Wordpress via Shared Hosting The site is a website you can explore like a game (it tells a story) It will have the ability to scroll to different 'regions' example w/characters you can ask questions to (who talk back with text) The option to turn music on/off Optionally sound effects That's why I thought maybe...would Phaser make this easier with built in options or be adding more complication than needed?
  5. 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!
  6. I guess what I'm trying to ask is: 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?
  7. 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): 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. 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). 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. 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. 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.
  8. 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.
  9. Thanks Tom, I get it now xD I understand that (..) this says to go one file up; I'm just not sure 'why' it's making me go up one file since it is in it's own file away from all the other projects now directly in C://User and is still telling me to go one file up (by this I mean it's separate to everything and everything is now relative instead of behind). Src is referencing it fine without me having to tell it to go up one file, but really struggling with node. I think the problem is that for whatever reason node.js thinks the root file is one file behind my project (even when I move it). I did some research as I realized this is a referencing problem altogether and discovered that node is having a problem figuring out the files that are relative to my own project. That's when the lightbulb came on for me. Tsconfig.json is supposed to help the compiler know where the root folder is; but for some reason it's not reading my tsconfig.json file. It completely ignores it. As a result I had to create import.d.ts and manually add the <references> with tsconfig. Making everything relative certainly helped my issues because now it's not soooo complicated with all the go up 3 times, then do this, so that helped a lot; but curious as to how to get this project to read my tsconfig file so that I don't even have to add the references or at least how to get it to stop making me write 'go up a file' when everything is now relative to it. If interested I dropped a zip of this current one, I moved all the references even the phaser one into import.d.ts because I was testing the reference problem I was having. The only thing I can think of is that I used a command in my previous project to create a .json tsconfig file /simply add it (don't remember what command it was I was following a tutorial). But now whenever I move the file around it treats it as if the root is always behind it. I'm far away from that project but don't understand why it's doing that. My only problem right now is: Getting it to acknowledge my tsconfig.json file, so I can put all my 'references' there instead of bothering with all the references in import.d.ts Getting it to stop making me write to go up one file in order to acknowledge what is relative to it. practice-version 2.zip
  10. I do have some OOP knowledge; I never quite mastered Inheritance, Polymorphism and encapsulation though and this seems like a great opportunity to learn. I'm not sure why, but I get all sorts of compiler issues when I try to move my "Practice" phaser into a subfolder of my main project and reference within the file itself. The game compiles accurately, everything works, but node.js spits compiler errors at me saying it can't find namespaces etc. If I follow the compiler messages then I break my game and it doesn't work. But when I ignore them the game compiles and runs and plays anyway. If I ignore them and another problem comes up, the compiler won't help me figure it out because of previous errors it's caught on. So i'm confused because normally I trust what the compiler tells me but if I listen to it, it I'll break my game. I suspect it's do with referencing 'wild paths' you have mentioned/ having multiple phaser projects in sub folders if I understand wild paths from this context correctly. Node.Js doesn't seem to like that/is finicky about referencing and subfolders/folders. Can I ask: "What are wild paths in this context" ? as I suspect this may be one of the culprits next to export. Note: I have never heard the term wild paths before so somewhat confused about what they mean, but do think the paths are part of the problem with the errors. Update#3: So I figured out the errors. For whatever reason even when it's in its own folder I have to write: ../practice/phaser/phaser.d.ts instead of /phaser/phaser.d.ts this suggests that node.js thinks that the 'root' is in the folder behind it, but it does this no matter where I move it. Not sure why that's happening for me, but "referencing" sensitivity may have been the culprit in my case.
  11. !!!! Wow. I just went in to my own file and removed all the exports, fixed the .game (I had removed it during troubleshooting) and it compiled on fixing that alone! I have a few questions: Why did export namespace create that problem? I understood that this was my gameloop: this.game = new Phaser.Game(800, 600, Phaser.AUTO, 'content', { create: this.create }); (and would also be what I would use to adjust the size of my canvas if I wanted); but I'm looking at this new one, and I can't figure out what is representing the game loop, or how the Phaser Game Loop was called? In TitleScreenState, when it's changed to this.game.state.start -- where was (game) declared or defined? Thank you so much for your help! Man I've been on this for days!
  12. Yes! I attached the entire folder here. Note that there is a tsconfig folder two folders behind it: www/resources/practice the www folder contains a tsconfig file. practice.zip
  13. Yes GameRunningState is in there (it's called import.d.ts) which looks like this: /// <reference path="../practice/practice-gamerunning.ts" /> /// <reference path="../practice/practice-titlescreen.ts" /> /// <reference path="../practice/practice1.ts" /> /// <reference path="../../engine/typescript/phaser.d.ts" /> //--import.d.ts contains this code. Just in case, I took it out and put this in here, but it compiles with the same error. With the added error that states practice1.ts can't reference itself. But same error either way! /// <reference path="../practice/practice-gamerunning.ts" /> /// <reference path="../practice/practice-titlescreen.ts" /> /// <reference path="../practice/practice1.ts" /> export namespace GameFromScratch{ export class SimpleGame extends Phaser.Game{ public constructor() { super(); //this.game = new Phaser.Game(800, 600, Phaser.WEBGL, 'content'); this.state.add("GameRunningState", GameRunningState, false); this.state.add("TitleScreenState", TitleScreenState, false); this.state.start("TitleScreenState", true, true); } } } window.onload = () => { var game = new GameFromScratch.SimpleGame(); }; Error. ../practice/practice1.ts(16,48): error TS2304: Cannot find name 'GameRunningState'. ../practice/practice1.ts(17,48): error TS2304: Cannot find name 'TitleScreenState'. Also question: " //this.game = new Phaser.Game(800, 600, Phaser.WEBGL, 'content'); " if this is no longer referenced in the game, how do I adjust screen size and call the Phaser Game Loop?
  14. File Attempt #1: /// <reference path="../../engine/typescript/phaser.d.ts" /> /// <reference path="../practice/import.d.ts" /> export namespace GameFromScratch{ export class SimpleGame extends Phaser.Game{ public constructor() { super(Global.GAME_WIDTH, GLOBAL.GAME_HEIGHT, Phaser.AUTO, "content"); //this.game = new Phaser.Game(800, 600, Phaser.WEBGL, 'content'); ignored this.state.add("GameRunningState", GameRunningState, false); this.state.add("TitleScreenState", TitleScreenState, false); this.state.start("TitleScreenState", true, true); } } } window.onload = () => { var game = new GameFromScratch.SimpleGame(); }; Errors: ../practice/practice1.ts(13,19): error TS2304: Cannot find name 'Global'. ../practice/practice1.ts(13,38): error TS2304: Cannot find name 'GLOBAL'. ../practice/practice1.ts(16,48): error TS2304: Cannot find name 'GameRunningState'. ../practice/practice1.ts(17,48): error TS2304: Cannot find name 'TitleScreenState'. File Attempt #2: /// <reference path="../../engine/typescript/phaser.d.ts" /> /// <reference path="../practice/import.d.ts" /> export namespace GameFromScratch{ export class SimpleGame extends Phaser.Game{ public constructor() { super(); //this.game = new Phaser.Game(800, 600, Phaser.WEBGL, 'content'); ignored this.state.add("GameRunningState", GameRunningState, false); this.state.add("TitleScreenState", TitleScreenState, false); this.state.start("TitleScreenState", true, true); } } } window.onload = () => { var game = new GameFromScratch.SimpleGame(); }; Error: ../practice/practice1.ts(16,48): error TS2304: Cannot find name 'GameRunningState'. ../practice/practice1.ts(17,48): error TS2304: Cannot find name 'TitleScreenState'. File Attempt #3: Added this.game back to everything along with this.game= etc. same as original except with super(); empty export namespace GameFromScratch{ export class SimpleGame extends Phaser.Game{ public constructor() { super(); this.game = new Phaser.Game(800, 600, Phaser.WEBGL, 'content'); this.game.state.add("GameRunningState", GameRunningState, false); this.game.state.add("TitleScreenState", TitleScreenState, false); this.game.state.start("TitleScreenState", true, true); } } } window.onload = () => { var game = new GameFromScratch.SimpleGame(); }; Error: ../practice/practice1.ts(14,18): error TS2339: Property 'game' does not exist on type 'SimpleGame'. ../practice/practice1.ts(16,18): error TS2339: Property 'game' does not exist on type 'SimpleGame'. ../practice/practice1.ts(16,53): error TS2304: Cannot find name 'GameRunningState'. ../practice/practice1.ts(17,18): error TS2339: Property 'game' does not exist on type 'SimpleGame'. ../practice/practice1.ts(17,53): error TS2304: Cannot find name 'TitleScreenState'. ../practice/practice1.ts(18,18): error TS2339: Property 'game' does not exist on type 'SimpleGame'. Not sure where I'm on the right or wrong track with either one of these, but feel like I'm getting closer to a solution !!
  15. No it does not work. Changing it to ///<reference path="practice-gamerunning.ts" /> causes the "File not found" error, this is because practice is not my main folder, my main game folder has a tsconfig file in the folder behind "../practice/practice1.ts" I tried removing the tsconfig file and adding it into practice1.ts but it didn't work so I left it alone and just corrected the ../../<-- I eventually dropped all the files into one folder because figuring out these ../../../ and how many to use was getting confusing. My errors are currently as followed: ../practice/practice1.ts(16,53): error TS2304: Cannot find name 'GameRunningState'. --> this.game.state.add("GameRunningState", GameRunningState, false); ../practice/practice1.ts(17,53): error TS2304: Cannot find name 'TitleScreenState'. --> this.game.state.add("TitleScreenState", TitleScreenState, false); ../practice/practice1.ts(26,16): error TS2346: Supplied parameters do not match any signature of call target. With Error 16,53 and 27,53 representing my attempt to call GameRunningState; and with Error 26,16 referencing my attempt to call the SimpleGame module here: window.onload = () => { var game = new GameFromScratch.SimpleGame(); //<--- this is line 26, with line 16 being SimpleGame line. }; Whatever this issue is, it seems to be related to how I am calling and using modules. I just can't figure it out.