Featured Posts

Nigel Bloemendal Rss

PHP Build a Webgame Tutorial Part 1

Posted on : 09-12-2011 | By : SurudoiRyu | In : Development, Game Design, HTML, Nigel (Head caveman), PHP, Tutorials

Tags: , , , , ,

0

So here the first part finally is!

Hello guys,

Let me introduce you what we will be doing the first part of this tutorial:

  • Download all the stuff we need.
  • Install it and set up the project.
  • First look at what we are working with.
  • Make a template in our own style with basic HTML & CSS code.
  • Explaining what we have done and what you can do before the next part.

Files – What do we need to get started ?

First of all we need something to compile the PHP code on our local machine.
PHP is a server side script that needs to be compiled by the server and then sended to the viewing user in propper HTML.
HTML code is a browser/client script that can be viewed with it need to be compiled by a server first.

For this we dont really need a compiler for the PHP as we won’t be using PHP in now but we will be using it in the next part!

While doing the whole tutorial we will be using a few library’s:

1. CodeIgniter (an Application Development Framework, for clean scripting in MVC)

2. Smarty (a Template Engine for PHP this will be used as the (V)iew in CodeIgniter)

3. jQuery (a JavaScript library for some nice and easy to code effects)

4. And HTML and CSS.


If you like to customize your website other then the tutorial, you should read the documents here to know what you can with it. Also if i forget to explain something they got a full documentation on their sites so you can check it out on their website.

Lets get started!
First we need Xampp go to www.apachefriends.org/en/xampp.html and download the version you need (Windows / Linux etc.) install the program by following the instructions given.

After you have installed it with success you should have a directory like “C:\xampp\htdocs\
this is the directory where you should put your projects in to access them with your browser.
For more information about Xampp please read it on the website.

Now lets go to your directory “C:\xampp\htdocs\” and create a new folder.
Name this foldermygame” (or whatever you like to call it, but do not use spacebar, numbers or uppercase characters)

I created a basic template for you with all the connections and Database we will be using during this tutorial.
Download it and place the files in the folder you just created.


——————–

You must be logged in to view the hidden contents.

After you have placed this in “C:\xampp\htdocs\{your_folder_name}\” we will need to adjust some config files to get it working propper.

  • Open C:\xampp\htdocs\{your_folder_name}\.htaccess, change line 3 “tutorial” with {your_folder_name}
  • Open C:\xampp\htdocs\{your_folder_name}\application\config\constants.php, change line 40 “tutorial” with {your_folder_name}
  • Open C:\xampp\htdocs\{your_folder_name}\application\config\database.php, change the variables with your database setup, also on line 47 change “tutorial” to the database name you like to use (We will set the database after this).


Now lets go to your database.

Open your browser and go to “http://localhost/phpmyadmin/” this should open the database screen for you.

Create a database with the name you earlier picked in the database.php file.
Go to import and select the database file i created for you. “C:\xampp\htdocs\{your_folder_name}\database\complete.sql

At this point we have done all we need for now.
Lets try to open the website: “http://localhost/{your_folder_name}/” if you did it all right, then you should see: “This will be you template file.” on your screen.

You can grab a cup of coffee now or some food cause you completed the first part,

Lets go further with the real thing now!

Lets go to the template file and start designing our webgame!
Open “http://localhost/{your_folder_name}/application/views/template.tpl“.

You will see the next lines in it:

Here we will begin with creating our style.
If you don’t have any knowledge with basic HTML i like to reffer you to my other tutorials i have some basic HTML tutorials there.

Click here for the first HTML tutorial
Click here for the second HTML tutorial
Click here for the third HTML tutorial
Click here for the fourth HTML tutorial

Lets create the frame for the website first, we will need the page to be centered and have a menu at the top and when a player logged in we want a menu at the left aswell.
We will create a page with this setup.

Logo and menu
Menu
if
logged
in
Here all the information will go.
Your copyright etc.

Lets start with writing a wrapper to keep it all together and in the center.

template.tpl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{* Header will be inserted at the very beginning of every page as it will always be the same. *}
{include file='template_header.tpl'}

{* Content will be diffrent and keep every page that is called *}
<div id="wrapper">
<div id="weblayout">
<div id="header">Logo and menu</div>
<div>
<div id="menu">Menu if logged in</div>
<div id="content">Here all the information will go.{$content}</div>
</div>
<div id="footer">Your copyright etc.</div>
</div>
</div>
{* Footer will be inserted at the end of every page as it is always the same. *}
{include file='template_footer.tpl'}

What we have done here is created some blocks with text in it, it will look like some simple text rules now if you open your website but we will fix this!
We gave every div an unique name so we can reconize what it will be (aswell as the code will reconize this).

