dinsdag 28 augustus 2012

Adventure part 1

Hi all,

Here is my new blog were you can follow my new programming adventures. I also use it as my own reference for what I am doing and things I discover. 
Today I restarted my work with craftyjs. This is a javascript game library. It uses sprites and is 2D or 2.5D. It is browser only.
As I am programming and working on ubuntu this is a nice way to program games without having to switch to windows. I often try out browser (MMO)RPG's but never find them quite what I want. At the moment I'm trying out Runes of Magic which works fine in Windows but the 3D part hates my linux. The browser version needs kylado which isn't available for linux and the downloadable version won't display much of the 3D stuff. I'm going to try another driver soon and hope it works. In the meantime I will tinker a bit with my own games.

So more about setting up craftyjs with ubuntu. I am using netbeans with php support now and I quite like it. It isn't perfect for it doesn't recognise all functions because of the crafty library.
I made a php project, copied my crafty.js file in de directory and started following the tutorial.
I don't ave that much experience with javascript so the tutorial is a bit confusing for me at times. I understand what they are saying but I have a hard time figuring out where to put the code. So I decided to help myself an you out by uploading the progress after every part of the tutorial.
Here is what my project looks like: 

Here you see the files I have in my project. First you see the crafty.js library. Then the game.js file. Here is all our game code. This is the opened file.
Then the by netbeans created index.php file. I'm not using this at the moment.
The main.html file is the file I use to run the game. This file also links the crafty.js file to the game file.
The rpg.js file is the reference I use from the crafty site. Sometimes when I'm not sure where to put code I take a peek over there. But it is an enourmous file so it is hard to find what I'm looking for. This file is why I decided to put this post on this blog. So I know what I'm doing and where code should be.
The last file is the sprite I downloaded from the crafty tutorial. I renamed it to sprites.png.
Here is what my game.js file looks like at the end of tutorial part 1. Oh this doesn't do much yet so don't worry. The functionality comes in part 2.
window.onload = function(){
    //start crafty
    Crafty.init(400,336);
    
        //the loading screen that will display while our assets load
    Crafty.scene("loading", function () {
        //load takes an array of assets and a callback when complete
        Crafty.load(["sprite.png"], function () {
            Crafty.scene("main"); //when everything is loaded, run the main scene
        });

        //black background with some loading text
        Crafty.background("#000");
        Crafty.e("2D, DOM, Text").attr({ w: 100, h: 20, x: 150, y: 120 })
                .text("Loading")
                .css({ "text-align": "center" });
    });
    Crafty.scene("loading");
    
    Crafty.scene("main", function () {
        generateWorld();
    }); 
        
};

And this is my main.html
<!DOCTYPE html>
<head>
    <script type="text/javascript" src="crafty.js"></script>
    <script type="text/javascript" src="game.js"></script>
    <title>My Crafty Game</title>
    <style>
    body, html { margin:0; padding: 0; overflow:hidden; font-family:Arial; font-size:20px }
    #cr-stage { border:2px solid black; margin:5px auto; color:white }
    </style>
</head>
<body>
</body>
</html>
Oh and by the way, I displayed the game.js part by using the <code><pre>insert code</code></pre> By using the code tag you get the different font. By using the pre tag you say that the layout should be the same. So no use of br tags. The second piece of text was a bit more difficult. I wanted to use the code tag again but it kept seeing it as html text. So I used the special character for the < and > signs. Which is &lt; and &gt;. This is used like &lt;html tag&gt; html stuff &lt;/html tag&gt; Oh and the I can display the text used for those special characters because I use the special character for & which is &amp;. If you want an overview of this you could watch the source code of this page or look at .
Oh and for writing these posts I use the Bluefish editor so I am able to highlight my html tags. It is a very small, neat and easy editor with a lot of functionality.
I hope this post is useful to anyone. If you have any questions leave or remarks or if you found this post usefull, leave a comment :).

Geen opmerkingen:

Een reactie plaatsen