Wordpress/HTML5/Construct 2

Post reply
0 favourites
  • 13 posts
From the Asset Store
Target 2.0 Slot HTML5 Construct 2 and Construct 3
$15 USD
Casino? money? who knows? but the target is the same!
bellborn's avatar
bellborn

  • Anyone out there willing to answer complete noob questions about if/how a Construct 2 HTML5 canvas export could or could not be used in a wordpress site, ideally one running a Twenty Ten child theme?

    And - is this actually the correct area of the forum to ask questions on this topic?

  • You can run it anywhere you have access to Javascript. However you also need to have access to local storage, unless you change the urls pointing to resources within the script.

  • Thanks for the reply, newt. Did I mention I'm a total noob?

    1. I don't know what local storage is, let alone if I have access to it. I found this info from a quick google search, but the code parts are unreadable to me because I don't know anything about Java Script at all.

    Do I need to know Java to have access to local storage? Is that even the right question to ask?

    2. Again, did I mention I'm a noob at everything other than setting up a wordpress site and playing a bit with the css?

    3. Per #2: My understanding so far is: I would create a game and it would be exported in a file in HTML5 format. So I would have a file, yes? But then, what exactly would I do with that file? (and if the answer is "upload it" rather than paste it into the HTML editor when creating a wordpress page, I would need to know pretty much exactly where to upload it to. I do have FileZilla and can see where the wp-admin/js directory is, if that's relevant at all - is it?).

    4. See #2 above, I am not kidding around about that. As I suspect is now obvious.

    Apologies in advance if this is too basic to be asking here.

  • Honestly, I'm a bit of a noob myself when it comes to web stuff, but here goes.

    Local storage would be anything that the game uses, graphics, sounds, and the .js, that are separate files, the script you paste into your html page will use.

    So if you cant upload files to the same directory that the page will be in then you will have to alter the script you paste, and the Javascript files, and resources, that you will have to upload somewhere else, to point at each other.

    But, since you have ftp access, you don't have to worry about changing anything except the script you paste into the page.

    As far as setting up the script you paste, take a look at the exported html.

    You can pretty much copy everything in between ,<head>, and </head>, and paste that between those tags on your page, same goes for the body, except you paste the div where you want the game to show up.

    Thats just from my experimentation, you will probably want to look a few things up, like how to center the div, etc.

  • Local storage is probably the wrong term to use, since it usually refers to HTML5 local storage which is something different completely. I think newt means ftp access, basically.

    To make a C2 HTML5 app run on a Wordpress site you need two things:

    1) ability to upload the exported files to the server (often via ftp)

    2) ability to change the HTML code of the page (to insert the canvas tag).

    If your Wordpress is hosted by a provider, you probably can't do either. If it's your own server running Wordpress, you probably can do both. Where's your Wordpress hosted and can you modify it?

  • Hi Ashley,

    Thank you for the reply!

    The site is hosted by Blue Host. It's my domain through them. I don't know what you mean by provider. I just checked with Blue Host and they said I can do both of the things you specify.

    I can modify the files of whatever theme I use (css and php) - though I don't know what to do with php at all, so "can" is a very loose word there.

    1. Upload to server: Where specifically would I upload the exported files to? Could you give me an actual path/location? Or as close as you can get? I really truly have no clue where this would upload TO.

    2. HTML code: This is where things get especially confusing to me. There is a HTML text editor on each page, along with a visual editor. I've found little snippets of HTML5 code in tutorials on the web and tried them. I can insert a canvas tag in that HTML text editor and what's in the tag seems to work (eg it gives a defined area or whatever) but anything else (filling in the area with color, putting a line in there etc) doesn't work if I just take the code and paste it into the HTML text editor.

    But - do you mean something else when you say "the ability to change the HTML code of the page"? If so, what?

    (the rest of the page is, as far as I know, governed by the theme's css for the style, and the theme's php files for the rest of it)

  • I was thinking about how to answer the question, but to be honest I think a much simpler thing to do is:

    1) upload all the exported files to a new folder on your server (by ftp) - anywhere you like, then

    2) just link to index.html in that folder.

    If you know HTML you can modify index.html as much as you like to style like your blog, have instructions and help, and so on.

    It is possible to integrate it in to the Wordpress blog, but there are complications. For example, you could upload one game, but uploading a second would replace the first. This is because C2 doesn't yet give you any options when you click export - it just dumps the files to a folder. This is C2's fault - we haven't added the necessary features yet.

    I can go through how to integrate the game anyway if you like, but I think the link-to-a-folder will work better for now I'm afraid. I've added better export options to my todo list!

  • Thank you Ashley!

    So -- to make sure I understand your suggestion:

    1. I would basically create a page (or more than one) outside of the Wordpress environment, then (to the extent that my HTML knowledge/learning would allow) style it to look similar and link from the wordpress site to it?

    I've never done this, but it has been in the back of my mind. But -- yeah, I've never done it. So,

    2. If I understand your suggestion correctly, I could pick *anywhere* on the server to upload via ftp? Like for example, in a folder just under public_html?

    3. Then what I uploaded from C2 would already have an index.html in there to which I could link?

    4. And I could edit that index.html file? (my HTML is spotty, as I mostly have worked with css and not much of that - but it seems easy enough to learn)

    Am I getting this? Please correct me where I don't get it.

    And thanks. I am all for what would work now, so your workable suggestion is really important to me. And yeah, who knows, we might want to upload more than one game at some point, for sure.

    In the longer term, I do think it would be great if in the future C2 could work directly with/inside of wordpress -- feels like a lot of sites (and some web designers) are using it these days. So if you assess it to be worth the time/energy over the longer term, that would be fantastic.

  • You don't need step 1 - when you press Export in C2, one of the files it generates is called index.html. Then, you can edit that file how you like. HTML is fairly straightforward, there are tutorials on the internet. You can upload all the files C2 exported (including your edited index.html) anywhere you like - to its own folder is probably a good idea - and link to it from the blog.

    If you just want to try and get something working, just upload the entire folder C2 exports to the server and you should at least have the game running!

    You're right that this should be easier - you've arrived at a very early stage in C2's development though, we're still sorting these details out.

  • Ashley, thank you. This is great. Will also be avidly following C2's development.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • I have got a bit similar situation, I want to change the directory structure of C2 HTML5 export.

    Instead of placing everything in root, i want to place it in a folder and just index.html in root, something like this

    folder

    index.html

    I have tried to do this and I have changed few URLs which accessed js and json files in index.html but it wont work, maybe I am missing something.

  • You could have a subfolder with the "real" page, then iFrame it from your index.html outside of the folder maybe?

  • Here the solution

    my case:

    <iframe src="http://supercadstudio.com/carepiranaweb/index.html" height="800" width="600"></iframe>

    Generic example

    <iframe src="http://youwebsite.com/youforlder/index.html"></iframe>

    you must change: youwebsite and youfolder and ready!

Post reply
  • 13 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)