Lets give the website some color!
Open “http://localhost/{your_folder_name}/public/css/default_style.css“.

You will see 4 things in there:

  1. body{}
  2. a{}
  3. a:link{}
  4. a:hover{}

Lets put our just created blocks in it and give them some color  (If you give an element the Tag id=”" you can call them with # in your css file)

default_style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
body{
background-color: #000000;
color: #000000;
font-family: arial;
font-size: 12px;
margin: 0px;
padding: 0px;
}

a{

}

a:link{

}

a:hover{

}

#wrapper{
/* we need the full screen so we can center easly in the browser */
width:100%;

}

#weblayout{
width: 950px; /* width of our website */
border: 1px solid #FFFFFF;
margin: 0px auto;
}

#header{
height:225px;
width: 100%;
background-color: #FF0000;
}

#menu{
float:left;
width:225px;
min-height: 300px;
background-color: #00FF00;
}

#content{
float:right;
width:725px;
min-height: 300px;
background-color: #FFFF00;
}

#footer{
clear: both;
height:30px;
width: 100%;
background-color: #0000FF;
}

If you save our work and try to open you website again you will see a big difference with the last time you visited.
We gave the blocks some style and created the first part of our mockup.
Do you want to know more about css? Try my tutorial or visit w3schools for more information about what you can do with it.

At this point i will stop with part 1, now it is time for you guy’s to play with your website (mockup) create something nice for the game you got on your mind!
The next tutorial we will be creating many things for the website like the menu, the contents, and more! so be sure to check often for updates!

Leave a message or screenshots please, i would like to see how other’s are doing or if you are stuck at a point i could help you out with it.

Good luck and have fun!

PDF Download    Verstuur artikel als PDF   

Website finally online

Posted on : 14-10-2011 | By : SurudoiRyu | In : Nigel (Head caveman), Updates

Tags: , , , , , , , , , ,

0

Today we are proud to announce that our new website is finally online!
It took some time to create but we are finally there.
The website is writen in dutch language, we won’t go international with it, but i you have a project you would like us to do, then we can think about it and perhaps do it anyway.

Soon we will continue with My Galaxy Pet again, but for now our website is more important.

http://www.ungahstudios.com

PDF    Verstuur artikel als PDF   

My Galaxy Pet Status

Posted on : 16-02-2011 | By : SurudoiRyu | In : Development, Game Design, My Galaxy Pet, Nigel (Head caveman), Updates

Tags: , , , , , , , ,

0

Hey peepz,

Today im happy to announce that we are almost ready for the first alpha stage for My Galaxy Pet.

We only got a few more things to do before we really gonna start an alpha test.

One of those things is finishing the flash template which will load the custom made player into the game.
And the other is that we want a nice looking frontpage for as long as we are developing the website, where you all can view the updates we have made before the website goes online.

The Alpha test will be in a closed group so please don’t ask for an invite.

The website will be found here: http://www.mygalaxypet.com

PDF Creator    Verstuur artikel als PDF   

It’s been a while…

Posted on : 11-10-2010 | By : SurudoiRyu | In : Development, Game Design, My Galaxy Pet, Nigel (Head caveman)

Tags: , , , , ,

0

It’s been a while since i have posted something.
At this point i can finally give you readers some eye-candy.
To show you where i am busy with.
It is not much but it give’s enough detail of what it will be ;)

Enjoy!
Our advertisement banner!

PDF Creator    Verstuur artikel als PDF   

Unity3D Game – Creating a cartoon game

Posted on : 12-07-2010 | By : SurudoiRyu | In : Development, Nigel (Head caveman)

Tags: , , , , , ,

0

Hey mensen,



Ik ben begonnen aan het uitwerken van een spel.

Ik laat meer weten zodra er meer is :)

Voor nu kunnen jullie alleen nog maar kijken en uittesten!



ga naar – deze site.



Lopen kun je met wasd of pijltjes.

Spatie is oppakken

Uitkijkposten kunnen overgenomen worden.

Lever de spullen wel in bij de juiste Uitkijkpost anders gaat het naar de tegen partij.

met de muis kun je rond kijken.



Er komt nog veel meer aan ik probeer de pagina geupdate te houden dus daar zul je de veranderingen zien, en wat er in de maak is.

Warneer ik een mijlpaal bereikt hebt laat ik het hier ook weten!



Ideëen en Kritiek is altijd welkom :) let wel op dat dit development stadium is en er ook nog veel moet gebeuren ;)



Greetzzzz,



PDF Printer    Verstuur artikel als PDF   

