Construct 2 games and projects in WordPress

Right, the index.html has the canvas size, but I didn't want to ask users to paste in yet another piece of text. I've opted to ask for the height and width because there are some additions I'm planning to add regarding them, like a fluid wrapper, so the game could resize when used with a responsive theme.

The height/width are indeed contained in c2runtime.js as well though. It's just a tough process of grabbing that data from the runtime as opposed to index.html.

It seems to me that all the handwork required by your form/tool could/should be automated by a generalised WP plugin for C2 HTML5 exports.

Yes, it could be automated as such, though the dynamic between these 2 plugin concepts is different. As I mentioned earlier, if a developer wanted to release their game, let's say it's just a simple tic-tac-toe game, to the WP community, they could package up their project with the tool and do so.

This would be preferable to them giving instructions on installing the generalized WP C2 plugin and then downloading and installing their zipped project, for example. It's just a step easier for those wishing to use just that one game/app.

Incidentally, I just threw together a WP plugin that allows for easy integration of Inform 7 games and it provides the sort of generalized support you're referring to here regarding C2. The thing is though, it doesn't currently support games with extra resources, like images and sounds. That actually is the tricky thing about this type of C2 plugin too.

It takes quite a bit of consideration as to how to store such resources in WordPress. One would most likely use the Media Library to store resources (after unzipping process) and then store the locations of the relevant files in the database. I'm pretty sure that would be the optimal way to go about it, though I've not yet tackled that.

EDIT: I only just realized these resources could be stored in sub-folders in the plugin folder, though I'm not so sure of the implications of that. The plugin would need to provide a robust uninstall process as well.

If anyone's interested, the code behind the tool I made is available both in the javascript on the page as well as in the WP plugin code (PHP). Portions of it could come in very handy should anyone want to tackle this plugin idea themselves.

Right, the index.html has the canvas size, but I didn't want to ask users to paste in yet another piece of text.

Definitely not my idea! I was trying to indicate that your plugin code should extract the width and height, without any user intervention.

... Yes, it could be automated as such ...

Not only 'could', but 'should' :) Make it a real tool that relieves WP users of attending to all those details that can/should be attended to by a sufficiently smart plugin.

Velojet, you mentioned earlier that index.html has the canvas dimensions, thus my response was addressing that.

You mentioned previously...

... you don't need to regexp search the original c2runtime.js for height/width (they're not there anyway)

As I also clarified, c2runtime.js does have the dimensions as well, so they can be extracted with a regex search, it's just a tougher one than getting the dimensions from the index.html file.

Not only 'could', but 'should' :) Make it a real tool that relieves WP users of attending to all those details that can/should be attended to by a sufficiently smart plugin.

I have to reiterate, there are uses for the tool's method, as in cases where a developer wants to release just their game and not have users download another plugin and have to upload their project file as well.

What you're essentially saying is that this is "not a real tool". But the fact is that it is, and it exports a legitimate WordPress plugin, by definition. It's incredibly useful in specific cases, though obviously not for all cases, such as when someone wants to run their own WP-based arcade.

Ugotsta

Sorry, I think I'm missing something here. I really don't understand why you say ...

Right, the index.html has the canvas size, but I didn't want to ask users to paste in yet another piece of text.

... when the width and height can be easily extracted by a script from index.html, rather than having "to ask users to paste in yet another piece of text" ??

Right, my mention of index.html was in response to yours and Kyatric's responses. I was addressing the tool in specific, as it doesn't currently ask for the index.html contents.

At that particular point in this discussion, I was not addressing the issue of creating a generalized plugin. I was just referring to the tool under discussion at the time.

Kyatric, as I've been working on another game, I couldn't help but mention, in C2, dimensions are indeed on a per-layout basis. I'm rather sure they're not used (I've not tried varying layout dimensions), but they are there as parameters in the layout section.

Yes there are parameters for the layout's size in the layout section, but when it comes to the exported project size it has nothing to do with the layout.

Only the window size (in the project's properties) is to account for. You can have 10000X100000 layouts in a 320X200 window, all that will be displayed will be this 320X200 window.

Right, my mention of index.html was in response to yours and Kyatric's responses. I was addressing the tool in specific, as it doesn't currently ask for the index.html contents.

At that particular point in this discussion, I was not addressing the issue of creating a generalized plugin. I was just referring to the tool under discussion at the time.

But shouldn't even "the tool under discussion at the time" be extracting the width and height from index.html?

Two advantages (major goals for all software tools):

1) Eliminate possible errors in user entry.

2) Eliminate tedious handwork for users.

But shouldn't even "the tool under discussion at the time" be extracting the width and height from index.html?

I believe it would be great to auto-extract that and thus I believe it would be best done at the exporter level, where the data is more easily available. That's why I mentioned that.

The tool at my site could do it, it's just that it would require either the user copy-pasting their index.html contents into the form, or it would require a very tricky regex search that could very easily get broken by future C2 versions.

Given those two options, I instead went with a form input that asks for the canvas dimensions. This has an advantage in that I can use a bit of jQuery to handle additional features, like a fluid-width canvas, so a C2 project could resize within a responsive theme. I've actually experimented with that with success in Google Chrome, though the other browsers work strangely differently.

