Web Development with Phaser?

[Riddle]

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:

1. The Site is Wordpress via Shared Hosting
2. The site is a website you can explore like a game (it tells a story)
3. It will have the ability to scroll to different 'regions' example w/characters you can ask questions to (who talk back with text)
4. The option to turn music on/off
5. 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?

 

[BobbyDogfish]

Well you have to put all your site in a canvas element. You have to do some work on the menu, the transition etc. But yes of course it's realistic. I don't know how your site will look but for me it's totally feasible.

[Milton]

It would be similar to a pure Flash website. Very cool, but not popular. It's all about loading times and responsiveness.
I would just use Phaser where you need it.

[drhayes]

My primary concern with doing text-based games in Phaser is twofold: canvases aren't so great at sophisticated text rendering, and canvases lose out on accessibility concerns vs. straight HTML tags.

For sounds specifically you should check out howler.js. It uses WebAudio and has fallbacks if that's not available. And for pushing the edges of the envelope with straight HTML/CSS, check out http://tympanus.net/codrops/. They have all kinds of demo and code around doing cool things with HTML/CSS (like, say, http://tympanus.net/Development/InteractivePoints/).

[Riddle]

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!

1. Tangle (Reactive documents) <= for the storytelling text-based part.
2. Scrollmagic (for horizontal scrolling) w/
3. TweenMax/Greensock (for animation)
4. Howler (for Audio)

 

 

 

 

 

 

[jdnichollsc]

Hi guys! What is the SCALE mode in Phaser to create fullScreen canvas like http://flashvhtml.com/? 

Regards,

[reaganry]

I got a lot from this thread - thanks! i've been looking at things like twine/unity for interactive fiction + graphics, but wanted something webnative, low overhead. Is Tangle working for you? I saw it hasnt been updated in 5 years, so I was thinking there's something more current...

[Riddle]

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.