Game Contest Place is known!

Posted on : 28-06-2010 | By : SurudoiRyu | In : Levensverhaal, Nigel (Head caveman)

Tags: , , , , , ,

0

Hey peepz,

De uitslag is eindelijk bekend van de wedstrijd waar ik aan meedeed met Sanity Online.
En ik sta op de….. 1ste Plek!!!
Je kunt op award’s boven in het menu me embleem zien :)

Dit is goed nieuws natuurlijk, en voor mij een grote stap dichterbij de gamedesign wereld :D

Vanaf nu heb ik weer wat meer vrij tijd over en hoef ik geen 18/7 meer te werken aan de game en me eigen werk.
Maar nu kan ik meer tijd besteden aan tutorial’s voor jullie!

Greetzzz,

Creëer PDF    Verstuur artikel als PDF   

RealmCrafter Standard Tutorial – Mount up your horses

Posted on : 20-06-2010 | By : SurudoiRyu | In : Nigel (Head caveman), RealmCrafter, Tutorials, Updates

Tags: , , , , , , , ,

0

Hi guy’s someone asked me for a mount script in RealmCrafter engine.
So… Here it is.
Keep in mind TYPING OVER IS BETTER THEN COPY PASTE IT!
Any problem’s or upgrades you can post here :)

First start a new script you will see something similar to this:

Using “RC_Core.rcm”
; TestEnvironment
; Date/Time: 1:57:37 on 20-6-2010
; By Nigel on PC_VAN_NIGEL

Function Main()

End Function

