Feb 18 2010

Rewrite of XML -> HTML conversion

Category: NXT RPG,WebdevelopmentSpiller @ 18:43

As I said previously, this process wasn’t very efficient. So I rewrote large parts of the code for the conversion of NXT RPG XML data files.

File system

All files have so far been placed in the same folder. So I decided to organize it a bit:

  • [folder] “global” : Contains all XML files that is used throughout the game
  • [folder] “graphics” : Contains all graphics used in the game
  • [folder] “levels” : Contains all levels used in the game
  • [folder] “shared” : Contains all XSLT files used for previewing/converting files
  • [folder] “strings” : Contains all strings used in the game
  • fileindex.xml : Contains a list over all game files

fileindex.xml

I wanted it to be possible to choose your own names, so “level42.xml” could instead be “Scary shopping mall.xml”. So fileindex.xml contains these names. It looks like this:
<files>
<global>
<gamestart>gamestart.xml</gamestart>
<gamedata>Gamedata.xml</gamedata>
<character_list>character list.xml</character_list>
<attack_list>attack list.xml</attack_list>
</global><levels>
<level id="1">lvl_1.xml</level>
<level id="2">lvl_2.xml</level>
<level id="3">lvl_3.xml</level>
</levels><graphics>
<sprite id="1">bg1.xml</sprite>
<sprite id="2">bg2.xml</sprite>
<characters>characters.xml</characters>
</graphics><strings>
<string id="1">strings_1.xml</string>
</strings>
</files>

It should be rather straight forward.

<global>

  • <gamestart> Filename of the file containing information needed for starting a new game.
  • <gamedata> Filename of the file containing information about the game, the name of the game and such.
  • <character_list> Filename of the file containing a list over all characters available in the game.
  • <attack_list> Filename of the file containing a list over all attacks available in the the game.

<levels>

  • <level id=”x”> Filename of the file containing the level data. “x” is a number from 1 to 254 which is used to identify the level.

<graphics>

  • <sprite id=”x”> Filename of the file containing information about the graphics used for level maps. “x” is a number from 1 to 254 which is used to identify the graphic sprites.
  • <characters> Filename of the file containing information about the graphics used for characters.

<strings>

  • <string id=”x” > Filename of the file containing a list of strings. “x” is a number from 1 to 254 which is used to identify the string list.

Issue in Firefox

This just doesn’t work that well in Firefox. Style sheets  accessed by “../” are blocked so basically nothing shows up if you try to open it. There is more about it here.

