How do I integrate my game deeply into a webpage?

Hi,

I'm developing a full-fledged website to support my game. Including all kinds of views from login/registration, leaderboards, chat, etc. Basically, the game itself is just a component on a page.

I would prefer to integrate deeply the game into the overall webpage. By this I mean, to have the login and all the details listed before handled by a proper web framework and have Construct to run only the game (it's a board game, like chess). How would you integrate such a setup with a Construct3 game?

Hi,

I'm developing a full-fledged website to support my game. Including all kinds of views from login/registration, leaderboards, chat, etc. Basically, the game itself is just a component on a page.

I would prefer to integrate deeply the game into the overall webpage. By this I mean, to have the login and all the details listed before handled by a proper web framework and have Construct to run only the game (it's a board game, like chess). How would you integrate such a setup with a Construct3 game?

I'm working on a browser based game using Construct as the engine. Yea, I know that sounds strange but it's true. I've created full fledged php sites that do what you're looking to do, handle registrations, logins, email validation, session tracking, etc. I thought long and hard about this before making this decision but, here's what I chose and why:

The website will handle any forums, or discussions, things of this nature. Things that aren't linked to the game. The only thing specifically game-related it will handle is email verification (click the link in your e-mail). That page will be pure HTML.

Construct is going to handle the login and even the account creation. All of that is going to be handled by passing the events to a collection of php scripts via Ajax with JSON responses coming back to the client. By doing this, I'm first ensuring that any login attempt comes from the game itself (Ajax does this nicely with CORS.) I'm also guaranteeing that any account creation comes from the game itself. Unless someone seriously hacks the C3 code, this means I won't need captcha's to make sure they're human.

Plus, now that I've figured out this plugin:

construct.net/en/make-games/addons/190/html-element

I can use html elements to generate the login screen and still have sprites flying around, making for a much more enticing login.

And with this plugin:

construct.net/en/make-games/addons/166/inject-css

I can actually see how the stylesheet looks without having to upload the game to the server.

PLUS: I've used the html plugin above to load a nice html vertical menu into the client that passes clicks to the C3 engine. 1 element on the layout handling 8 buttons in an unordered list with CSS handling all the cool stuff like mouse-over events and colors. Creating that same menu in construct and trying to keep all the buttons where I wanted them would have taken hours and dozens of events.

So, while I could do my game the way you plan, I've looked at the advantages and disadvantages of both and I see no reason now not to put the HTML inside the client and reduce the server load to just handling php data manipulation.

And you just gave me a great idea thinking about your decision. Since I can now use real HTML5 inside the game, I can generate news and events in HTML and have those passed to the game as well and even have sprites flying around them if I choose.

Thanks for your post!

I was thinking about this too. Have been playing a bit with the HTML Element addon, and quicky found some bugs there. I don't think it's ready for production.

First, of all, I'm not speaking about the backend side. I'm mostly concerned about the best frontend approach possible. Given amazing tools like React and Preact, I would prefer to generate my non-canvas related UI code with these tools, have some messaging feature between the DOM and canvas / plugins, and run the (strictly speaking) game with Construct.

Now, I looking into the Inject CSS plugin a bit more, as I've found it pretty reliable. Currently, I plan to use Inject CSS to

1. create a div that I can use as the main container for UI elements

2. attach an ID to the canvas created by Construct

3. at start hide the canvas using css, loaded by Inject CSS

This way I can provide the non-game UI inside Construct, but without Construct.

Until now, this is only a plan. I'll see how it works out in the next few weeks. My major concerns are UI elements that I might want to position on top of the canvas during gameplay. To position these elements, I'll need the canvas offset and size, and start playing with absolute positioning of the HTML elements. Will see how it works out!

So far, I haven't run into any issues with the HTML Element. If you have found bugs I know that less than a month ago I know that el3um4s was responding to issues on the GitHub page. Try reporting them.

My forte is PHP. I can read JS and if someone beats me severely I can probably write code in JS so I can't comment on React/Preact.

I like your idea of using a div to hide the content. I'v been trying to come up with a way to make a message box work well. That might do.

As for positioning, yea. Construct may work well when resizing games but I personally hate the letterbox black bars on the sides. I've already got absolute positioning in place with a function and in all of the layout startup.

Fengist Thank you to have referenced me :)

nagyv

I created the two plugins to test my knowledge of javascript. It is for this reason that the examples are related to FreeCodeCamp.

I created them a while ago. To say, the documentation for SDKDOMInstanceBase was not yet available. As soon as I have some time I plan to update them.

Given amazing tools like React and Preact, I would prefer to generate my non-canvas related UI code with these tools, have some messaging feature between the DOM and canvas / plugins, and run the (strictly speaking) game with Construct.

I think that to do this you need a completely different plugin.

Hi guys!

I know that the docs were far from perfect a few months ago. Run into issues with it as well. :)

Anyway, I have a working prototype with React.

If you would be interested, check out the example project at dropbox.com/s/u0nie14z67a99ar/ReactPluginExample.c3p

or the github repo: github.com/nagyv/c3-reactpluginexample

This example shows the React app to be instantiable, but actually, I plan to run a single react app for a given layout. This way I can cover the whole UI with it, no black bars on the sides. :)