Construct 2 games and projects in WordPress

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/wordpress_construct2_plugin_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!

DavidM

You should definitely support different canvas sizes, it'll be difficult to use without!

I'm willing to add an Export for Wordpress option, but does it really need to change anything? Aren't you just running a C2 game in an iframe? You need to take off the page margin so it top-left aligns and that should be it.

This is actually quite cool. What would be really awesome is if there was a wordpress plugin to just upload the game to a post. I could see a lot of people using that feature

Again Wordpress to come. And what about Joomla?

For Joomla would be ideal if we could have application in Yootheme ZOO, which is a catalog of games, which you can add games. Joomla community to reap even indifferent to the ZOO.

I am testing the ability to insert index file playing as a regular html code, but it certainly is not enough.

This is actually quite cool. What would be really awesome is if there was a wordpress plugin to just upload the game to a post. I could see a lot of people using that feature

Agreed. This is best handled from the WordPress side, as a WP plugin, rather than a C2 export option.

Ashley, the tool doesn't actually wrap it in an iframe, instead it just adds the canvas element wherever WordPress detects occurrences of the shortcode. It also asks for the 'c2runtime.js' code and makes adjustments for the image and media urls. From there, you just copy/paste the adjusted code into a new .js file and include that in the plugin folder.

mammoth, Velojet, essentially that's what this particular tool does. It outputs a plugin. You just follow the instructions and you'll have your own plugin at the very end. It's just a matter of copy/paste.

This can definitely be much better done as an exporter for Construct 2 though. Construct 2 could very easily export a plugin, the same way this tool outputs a plugin. The only complication really, is with other than static height/width, full-screen apps, in other words.

As for a WordPress plugin that lets you upload your games, I think that could be done and I've considered that as well. It'd basically do what this tool does, but letting you upload the files, then it handles the slight conversion process internally, providing you with a shortcode on a per-upload basis. The upload process for this all is a bit of a beast though.

DrNickTo, I've worked extensively with WordPress so I'm much more comfortable with integration with it. And I'm sorry to say, I really hate Joomla myself, I just think its interface is incredibly bulky and tough to work with. I very much love Drupal though and would love to tackle that integration. Perhaps someone else might be willing to delve into Joomla integration.

Ashley, sorry I failed to fully answer your question with my response. This tool exports a legitimate WordPress plugin and it actually doesn't include the C2 exported .html or files other than the images and media.

It outputs it's own .php and .js files that work like the C2 exported files so that WordPress doesn't just link to that .html file for inclusion. It's basically a fuller integration than simply linking to the files.

It actually adjusts the image urls and the PHP portion echoes the plugin's url to the page so the adjusted Javascript file can access it. An exporter that does the same would just need to change the image and media urls likewise.

[EDIT: It would also need to include the PHP code. I'll gladly assist with that if this is all doable.]

It's my hope to advance this tool as well, so that it also includes an easy way to access WordPress' admin-ajax, for easy communication with the WordPress database. I need that for my own projects.

Also, if you're interested, the tool can easily be included here on the Scirra website, for reasons of speed, as my server's incredibly slow. It's just a Javascript file with some HTML form elements. I can email you that if you like.

I worked in Wordpress, and Joomla, and in Drupal. Everywhere there are advantages and disadvantages. Let us together attack the DLE. <img src="smileys/smiley36.gif" border="0" align="middle" /> CMS - is another good way of evolution Construct 2, and you can not just dismiss this sector of the market due to personal preference. Somebody has to think about supporting other CMS besides Wordpress. But that's another topic for discussion.

Sorry what I meant was upload it to your wordpress server.

... This can definitely be much better done as an exporter for Construct 2 though. Construct 2 could very easily export a plugin, the same way this tool outputs a plugin ...

I'm afraid I can't see that myself. Since WordPress generates HTML pages and Construct 2 exports a HTML page, then surely it's better handled as a WordPress plugin that would attend to the details of integration. Any PHP coding, such as you mention, is definitely a job for a WordPress plugin rather than a Construct 2 exporter.

DrNickTo, I see your point and Joomla being one of the big 3 CMS, it definitely sounds like a good idea for integration. It's just that I don't really have the time/desire to pursue that particular one. Hopefully someone will take up that task though, it'd be nice to see C2 integration with all CMS.

mammoth, I understand and I think the key point is simplicity, making it as easy as possible for someone to utilize a C2 project in WordPress. That's why I was stressing an exporter that exports a WordPress plugin.

Velojet, I think I was unclear about what I was getting at. I meant that it would be best to have an exporter for C2 that exports a WordPress plugin, the same way this tool does. :)

I think I was unclear about what I was getting at. I meant that it would be best to have an exporter for C2 that exports a WordPress plugin, the same way this tool does. :)

Ugotsta: I wonder if that's what you really mean? A WP plugin is an add-on that WP users only need to do a one-time install into their WP setup, like this Flash plugin that enables Flash movies (or in our case, C2 games) to be embedded into WP-generated posts/pages. Talk of having C2 export a WP plugin just doesn't make sense to me.

Velojet, the tool and the method I described does indeed provide an add-on where users would only need to do a one-time install, of their particular C2 project. It's on a per-game basis.

The type of plugin you're describing would likely allow for the uploading of any C2 exported project and would then make it easy to include the project in a WP page. It's just a different type of plugin, though they're both technically plugins. The use cases are just different.

The plugin I'm talking about here allows a game developer to make their single project available very easily to the WP community. For instance, if someone made an alarm clock with C2, they could package it up in a plugin so WP users could use it on their site.

With an exporter in C2, it would be that much easier for the developer to achieve. And this is very useful for game makers wishing to make their games easily available to the WP community.

I'm not at all saying this needs to be done, an exporter like that seems likely to take a bit of time away from C2 developers. I'm just saying, if anyone's interested in making such an exporter, I'll gladly assist however I can.

That said, it's possible to make a plugin that lets users upload their C2 projects (likely best done by uploading a zip file), at which point the plugin would provide an easy way to use that project. I've been considering how that could best be done, myself. However, I'm also having a hard time seeing how that would be as useful unless someone was intending to open their very own arcade site (a broader market).

On a side-note, in case you're not familiar with it (I've met quite a lot of folks who weren't aware of this one), WordPress can now use particular embeds without any additional plugins.

More on that here: http://codex.wordpress.org/Embeds

The type of plugin you're describing would likely allow for the uploading of any C2 exported project and would then make it easy to include the project in a WP page.

Ugotsta

Yes, that's exactly what I mean, and what qualifies as a WP plugin in my book.

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. For example ...

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.

... you don't need to regexp search the original c2runtime.js for height/width (they're not there anyway), much less ask users to type them in - they can be taken from the C2 generated index.html (after all that's essentially what the c2runtime.js does).

And size is not per-layout. The window size set in the project properties is what matters here.

As velojet said, just check the size given to the canvas tag in the index.html of exported project to see the designed size of the game.