7 replies to this topic

[Feelay]

Hi!

I am working on a text-based RPG game. I'm coding it in PHP, XHTML and CSS.

I was wondering. I want to make a map, and thought of making a X/Y cordination system work as that map.

But I was wondering, do anyone of you know how I can make such a map?

I want the player to stand in the middle. every cell should have a value, with a variable/ array.
I want it to have about 100-500 cells. but not all visible at once. about 100 cells visible on the page. and every time I move to a square, the character will stay in the middle, and the map will update all cells.. I don't know if you understand, cus I've never been good at explaining things =/

The 2 main questions is, what is the easiest way to make such a cordination system? loops`? can anyone please show me an example?
And, how do I assign a value to each cell, so that I can use it in an if-statement.
Example:

if($user['cord']==$cellX8Y3){blabla}

And $cellX8Y3 is a variable holding the vale of a specific cell.

Thanks //Feelay

[wutske]

It's probably a bit more complex to do (but it's better code than using tables), but it's doable with divs.
First you need a main div that will hold your map, you must provide a width and height (eg. 1000 x 200) for it. Inside this div you'll make new div's, also with fixed sizes (eg 10x10). Using the css "position: relative", "top" and "left" properties, you can position your smaller div's inside the larger div.
For example
HTML

<div id="map_container">
<div class="mini_map" id="m11"></div>
<div class="mini_map" id="m12"></div>
<div class="mini_map" id="m21"></div>
<div class="mini_map" id="m22"></div>
</div>

CSS

#map_container {
 width: 20px;
 height: 20px;
}

div.mini_map {
 width: 10px;
 height: 10px;
 position: relative;
}

#m11 {
 top: 0px;
 left: 0px;
}

#m12 {
 top: 0px;
 left: 10px;
}

#m21 {
 top: 10px;
 left: 0px;
}

#m22 {
 top: 10px;
 left: 10px;
}

The CSS code is a bit complex. You could also use classes to position the divs

<div id="map_container">
<div class="mini_map top0 left0" id="m11"></div>
<div class="mini_map top0 left10" id="m12"></div>
<div class="mini_map top10 left0" id="m21"></div>
<div class="mini_map top10 left10" id="m22"></div>
</div>

CSS

#map_container {
 width: 20px;
 height: 20px;
}

div.mini_map {
 width: 10px;
 height: 10px;
 position: relative;
}

div.top0 {
 top: 0px;
}

div.top10 {
 top: 10px;
}

div.left0 {
 left: 0px;
}

div.left10 {
 left: 10px;
}

Do note that I kept the id parameter for the smaller div's, this way you can alter every div using for example javescript.

[khalilov]

I made a similar coordinate system once but i didn't use alot of code, just make a php GET script and make the CSS code variable.

echo "<div style='left:".$x."'>";

I think that is how i made it, just load a background image and use this to view the pic. x would be absicssa*width of each box. You can also use span tags to show coordinates if you hover. You can also do the same with height.

[Feelay]

thanks for the replies

hmm, If I want the map to be 50*50 "boxes", and I want every box to have different backgrounds.. or I want some boxes to have a grass background, others to have sand, and some of them have water, etc. Now the hard thing isn't to make them have backgrounds.

But anyone knows a fast and simple way to create 50*50 boxes (2500 I think that is) ._.?
Or is the only way to code them in a CSS file, and then just use them as divs =S?

heh, I know wutskes way should make my brain light up.. But I'm always slow when learning new things.. I just know basic CSS (A)

[wutske]

If you have something like dreamweaver you could create a 50x50 table (btw, it works too with tables, I just don't like using them except for data), just 3 clicks.

If not, you could make a for loop in PHP that prints the proper HTML syntax

[khalilov]

you can do it in a loop, make a table in the data base having the coordinates and give each pic an id. In a loop make a switch statement on that id and printout the background image made up of several small image repeated.
Can you be more clear on the coordiante system? the example i gave in my previous reply is about only one unique pic appearing on a big image according to certain coordinates. If thats your case you can use what i said in the two posts and make it happen.

[mastercomputers]

I keep coming back to this thread wanting to help, but it'd take up too much of my time so I'm just going to add suggestions.

Coming from a games development perspective, I think the best way to go about this is using 2D Sprites and it's easily accomplished using CSS positioning which Wutske jogged my memory about. To provide an example I would spend too much time on this, so hopefully you can check out how games like Secret Maryo Chronicles (similar to Mario Bros) was created and understand how parts of the background and characters were drawn at certain areas on a screen using Sprites. I know that's a 2D platform type game, but to make a map in a similar way is just like it.

Now you wouldn't have a value for each cell/div but a value related to the CSS positioning, this area would be the most work, as to create collision detection, you may want to work on the types of sprites used to be the collision rather than where you are in the game.

So to sum it up, CSS positioning is your co-ordinates and the CSS positioned background is your type of terrain/background (with collision).

How you go about creating this is entirely up to you, either using Sprites to draw each part at certain cells or using a complete map and just knowing which area in the maps is what and just having a div overlay the map you can see and also placing your character directly centred in it. You may also want to take the opportunity to apply AJAX into this equation so that movements automatically update your position without page reloads.

Cheers,

MC

[TavoxPeru]

I guess that using 2d sprites is a good choice as mastercomputers said, and also this don't mean that all the other code posted here are bad, incorrect or invalid, honestly, i think that the best way to implement this will be a mix of all of them.

A couple of weeks ago i did a couple of experiments in my spare time, one to made an automatic slide show using only one big image for it and using CSS and Javascript, and the other experiment was related with Image Maps using the MAP and IMG HTML tags, some CSS and Javascript code, and aditionally i use the Google AJAX Language API for some automatic text translation.

For the first experiment i use the following CSS and Javascript code inside the HEAD section:

<style type="text/css">
#divc { background: #000 none height:250px; width:130px;}
#c { background: #000 url('pics/tattoo flash.jpg') no-repeat -10px -20px; height:214px; width:116px;}
</style>
<script type="text/javascript">
// Array of all background-position 
var allSlides=["-10px -20px","0px -120px","-50px 0px"];

var myTime = 5; // number of seconds
var thisAd = 0; // current slide
var imgCt = allSlides.length; // number of slides

function rotate() {
    if (document.images) {
        thisAd++;
        if (thisAd == imgCt) {
            thisAd = 0;
        }
        document.getElementById("c").style.backgroundPosition=allSlides[thisAd];
        setTimeout("rotate()", myTime * 1000);
    }
}
</script>

And under the BODY section i use the following HTML code:

<body onload="rotate()">
<!-- other stuff -->
<div id="divc">
    <h2 id="c">H2 Heading</h2>
</div>
<!-- other stuff -->
</body>

Because it is an automatic slide show i use the onload event of the body to start the slide show everytime the page loads and two block elements, a DIV to act as a container and a H2 which acts as the slide show itself. BTW, it is not finished or perfect IT IS AN EXPERIMENT and can be viewed live at An Automatic Slide Show Using CSS and Javascript.

Now, the second one is no longer an experiment anymore, please view it live at Casa Blanca Tatoo and look at the source code to get a complete idea of how it works.

Basically, what i did here is to use a single image that will be used by a MAP tag with four AREA tags defined as rect -rectangular- and four DIVs tags for the translated texts. For each AREA tag defined i set it's onmouseover and onmouseout events to shows up the correct translated text when you hovers your mouse over any of the flags or over the ENTER text which all are part of the single image used by the MAP. clear???

Best regards,