You can work abound the issue by opening “about:config” and change “security.fileuri.strict_origin_policy” to false. I don’t like it, but I’m not using Firefox so I’m not going to use time on it. However if any knows about a fix where it isn’t needed to move the files, inform me about it and I might fix it.

    Graphic files

    This needed to be a bit more organized. Up to now I had created a folder which was called the same as the ID for the level sprites (so something like “1”, “2” and so on…). Inside that folder was a image for each sprite, so quite a bit…

    In NXT RPG however the graphics are stored in one .RIC file. So I wanted to do the same here so the file looks like this:

    The sprites used for ID1

    Together with the image there is a XML file like this:

    <graphic>
    <filename>Lv1_bg.png</filename><type>bg</type>
    <id>1</id>

    <sprites>30</sprites>
    <size_x>10</size_x>
    </graphic>

    <graphic>

    • <filename> The filename of the image containing the graphic.
    • <type> The type of graphics. This can contain one of two values. “bg” is used for level sprites and “characters” is used for character sprites.
    • <id> The ID of “bg” graphics. If <type> is “characters” this value must be “0”.
    • <sprites> The amount of sprites contained in the image.
    • <size_x> The size of each sprite in pixels. All sprites are quadratic at this point.

    Implementation in HTML and CSS

    An empty <div> is given a class called “[type][id]_[number]” where “[type]” is <type> (“bg” or “characters”), [id] is <id> and “[number]” is the sprite you want. An example could be “bg1_4” if you want the sign sprite in the image above.

    The CSS is created dynamically and looks like this:

    [class*="bg1_"]{
    height:10px;
    width:10px;
    background-image:url('../graphics/Lv1_bg.png');
    }

    .bg1_4{
    background-position: -40px 0px;
    }
    A “.bg1_x” selector is created for each value of “x”

    Level files

    Those were main reason for rewriting it all. In Opera 10.50 beta it got corrupted if the HTML file became too large. Well, it really was large from the start, but most of it was just level previews that where repeated. So I wanted to remove those of course. (It didn’t work properly in IE either, but who cares…)

    I don’t fell like writing more right now, so I will make it short.

    Every level in fileindex.xml is created and assigned a (html) id based on the level (XML) ID. Then some CSS is assigned dynamically to connect the Events with the correct level preview. I will update this part later…

    Last heading

    There is still a few things to get done, but most of the functionality is already done.

    Any suggestions are welcomed.


    Feb 17 2010

    NXT RPG – an introduction

    Category: NXT RPGSpiller @ 16:32

    I thought the last post was pretty bad, and since most people wouldn’t know what NXT RPG even is, I thought I should say a little about it.

    NXT RPG

    Summery

    This is a Role Playing Game engine for the Lego Mindstorms NXT I’m developing in my spare time. The RPG type is highly inspired by the Pokemon games for Gameboy.

    Inspiration

    The first thought of making a RPG was back in the late spring/early summer of 2009. I hadn’t touched programming so much for some time and I simply wanted to start a new project. I have played the Pokemon games quite a bit and liked the gameplay, but there is also big issues with the actual gameplay. It is just a bit too easy, so I thought of making a RPG of something like Cat Mario.

    Then megamindstorms101 started the NXTasy Challenge #7, I thought why not as started work so I could enter it in the challenge.

    Why NXT?

    A lot of my friends have asked this, it is just some toy some kids and a few geeks have after all, so why?

    The NXTasy Challenge was just what finally got me started. I had recently moved to C++ instead of using Borland Pascal, but I only really knew how to make console programs in C++ I found quite limiting. With the NXT there is some easy commands to draw on the screen, so it would be easier to get started.

    But the most important reason is that the NXT “is just a toy”. It is not a highend computer with amazing 3D graphics, it is just a small minicomputer with 32KB RAM.

    Now you might ask, why is this a good thing? As weird as it might sound, I like limitations. Not because they are limiting, but that they wouldn’t necessarily allow you to use the first and easiest solution, you are forced to come up with other (and hopefully better) solutions. Every piece of code I write needs to be efficient because I don’t have a 3,6GHz CPU which wouldn’t even care. The NXT only have 32KB RAM, I can’t just waste too much memory. Secondly, there is only about 100KB memory back after the Firmware is installed, so program and game files must not become too big either. The 100x64px single color display is also fun.

    These limitations might mean that I can’t have all kinds of advanced features in the game. But they force me to select those which are actually important and not just bloat it with something most people wouldn’t even notice. And I need to implement those features as efficiently as possible.

    As I’m self-taught this is great practice to learn programming correctly and not just use whatever that seems to work.

    The game (or something)

    This didn’t exactly become a Cat Mario clone. I thought that should wait for a real game for PC if I still want to make another one after this project. Instead this became more like a Game engine, mostly because of my lack of inspiration. But also because I wanted to try to make something that will work for a multitude of games and not just one specific.

    The goal became that you could create a whole new game by just changing the data files without having to do anything with actual code.

    Gameplay

    You move in a strict quadratic grid, up down, left and right. Each step move to the next point in the grid, there are no middle positions. (There is some animation though.)

    Events happen only on steps. If you don’t move, nothing will happen.

    Battles are turn-based,  if you don’t make a move, nothing happens.

    Dependencies

    In order to make this game run properly you need:

    • nbc/nxc enhanced firmware 1.28
    • 4 touch sensors

    Tools used for developing

    • NXC
    • XML
    • XSLT
    • C++

    NXC is used for coding NXT RPG.

    The data files are stored in XML.

    XSLT is used to “preview” the  data files in a web-browser.

    An application written in C++ is used to convert the data files to binary data (since directly using the XML files would simply use too much space on the NXT). Right now XSLT is used as a middle step for converting the data files. (It creates a simple text code that is easier to convert.)


    Feb 13 2010

    Using :before/:after for extra background-images

    Category: NXT RPG,WebdevelopmentSpiller @ 00:32

    First a small introduction you might just as well skip… (actually, just scroll down to the bottom…=

    Level files used in NXT RPG are saved in binary of space reason, but this of course is hard to manually create and maintain and very much error prone. So I created my own tools using XML, XSLT, and made a small application to convert values to NXT binary values.

    It is pretty simple, the XML file stores data about the level, the XSLT file then creates a visual aid so it is easy to see what is wrong and a text code. The text code is then converted to binary by the application I wrote.

    End of story.

    The issue

    The XSLT file I made works, but it isn’t that efficient. The level is shown using X*Y images (which is often around 200); this really can’t be avoided. However I also include a small preview of the levels it is linked to, which adds another 200 per level. However I might need the preview in 2 places or more, but right now they aren’t reused. Because of this, the total amount of img elements normally adds up to 2000-4000. Ugh…

    Optimizing: Small steps first

    The level is viewed in two modes: normal and solid. Normal will show the level map as it looks like in the game, solid will show an overlay which tells which blocks on the map are, well, solid.

    This overlay is created by adding another X*Y images, where the overlay graphic are loaded on some elements. Not  that efficient…

    The solution became to use :before in CSS to add a absolutely positioned block inside the <img> which contain the overlay graphic.

    I tried it, it worked fine in Opera and it simplified the XSLT and resulting HTML a bit. Then I opened it in FireFox and :before didn’t work. Same thing in IE8. After a bit of testing I discovered that :before doesn’t work on <img> elements. After changing it to <div> and background-image the problem disappeared.

    I’m not really sure what is correct, but Opera seems to allow generated content everywhere, you can even say “head{display:block;content:”yay”}” and the “yay” appears at the top of the page. So I guess it is Opera that is at fault…

    Going crazy

    Then I wondered, how many “overlays” could I create with this method? By using both “content:url(‘img.png’)” and “background-image” you would have two. Then you could also add :after to double this to 4. Alternatively you could also create an underlay by setting background-image on the <div>.

    To test it out I tried to create a box with rounded corners using only a single <div>.

    It is basically the same as previously, however :before and :after is set to display:block. It is just useful for this example since it makes the positioning quite a bit easier…

    Box with rounded corners

    This will not work in IE6/7, so the advantage of using this instead of border-radius might not be that big… Secondly, positioning the imaged specified by “content:” can be a bit more tricky if the element is flexible in size… But it might be interesting in other cases…

    The code is here, without the images though:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="main.css"/>
    <style>
    .Rbox{
    width:25%;
    background-color:#6267ff;
    padding:0 10px;
    }
    .Rbox:before, .Rbox:after{
    display:block;
    height:10px;
    background-repeat:no-repeat;
    background-position:top right;
    line-height:0px; /* remove issue with whitespace... */
    margin:0 -10px;
    }
    .Rbox:before{
    content:url('lt.png');
    background-image:url('rt.png');
    }
    .Rbox:after{
    content:url('lb.png');
    background-image:url('rb.png');
    }
    </style>
    </head><body>
    <div>something... texty texty... texty texty... texty texty... texty texty... texty texty... texty texty... texty texty... </div>
    </body>
    </html> 

    Tags:


    Feb 11 2010

    Über high internet speeds?

    Category: SoftwareSpiller @ 22:30

    When I heard that Google plans to deliver 1 Gb/s broardband, I just keeps wondering, what are you going to use it for? 128MB/s is certainly impressive, I fear my HDD wouldn’t be able to keep up with the speed. (I think the max writing speed for my HDD is 80MB/s, but I’m not sure…)

    (To avoid confusion, all speeds from this point is given in xxxxbytes per second, and not in bits.)

    The reason I keep wondering is that I’m quite satisfied with my 0.5MB/s connection. Well, of course, some downloads could become faster if I got a faster connection.

    But how much will it mean to me in the end? When I download new drivers from nVdia the limitation is clearly on my end, but if I download a file from Rapidshare my download speed is normally around 80KB/s. I admit, I download as a free user, they limit the connection speed until I pay up. (But you will just end up with getting a link to yet another file sharing service in the end, so it doesn’t matter…) But I see this pattern repeat when downloading. When downloading video’s from YouTube I get a speed on about 90KB/s (but it changes quite a bit). MegaUploads normally gives me ~350KB/s, and about the same with Mediafire. (All these numbers are rather rough though!)

    The point is, that even with a 0.5MB/s connection I often experience that many servers aren’t able to deliver such speeds. I have even experienced a server which I could only download with ~10KB/s most of the time. (and yes, just loading the pages was daim slow…)

    I have really nothing against the speeds though, I just let it download in the background anyway. I just keep asking, if I already experience many servers that aren’t able to deliver speeds of 0.5MB/s, how many can deliver a speed that is 256 times as high?

    Secondly, a normal webpage is normally under 512KB. That would take a second with my connection. A second is longer that it might sound, but it still isn’t that much. If you have a loading time on 0.25 second it probably wouldn’t be that noticeable. So a 2MB/s connection should be enough. But I suspect a lot of new factors appears now that wasn’t noticeable before. The time it takes to actually connect with the server, time to process the request, all kinds of things I don’t know anything about to be honest…

    Compression?

    I fear that insanely high speeds in the future might remove the focus on developing new and better forms of compressions. Because the speeds are so high, people wouldn’t pay attention on the file size of homepages and other shared contents. No one tries to do it efficiently, as long as it works it is fine…

    But of course you can say, what is the point of using a lot of time on making it efficient if it isn’t going to help any in the end…

    Ahh, I shouldn’t really worry that much about it anyway…

    In the end I would rather just have a higher upload speed, a thing many broadband companies prefer to hide in a dark corner in the basement. I don’t upload that often (but I tend to do it more often now because of school assignments), but 64KB/s isn’t that much. It is 1/8 of my download speed, honestly why should it be that slow? It is not like it will be that expensive for the broadband company to raise it a bit, when people really isn’t using it that much?

    Is it really worth it?

    Of course it doesn’t hurt to have a download speed of 128MB/s, but lets face it from differently. Let’s say you pay A for you current speed B and if you want, you could get a speed of B*X if you pay A*X. In other words, we imagine you could raise you connection speed by raising you cost by the same amount.

    To take an example, I pay about 170DKK each month for a speed of 0.5MB/s. If I wanted a speed of 3MB/s, I would need to pay: (3MB/s) / (0.5MB/s) * 170DKK = 1020DKK

    It is a quite crude way of calculating the costs and it will probably give quite high results (which is the point). But never the less, according to that model, how fast a connection would you be willing to pay for?

    Tags: , ,