zaterdag 8 september 2012

New project

I'm switching from a 2.5D/isometric to an 3D program. So this is why I started playing around with openGL and Irrlicht. I chose openGL because I want to run the program cross OS. So here is a little tutorial on how I made an Irrlicht project template with Code::blocks because I didn't want to re-enter my settings every time. I first wanted to use Netbeans but I still cant figure out how to make them compatible...
So I unpacked the irrlicht library in my home/Development folder. No make or configure needed ad far as I remember.
So start up Code::blocks and make a new console project. I named it IrrlichtTemplate but you can use whatever you want. There is an irrlicht project but it gives error on build so I haven't used it.
You don't have to edit anything yet just click next.
After that I right-click on the project and choose build options.
The I choose the Linker Settings tab and add the following libraries:
Irrlicht
GL
Xxf86vm
Xext
X11

After that I go to the tab Search directories and the smaller tab Compiler. Browse to where I unpacked the irrlicht folder. I go into the folder and open the include folder. Then click Open. I don't keep it as a relative path but that is personal preference.
In the Linker tab I add the /usr/X11R6/lib$(LIBSELECT).
I also add the linux library by browsing to the irrlicht folder then lib/Linux.
Then you should be able to compile.

It is basically this tutorial.
Just a remainder about Code::blocks, if you have your main.cpp open and press ctrl-s it just saves your main.cpp, not your project settings. Make sure you save them to or else you have to redo this tutorial....

I also edited my main.cpp so I don't have to enter all the namespaces and libraries.This is my main.cpp

#include 
#include 


using namespace irr;
using namespace core;
using namespace scene;
using namespace video;
using namespace io;
using namespace gui;

#ifdef _IRR_WINDOWS_
#pragma comment(lib, "Irrlicht.lib")
#pragma comment(linker, "/subsystem:windows /ENTRY:mainCRTStartup")
#endif

int main()
{

    return 0;
}


Make sure you have your irrlicht project open.
After I saved my project settings I chose file->save project as template...
Then just click next.

 So now you can make a new project and under user templates should be your new Irrlicht template.
So if I figure more stuff out about Irrlicht or openGL I'll post it :).
If you have any errors or questions after flowing this guide please ask.

woensdag 29 augustus 2012

Craftyjs tutorial part 2

Hi all,

The second part of the tutorial is not hat hard so I'm just posting the code I have now. I tested it on ubunu 12.04 in firefox.
I saw that I made a minor mistake in the code from yesterday but I just edited that. It was loading the world scene first and the loading scene after. Not how it is supposed to be XD.
So here is what the game.js code should look like now:
/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
window.onload = function(){
    //start crafty
    Crafty.init(400,336);
    Crafty.sprite(16, "sprites.png", {
        grass1: [0, 0],
        grass2: [1, 0],
        grass3: [2, 0],
        grass4: [3, 0],
        flower: [0, 1],
        bush1: [0, 2],
        bush2: [1, 2],
        player: [0, 3],
        enemy: [0, 3],
        banana: [4, 0],
        empty: [4, 0]
    });
    function generateWorld() {
        //loop through all tiles
        for (var i = 0; i < 25; i++) {
            for (var j = 0; j < 21; j++) {
                //place grass on all tiles
                grassType = Crafty.math.randomInt(1, 4);
                Crafty.e("2D, DOM, grass" + grassType)
                    .attr({ x: i * 16, y: j * 16, z:1 });
                    //create a fence of bushes
                if(i === 0 || i === 24 || j === 0 || j === 20)
                    Crafty.e("2D, DOM, solid, bush" + Crafty.math.randomInt(1, 2))
                    .attr({ x: i * 16, y: j * 16, z: 2 });
                //generate some nice flowers within the boundaries of the outer bushes
                if (i > 0 && i < 24 && j > 0 && j < 20
                        && Crafty.math.randomInt(0, 50) > 30
                        && !(i === 1 && j >= 16)
                        && !(i === 23 && j <= 4)) {
                    var f = Crafty.e("2D, DOM, flower, solid, SpriteAnimation, explodable")
                            .attr({ x: i * 16, y: j * 16, z: 1000 })
                            .animate("wind", 0, 1, 3)
                            .animate('wind', 80, -1)
                            .bind('explode', function() {
                                this.destroy();
                            });
                }
                //grid of bushes
                if((i % 2 === 0) && (j % 2 === 0)) {
                    Crafty.e("2D, DOM, solid, bush1")
                        .attr({x: i * 16, y: j * 16, z: 2000})
                }
            }
        }
    };
    
        //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();
    }); 
};
If you have any questions about the code, about the tutorial or this blog leave a message and I'll answer it as soon as possible.

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 :).