First we need to think of what we want.
This is what im think off.

  • Get the player
  • Get the players coordinates
  • Get the zone of the Player
  • Get the mount model from the library
  • Spawn the mount near the player
  • Make the mount your, pet so only u can use it
  • Hop on the mount when u click it
  • Hop off when u click away from it
  • Mount runs away and dissappear when it is unmounted
  • First we need the first 2 lines of the list:

    Using "RC_Core.rcm"
    ; TestEnvironment
    ; Date/Time: 1:57:37 on 20-6-2010
    ; By Nigel on PC_VAN_NIGEL

    Function Main()
    Player = Actor()

    pX# = ActorX(Player)
    pY# = ActorY(Player)
    pZ# = ActorZ(Player)
    End Function

    With this we have the Player stored in the variable Player and the location of the player.
    Now we want to get the zone the player is in and the mount id and spawn it near the player.

    Using "RC_Core.rcm"
    ; TestEnvironment
    ; Date/Time: 1:57:37 on 20-6-2010
    ; By Nigel on PC_VAN_NIGEL

    Function Main()
    Player = Actor()
    Zone$ = ActorZone(Player)
    Mount = ActorID("Horse","Mount")

    rd = Rand(25,50)
    pX# = ActorX(Player)
    pY# = ActorY(Player)
    pZ# = ActorZ(Player)
    spawnMount = Spawn(Mount,Zone,pX+rd,pY+10,pZ+rd)
    End Function

    Ok now we have created something that will be visible! Hoorray!
    Save the script call it SummonMount or something u like.
    And go to your editor.
    Open your ability's and assign this script to one of your ability's
    After your did that you could give it to a shop dealer or your ingame commands to quick try it.

    (Ingame Command's way)

    Function GiveMount()
    Player = Actor()
    If PlayerIsGM(Player) = 1
    AddAbility(Player, "YourAbilityNameWithTheQuotes")
    output( Player, "Gained the Mount ability.", 255, 0, 0 )
    EndIf
    End Function

    Save all your work and start your game.
    When you are ingame just type /GiveMount and you will notice in the chat it say's "Gained the Mount Ability".
    This is a good sign!
    Open your Ability's Window and learn it.
    Put it in your QuickSlots and press it to use.
    If all go good you will now see your horse or any other mount you wrote down!
    If not check your server log's if there is any error.

    Lets go to the next lines:

    Using "RC_Core.rcm"
    ; TestEnvironment
    ; Date/Time: 1:57:37 on 20-6-2010
    ; By Nigel on PC_VAN_NIGEL

    Function Main()
    Player = Actor()
    Zone$ = ActorZone(Player)
    Mount = ActorID("Horse","Mount")

    rd = Rand(1,3)
    pX# = ActorX(Player)
    pY# = ActorY(Player)
    pZ# = ActorZ(Player)
    spawnMount = Spawn(Mount,Zone,pX+rd,pY+10,pZ+rd)
    SetLeader(spawnMount ,Player)
    SetActorAIState(spawnMount ,7)

    End Function

    With this you it is now bound to you as player so only you can ride it
    Now lets do the last point to let the mount walk away when you dismount

    Open your Mount.rsl
    You will see something similar to this in it:

    Using "RC_Core.rcm"
    ; Default mounting change script for player characters
    ; You may alter this script however you like, but DO NOT RENAME OR DELETE IT

    ; This function is called when a player mounts an actor
    ; The actor is the player, the context actor is the mount
    Function Mount()
    ; Done
    Return
    End Function

    ; This function is called when a player dismounts from an actor
    ; The actor is the player, the context actor is the ex-mount
    Function Dismount()
    Return
    End Function

    Lets alter the script so it will walk away and dissappear.

    Using "RC_Core.rcm"
    ; Default mounting change script for player characters
    ; You may alter this script however you like, but DO NOT RENAME OR DELETE IT

    ; This function is called when a player mounts an actor
    ; The actor is the player, the context actor is the mount
    Function Mount()
    ; Done
    Return
    End Function

    ; This function is called when a player dismounts from an actor
    ; The actor is the player, the context actor is the ex-mount
    Function Dismount()
    DoEvents(50)
    C = ContextActor()
    Player = Actor()
    pX = ActorX(Player)
    pZ = ActorZ(Player)
    rd = Rand(25,50)
    SetActorDestination(C, pX+rd, pZ+rd)
    DoEvents(5000)
    KillActor(C)
    End Function

    Now with this all inserted try it out! save your work and have fun :)
    You could offcourse upgrade it with more options like only spawn 1 time.
    Or on spawn it runs to you etc, etc.

    PDF    Verstuur artikel als PDF   

    Unity3D game tutorial – Coin Drop Casino Game

    Posted on : 05-06-2010 | By : SurudoiRyu | In : C#, Nigel (Head caveman), Tutorials, Unity 3D

    Tags: , , , , , , ,

    0

    I decided instead of creating a step by step tutorial i will just publish the source.
    This way i hope other will help eachother here to improve the source by posting it.
    There can be done much more to this mini game then i did. :)
    I just don’t have much time at the moment to create a full tutorial cause of the game contest i’m in.


    Want to download the Package ? You will have to create an account and sign in.
    When you have done that the bottom content will become visible with a download link ;)

    Press the brown cylinder slots to insert a coin in 1 of the 2 slots :)



    ——————–


    You must be logged in to view the hidden contents.

    Creëer PDF    Verstuur artikel als PDF   

    Course C#/ASPX

    Posted on : 28-05-2010 | By : SurudoiRyu | In : Development, Nigel (Head caveman), Sanity, Updates

    Tags: , , , , , , , , ,

    0

    Hey peepzzz,

    Vandaag heb ik de uitslag binnen van mijn cursus examen voor C#/ASPX
    Ben met een 8 geëindigd :D

    Ook wil ik even melden dat de server van Sanity Online weer offline is!
    De meerderheid wou graag nog een verlenging van een maand :)
    Dus ik ben nog meer leuke dingen aan het toevoegen zodat het nog leuker word om te spelen.

    met o.a. :

    Nieuwe Skins
    Mounts (snel vervoer)
    Craftskills (Mining, Smithing , Harvesting , Cooking , Petting)
    Nieuwe Items
    Verbeterde icoontjes
    En nog veeel en veeeeel meer ;)

    Houd mijn website in de gaten volgende maand voor de nieuwe release :)

    Ook is de website verbeterd op een aantal punten (Je kunt nu de tutorials ook downloaden in pdf formaat ;) kijk onderaan elke post, vul je email in en het word verstuurd naar je mail toe.

    Greeeetzzzzzz,

    Creëer PDF    Verstuur artikel als PDF   

    Sanity Online goes Public!

    Posted on : 15-05-2010 | By : SurudoiRyu | In : Development, Levensverhaal, Nigel (Head caveman), Sanity, Updates

    Tags: , , , , , , , ,

    0

    Hey peepz,

    Vandaag gaat Sanity Online voor iedereen open!
    Kijk snel op http://sanity.ungahstudios.com en download de client.

    Je kunt in het spel een account maken!

    Ik hou jullie op de hoogte voor de plek waar we op komen te staan we hopen natuurlijk 1ste :)

    Ook heb ik vandaag mijn Cursus afgerond in c# aspx me eind opdracht gaat ook beoordeeld worden.
    Volgende maand word dus een spannende maand :D

    Hierna zal ik weer tijd hebben om nieuwe tutorials te schrijven dus mogen er nog vragen zijn naar tutorials stel ze gerust en ik laat weten of ik je ermee kan helpen!

    Greetzzz,

    Creëer PDF    Verstuur artikel als PDF