That said, I've always held in deep consideration, making software that is as easy as possible for users to use. I agree those are excellent goals you listed and I always consider these things myself in projects I work on.

However, I think I may have misunderstood you on one point. Are you actually suggesting that a WordPress plugin be made that, itself, exports a WordPress plugin?

If so, I overlooked the possibility you were referring to that.

However, I think I may have misunderstood you on one point. Are you actually suggesting that a WordPress plugin be made that, itself, exports a WordPress plugin?

No, no misunderstanding. I had in mind a standard WordPress plugin that would be listed in the Plugin Directory.

> But shouldn't even "the tool under discussion at the time" be extracting the width and height from index.html?

... it would require a very tricky regex search that could very easily get broken by future C2 versions.

I can't see that. It's just a matter of looking for the <canvas> tag in index.html and extracting the values from its width and height attributes - pretty standard regex stuff. And because C2, exporting to HTML5, is always going to generate a <canvas> tag, there's just no chance that it "could very easily get broken by future C2 versions".

I can't see that. It's just a matter of looking for the <canvas> tag in index.html and extracting the values from its width and height attributes - pretty standard regex stuff. And because C2, exporting to HTML5, is always going to generate a <canvas> tag, there's just no chance that it "could very easily get broken by future C2 versions".

I don't think you're actually reading what I'm saying. I was referring to the tool's current method. That's it.

Whether you think it ought to work differently or not is beside the point. The tool is very useful for a specific purpose, a commercial one no less, but a different purpose than what you're referring to.

I'd be more than happy to see a plugin in the WP repo that provides easy and full integration with C2 projects. I just doubt I'd really have the time to pursue that just this moment, myself.

Hi everyone!

I've delayed far too long in posting this, but here it finally is. I've thrown together a Javascript-based form that helps you to port over exported Construct 2 projects to a WordPress plugin.

The form/tool is available from my Cloud9 IDE account as follows:

https://c9.io/ugotsta/tools/workspace/w ... maker.html

I've used it for quite some time in a number of ported projects, some of which are listed in the article, so I know it works well given my own circumstances.

There's a lot more still to consider though, so please feel free to add your thoughts if you have any. I'll be keeping an eye on this thread as well as the comments on that article (comments are done via Facebook to simplify login/validation).

I'd love to see this type of thing built into the export process, so if I can be of assistance to that effect, please do let me know!

3-30-2012 UPDATE: I've just updated the tool so it now asks for height and width and includes that in the output canvas. I couldn't easily regexp search the original c2runtime.js for height/width, especially since dimensions are per-layout, so I've just added it as a setting in the tool's page.

3-15-2013 UPDATE: Form now available from my Cloud9 IDE account, as the website's currently down. Incidentally, Cloud9 is blazingly faster than my previous host, so it's much quicker to use.

Cheers!

DavidMUgotsta2013-03-16 05:08:50

Hello David

The download link does not work anymore. Do you have an alternative download link?

Hey —,

Terribly sorry for that! It's actually still up at Cloud9 but that definitely wasn't the optimal place to post it. It's now up at GitHub but I'll have to look at updating and having it on a GitHub page.

For now, you can find the code here:

https://github.com/Ugotsta/wordpress-plugin-maker-for-construct2

And I've just set it up once again through Cloud9:

https://ide.c9.io/ugotsta/wordpress-plugin-maker-for-construct2

A live-preview link (this will only be available a short time:

https://preview.c9.io/ugotsta/wordpress-plugin-maker-for-construct2/index.html?_c9_id=livepreview0&_c9_host=https://ide.c9.io

Hope that helps for now, I've been planning out a way to allow uploading of the HTML5 files into WordPress so that it automatically makes the game available via shortcode. No ETA, but I'm working toward that, just need to find the time!

Cheers,

David

Hello David,

I know i'm a bit late to the party, are you still doing anything with this Plugin Creator?

I have been trying for several months on-and-off to find a good way to integrate an exported game to WordPress, without much luck. It's fairly straightforward to upload all the files to the root folder and just link to the index (renamed for obvious reasons) file, though this method doesn't wrap the game in the WP core so can't take advantage of the security features.

I did have partial luck creating a custom theme page template and including the generated code from the index file but no matter what i tried i couldn't c2runtime.js or any other assets to open int he page, even when I edited the Construct 2 core files to amend the path to the assets.

I have downloaded the plugin files from Github, run them both on my PC and on a live web server but couldn't get anything out of it. Am I missing something or is it just because C2 has had a few updates?

Any help appreciated

A quick update.

I managed to get it working using MS Edge (weird, I know), it created the .php and .js which appeared to be OK. I then followed the instructions with 2 different games, the first I just dumped all the exported files into the zip file and the second just the new files, images and media folders along with the logo.png.

The plugins installed as expected in WordPress. However, nothing was visible on the page where I included the shortcode, though the page did appear to resize to match the canvas sises I had put in.

It looks as though the links to the assets aren't being generated or recognised.

Any ideas anyone?