Jun 24, 2013

Reading and parsing a JSON file with LibGDX

There are many reasons why you would need to read a JSON file in your libgdx (android or desktop) application. For example, you could store the configuration of your app, or maybe data stored about some game configuration you need.

If you need to read a JSON file, you can go and read the official LibGDX guide. I've done so and after a lot of trial and error I made it work. I also include here the code needed to read a plain text JSON file using LibGDX, which is also very useful for many other tasks.

First, you must know what kind of data you want to read, and therefore you must create the JSON file accordingly. I have taken the official LibGDX documentation about JSON parsing, and twisted the example to fit my needs. Here is my JSON file:

{
enemies: [
        {
                type: "billy",
                x: 10,
                y: 15
        },
        {
                type: "sammy",
                x: 11,
                y: 13
        }
],
name: Lab
}
The example is supposed to be the configuration of a certain map. You can see that I have a list of enemies first, with three fields: type, x, and y (position of the enemy on the map). Finally I have the name of the map where the enemies are located.

You need to create two classes: one for the enemies data (with the three members: type, x and y, it's better to use the same name you used on your JSON but you can change that too). And the root class. In my example I called them Config (for the root) and Position (for the enemy positions):

    public static class Config{
         private ArrayList enemies;
         private String name;
    }
   

    public static class Position {
        private String type;
        private int x;
        private int y;
    }
Please note that these two classes are static! Otherwise the compiler will throw an error. Note also that I made this two classes internal for my Map class, and therefore it seems Java wants them to be static also.
Also note that we use ArrayList in order to store several elements, though we don't tell their type.

 Finally, here is the code to load and deserialize the JSON file you created some steps before (called "map.json" in my example). Please note also that there are many ways to set the FileHandle object, in my case I made the file internal and located it into the "assets" folder, since it's meant to be an android project someday:
    public void loadJson(){       
        FileHandle handle = Gdx.files.internal("assets/map.json");
        String fileContent = handle.readString();                  
        Json  json = new Json();
        json.setElementType(Config.class, "enemies", Position.class);
        Config data = new Config();
        data = json.fromJson(Config.class, fileContent);
        Gdx.app.log(GameManager.LOG, "Data name = " + data.name);
        for(Object e :data.enemies){  
            Position p = (Position)e;
            Gdx.app.log(GameManager.LOG, "type = " + p.type + "x = " + p.x + "y =" + p.y);
        }
    }   

The explanation is simple. Firstly, we create a FileHandle with the file name and the correct location of the JSON file. After that, we read it's contents and put them into a String object. After that, we create a JSON object and we tell it that there is some element into Config class that it's of Position class, and it's marked by the tag "enemies". Then we create a Config object, which will hold the deserialized data. With the call to "json.fromJson" we deserialize the fileContent string and turn it into a Config object.
After that, we can print happily the contents of our object, in this case the Object returned by the ArrayList must be casted to Position in order to get the correct data to print.
    
I hope this helps the LibGDX community in some way, since the documentation is a bit scarce and examples of usage are not that easy to find on the net. Just let me know in the comments if you know how to improve this code, your impressions or problems with this stuff.

Jun 14, 2013

Wordpress: easy way to have colum shortcodes

Sometimes you have to create a new Wordpress template that requires columns. The hard way to achieve this is via CSS: you can somehow add HTML code to your posts and pages and then set the rules in your CSS files so they show as the columns.

The easyest way I found to achieve this is via a cool Wordpress plugin called Column Shortcodes. It lets you use a series of shortcodes so you can put many different column sizes in your pages with simply copying a shortcode. This way your posts are less messy and you don't have to touch it's HTML code.

Just download the plugin, install it and then you will be able to use all these shortcodes:

[full_width][/full_width]
[one_half][/one_half]
[one_half_last][/one_half_last]
[one_third][/one_third]
[one_third_last][/one_third_last]
[two_third][/two_third]
[two_third_last][/two_third_last]
[one_fourth][/one_fourth]
[one_fourth_last][/one_fourth_last]
[three_fourth][/three_fourth]
[three_fourth_last][/three_fourth_last]
[one_fifth][/one_fifth]
[one_fifth_last][/one_fifth_last]
[two_fifth][/two_fifth]
[two_fifth_last][/two_fifth_last]
[three_fifth][/three_fifth]
[three_fifth_last][/three_fifth_last]
[four_fifth][/four_fifth]
[four_fifth_last][/four_fifth_last]
[one_sixth][/one_sixth]
[one_sixth_last][/one_sixth_last]
 
 
Remember to put your text between the tags. For example if you want a left text that is in a 2/3 column and a right column that has 1/3 your post should look like:

[two_third]This is my left column text[/two_third]
[two_third]This is my right column text[/two_third] 


Just make sure you use the corresponding tags: if you use one_third then you should use two_thirds if you want to put something in the remaining text. Of course you could nest another column set inside a column set like:

[two_third][one_half]Hello world[/one_half][one_half_last]Lorem ipsum[/one_half_last] [/two_third] 
[one_third_last]Just another text[/one_third_last]
...

By the way, the "_last" word at the end of the tag just makes the column stick to the right, or that's what I guess looking at the CSS provided by the plugin.

Have fun with the columns :D

Wordpress: Add a slider the easy way

If you need to add a slider to your wordpress theme you can do many things. You can hardcode it into your page template, but that's the hard way and not very flexible.

You can make it quickly and easily using the Meta Slider plugin. It's a very well made plugin for Wordpress that let's you easily put a slider into a post, page or even in all your pages if you wish.

The steps to do it are:

1. Download the plugin and install as stated in the link above (check Installation).
2. Activate your plugin in your admin panel.
3. Look to the bottom of the control column, you should see a green button tagged "MetaSlider".
4. Press the "+" sign on top left of the screen to add a new slider.
5. Configure your slider with the images you want to show. Test it before you go to the next step (there is a button to save and test it).
6. Copy the shortcode (in case you want to put it into a post or page in your Wordpress) or the PHP code also provided by the plugin, and paste it where you need it.
7. Enjoy :-D

Hope it helps you!