Adding HTML News to any Construct project.

6

Tagged

Stats

1,565 visits, 2,603 views

Tools

Share

Translations

This tutorial hasn't been translated.

Create a translation

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 16 May, 2019.

This tutorial is a result of a recent forum post on how to accomplish this task. Since this is a pretty powerful method of keeping in touch with your playerbase, I decided it was time for a tutorial.

What this tutorial will do:

Teach you how to add in dynamic HTML news to any construct project.

What you'll need for this project:

  • A web server with PHP installed. - A shared host will be more than adequate.
  • A text editor to modify a .php file (don't worry, you won't have to know PHP to do this).
  • A PHP news script. FusionNews is an older PHP script that will produce an output that Construct will LOVE. It has an admin interface to add, edit and delete news and, you can easily make a template to make the news look exactly the way you want. You can find it here: https://sourceforge.net/projects/fnews/
  • The HTMLElement plugin found here: https://www.construct.net/en/make-games/addons/190/html-element

I'm going to assume you have some knowledge of working with web servers and won't go into extreme details. I'm also not going to go into huge detail about how to install Fusion News or how to run it. It's really simple, upload it, run the install.php and follow the prompts. There are docs that explain it and the interface is pretty intuitive.

After installing Fusion News on your webserver, you can test to see if the news is working by loading news.php in a browser. Example: mysite.com/News/news.php. If everything works, you should see something like this in your browser:

That's the raw HTML output of Fusion News. Which is wonderful because that can easily be incorporated into Construct. The first problem we need to tackle is getting the PHP file into a format that AJAX can work with. To do that, we need to create a new file. I called mine myNews.php and it looks like this:

<?php

//delete the next 2 lines when you have it working.  This is just to report errors for development purposes.
error_reporting(-1);
ini_set("display_errors", "1"); 

header('Access-Control-Allow-Methods: "POST"');
$http_origin = @$_SERVER['HTTP_ORIGIN'];

//change the mysite.com to your URL
if ($http_origin == "https://preview.construct.net" || $http_origin == "https://www.mysite.com") {
    header("Access-Control-Allow-Origin: $http_origin");
}

require "news.php";

?>

This php script accomplishes 2 things. First, it turns error reporting on so that you can see if anything goes wrong and second, it sets the script up to accept AJAX calls from very specific sites. I already have it configured to accept calls from the Construct editor at preview.construct.net. You only need to change the mysite.com to the URL for your website.

After it checks to make sure the AJAX call is coming from the right places, it then loads up the news.php file.

Once you've edited the mysite, save this as myNews.php and upload it to the same directory as the Fusion News php files.

Now, in Construct. I started a new project and I need to place two objects on the layout. An HTMLElement and an AJAX.

To configure the HTMLElement we need to make a few changes to the properties.

  • change the name to myNewsBox
  • Under HTML, check the box "Text like HTML"
  • Under HTML, erase the word 'text' from the text field.
  • Under Inline Style, unckeck the box 'Use Preview Text'
  • Under Inline Style, uncheck the box 'Auto Font Size'
  • Under Inline Style, In the overflow-x dropdown, select hidden
  • Under Inline Style, In the overflow-y dropdown, select auto

In the event sheet:

  • Add a new event System On Start Of Layout and add an AJAX.requestURL action.
  • Add the tag "myNews" and the url to your myNews.php. This should be on the same url you changed in the php file above.

Let's add in an error check.

  • Add a new event, AJAX On Error with the tag "myNews". For the action, set the myNewsBox.text to "Server Error"

And finally, what to do with the news once the AJAX gets it.

  • Add a new event Ajax On completed with the tag "myNews" For the action set the myNewsBox.text to AJAX.LastData.

Your event sheet should look a lot like like this:

Now, if you did everything correctly and you didn't get a server error, when you run the preview you should see something like this:

Now it may not look like much but here's the good part. Fusion News uses templates. If you know a little CSS you can easily go in and make some changes just to the template. For example: I can change the Fusion News Short & Long News template from this:

<h2>{cat_name}: {subject}</h2>

to this:

<h2 style="color:red">{cat_name}: {subject}</h2>

and get this:

Because of the templates in Fusion News, you can easily go in and create your own classes and tags and, with a bit of CSS imagination, make the news look exactly the way you want.

  • 0 Comments

Want to leave a comment? Login or Register an account!