Topic: Epicus Online (in development) (Read 21811 times)

Silverwind · « **on:** August 06, 2009, 07:26:17 PM »

Epicus Online (pseudo title) is Roguesoft's latest RPG in development. It's written in HTML and JavaScript and will hopefully run in most mainstream browsers available for Mac OS X and Windows. So far I've only programmed the navigation system and drawn up the stat progression table, but considering how easy JavaScript is to work with there's a good chance Beta 1.0 will be online before September.

This time I'm gonna force myself to abide by the "start small, build later" rule. Areas won't be incredibly large, the battle engine won't be particularly complex and there'll only be a handful of items and equipment. Then, once I've established a working beta I can add to the game at my leisure, improving mechanics and enlarging the world. It's also my long term goal to include multiplayer capabilities in the game, as in make it a true MORPG. There's allot of stuff I need to work out before I can attempt multiplayer though, as so far the game's engine is just an improved port of Tides of Fåden's engine.

In addition to the awesomeness of online compatibility, Epicus Online will be the first game made with the revamped Roguesoft Tile Set. The tile set still needs allot of work, but my record breaking enthusiasm in the project is sure to chop the checklist in half. Just today I made a bunch of new wall tiles from scratch:

A few interior tiles will be next. (grass isn't the best floor tile for houses and keeps)

WarHampster · « **Reply #1 on:** August 06, 2009, 10:06:54 PM »

OM NOM NOM.

Tiles look great, except for the grass (which really clashes with everything else)/

GMG Tim · « **Reply #2 on:** August 07, 2009, 06:35:02 PM »

Impressive-- I'm excited to see some multiplayer functionality with an in-browser game.

Ghost

Gnome · « **Reply #3 on:** August 10, 2009, 04:03:04 PM »

Ah Epicus, the game that convinced me to buy GM.

I really need to start working on my planned games.

Silverwind · « **Reply #4 on:** August 10, 2009, 05:22:54 PM »

I'm considering a zany plot-line for Epicus Online, as I had loads of fun writing the plot for the original.

For those interesting in how progress is going, you can enter the following code in This website's HTML tester:

Code: [Select]

<html>
<head>
<title>Epicus Online</title>
<script type = "text/javascript">
<!--
// Initiate global variables.
var gameState = 0;
var gridSize;
var gridMap$;

//-------------------------
// General methods
//-------------------------

function Random (maxValue) {
randomNumber = maxValue * Math.random();
randomNumber = Math.ceil (randomNumber);
return randomNumber;
}

function DrawSprite () {
// Reposition the sprite.
element = document.getElementById (this.spanID$);
element.style.left = this.spriteX;
element.style.top = this.spriteY;
element = document.getElementById (this.imgID$);
element.src = this.sprite$;
}

function StartGame () {
gameState = 1;

room = new Room ();
room.sprite$ = "http://209.85.48.12/11610/159/upload/p4560898.gif";
room.newRoom = 1;
room.DrawSprite ();

player1 = new Entity ();
player1.type$ = "Player";
player1.spanID$ = "player1Span";
player1.imgID$ = "player1Img";
player1.name$ = "Adventurer";
player1.sprite$ = "http://209.85.48.12/11610/159/upload/p4560934.gif"
player1.gridX = 3;
player1.gridY = 10;
player1.DrawEntity ();

npc1 = new Entity ();
npc1.type$ = "NPC";
npc1.spanID$ = "npc1Span";
npc1.imgID$ = "npc1Img";
npc1.name$ = "Peasant";
npc1.sprite$ = "http://209.85.48.12/11610/159/upload/p4557408.gif"
npc1.gridX = 9;
npc1.gridY = 4;
npc1.DrawEntity ();
}

function LoadRoom (newRoom) {
switch (newRoom) {
case 1:
room.sprite$ = "http://209.85.48.12/11610/159/upload/p4560898.gif"
gridSize = 14
gridMap$ = new Array (gridSize);
gridMap$  [1] = " 00000010000000";
gridMap$  [2] = " 10000000000000";
gridMap$  [3] = " 00000011111001";
gridMap$  [4] = " 00010010001100";
gridMap$  [5] = " 10000010000100";
gridMap$  [6] = " 00000011090100";
gridMap$  [7] = " 00010001121100";
gridMap$  [8] = " 01000000090000";
gridMap$  [9] = " 00001000000000";
gridMap$ [10] = " 10000000000010";
gridMap$ [11] = " 00000000100000";
gridMap$ [12] = " 01001000001000";
gridMap$ [13] = " 00100001000001";
gridMap$ [14] = " 10000100000100";
room.northRoom = 0;
room.southRoom = 0;
room.westRoom = 0;
room.eastRoom = 2;

npc1.type$ = "NPC";
npc1.spanID$ = "npc1Span";
npc1.imgID$ = "npc1Img";
npc1.name$ = "Peasant";
npc1.sprite$ = "http://209.85.48.12/11610/159/upload/p4557408.gif"
npc1.gridX = 9;
npc1.gridY = 4;
npc1.DrawEntity ();
break;
case 2:
room.sprite$ = "http://209.85.48.12/11610/159/upload/p4560899.gif"
gridSize = 14
gridMap$ = new Array (gridSize);
gridMap$  [1] = " 00000100000010";
gridMap$  [2] = " 00000000010010";
gridMap$  [3] = " 10000000100000";
gridMap$  [4] = " 00010000000100";
gridMap$  [5] = " 00000011111001";
gridMap$  [6] = " 00000010001000";
gridMap$  [7] = " 00000010901010";
gridMap$  [8] = " 01001111211000";
gridMap$  [9] = " 00001000901000";
gridMap$ [10] = " 00092900001000";
gridMap$ [11] = " 00001000001100";
gridMap$ [12] = " 00101111911000";
gridMap$ [13] = " 10000010000001";
gridMap$ [14] = " 00000001010000";
room.northRoom = 0;
room.southRoom = 0;
room.westRoom = 1;
room.eastRoom = 0;

npc1.type$ = "NPC";
npc1.spanID$ = "npc1Span";
npc1.imgID$ = "npc1Img";
npc1.name$ = "Peasant";
npc1.sprite$ = "http://209.85.48.12/11610/159/upload/p4557407.gif"
npc1.gridX = 9;
npc1.gridY = 10;
npc1.DrawEntity ();
break;
}
room.DrawSprite ();
}

function HandleKeydown (ev) {
// Figure out which keyboard key was typed and store it in the "key" variable.
df = document.forms [0];
key = ( (ev.which) || (ev.keyCode) );
// Check which direction the player is trying to move in.
switch (key) {
case 38: // Up Arrow was pressed.
player1.MovePlayer ("Up");
break;
case 40: // Down Arrow was pressed.
player1.MovePlayer ("Down");
break;
case 37: // Left Arrow was pressed.
player1.MovePlayer ("Left");
break;
case 39: // Right Arrow was pressed.
player1.MovePlayer ("Right");
break;
}
player1.DrawEntity ();
}

function TimedCount () {
npc1.PerformAction ();
npc1.DrawEntity ();
timer = setTimeout ("TimedCount ()", 1000);
}


//-------------------------
///////////////////////////
//-------------------------

Silverwind · « **Reply #5 on:** August 10, 2009, 05:27:05 PM »

Continued...

Code: [Select]

//-------------------------
// Entity related methods
//-------------------------

function Room () {
this.spanID$ = "roomSpan";
this.imgID$ = "roomImg";
this.sprite$ = "";
this.spriteX = 5;
this.spriteY = 5;
this.newRoom = 0;
this.northRoom = 0;
this.southRoom = 0;
this.westRoom = 0;
this.eastRoom = 0;

this.DrawSprite = DrawSprite;
}

function Entity () {
this.name$ = "Unnamed Entity";
this.type$ = "NPC";
this.spanID$ = "";
this.imgID$ = "";
this.sprite$ = "";
this.gridX = 1;
this.gridY = 1;
this.newGridX = this.gridX;
this.newGridY = this.gridY;
this.spriteX = this.gridX * 43;
this.spriteX = this.spriteX - 38;
this.spriteY = this.gridY * 43;
this.spriteY = this.spriteY - 38;
this.tile$ = "Empty";

this.DrawEntity = DrawEntity;
this.MovePlayer = MovePlayer;
this.ChangeSprite = ChangeSprite;
this.PerformAction = PerformAction;
}

function ChangeSprite (newSprite$) {
this.sprite$ = newSprite$;
element = document.getElementById (this.imgID$);
element.src = this.sprite$;
}

function DrawEntity () {
// Determine the entity's sprite coordinates based on its grid coordinates.
this.spriteX = this.gridX * 43;
this.spriteX = this.spriteX - 38;
this.spriteY = this.gridY * 43;
this.spriteY = this.spriteY - 38;
// Reposition the sprite.
element = document.getElementById (this.spanID$);
element.style.left = this.spriteX;
element.style.top = this.spriteY;
element = document.getElementById (this.imgID$);
element.src = this.sprite$;
}

function MovePlayer (direction$) {
this.newGridX = this.gridX;
this.newGridY = this.gridY;

if (direction$ == "Up") {this.newGridY = this.gridY - 1;}
if (direction$ == "Down") {this.newGridY = this.gridY + 1;}
if (direction$ == "Left") {this.newGridX = this.gridX - 1;}
if (direction$ == "Right") {this.newGridX = this.gridX + 1;}

// Check what kind of tile the player is trying to move onto.
gridMapRowX$ = gridMap$ [this.newGridY];
this.tile$ = gridMapRowX$.charAt (this.newGridX);
if (this.tile$ == "0") {this.tile$ = "Empty"}
if (this.tile$ == "1") {this.tile$ = "Wall"}
if (this.tile$ == "2") {this.tile$ = "Door"}
if (this.tile$ == "9") {this.tile$ = "Empty"}

// Check if the player is entering another room.
if (this.newGridY < 1) {
this.tile$ = "Wall";
if (room.northRoom > 0) {
this.gridY = gridSize;
LoadRoom (room.northRoom);
}
}
if (this.newGridY > gridSize) {
this.tile$ = "Wall";
if (room.southRoom > 0) {
this.gridY = 1;
LoadRoom (room.southRoom);
}
}
if (this.newGridX < 1) {
this.tile$ = "Wall";
if (room.westRoom > 0) {
this.gridX = gridSize;
LoadRoom (room.westRoom);
}
}
if (this.newGridX > gridSize) {
this.tile$ = "Wall";
if (room.eastRoom > 0) {
this.gridX = 1;
LoadRoom (room.eastRoom);
}
}

Silverwind · « **Reply #6 on:** August 10, 2009, 05:27:24 PM »

Continued...

Code: [Select]

// Check for collision with other entities.
if (this.newGridX == npc1.gridX && this.newGridY == npc1.gridY) {this.tile$ = "Wall"}

// Perform the new tile's behaviour.
if (this.tile$ == "Door") {
if (direction$ == "Up") {this.newGridY = this.newGridY - 1}
if (direction$ == "Down") {this.newGridY = this.newGridY + 1}
if (direction$ == "Left") {this.newGridX = this.newGridX - 1}
if (direction$ == "Right") {this.newGridX = this.newGridX + 1}
this.tile$ = "Empty";
}
if (this.tile$ == "Signpost") {
alert (signpostText$);
this.tile$ = "Wall";
}
if (this.tile$ == "Empty") {
this.gridX = this.newGridX;
this.gridY = this.newGridY;
}
if (this.tile$ == "Wall") {
this.newGridX = this.gridX;
this.newGridY = this.gridY;
}
}

function PerformAction () {
if (this.type$ == "NPC") {
this.newGridX = this.gridX;
this.newGridY = this.gridY;

// Simple NPC AI.
action = Random (4);
if (action == 1) {action$ = "Move Up"}
if (action == 2) {action$ = "Move Down"}
if (action == 3) {action$ = "Move Left"}
if (action == 4) {action$ = "Move Right"}
// Check which direction the NPC is attempting to move in.
if (action$ == "Move Up") {this.newGridY = this.gridY - 1}
if (action$ == "Move Down") {this.newGridY = this.gridY + 1}
if (action$ == "Move Left") {this.newGridX = this.gridX - 1}
if (action$ == "Move Right") {this.newGridX = this.gridX + 1}

// Check what kind of tile the NPC is trying to move onto.
gridMapRowX$ = gridMap$ [this.newGridY];
this.tile$ = gridMapRowX$.charAt (this.newGridX);
if (this.tile$ == "0") {this.tile$ = "Empty"}
if (this.tile$ != "Empty") {this.tile$ = "Wall"}
// This prevents the NPC from walking out of the room.
if (this.newGridX < 1) {this.tile$ = "Wall"}
if (this.newGridX > gridSize) {this.tile$ = "Wall"}
if (this.newGridY < 1) {this.tile$ = "Wall"}
if (this.newGridY > gridSize) {this.tile$ = "Wall"}

// Check for collision with other entities.
if (this.newGridX == player1.gridX && this.newGridY == player1.gridY) {this.tile$ = "Wall"}

// Perform the new tile's behaviour.
if (this.tile$ == "Empty") {
this.gridX = this.newGridX;
this.gridY = this.newGridY;
}
if (this.tile$ == "Wall") {
this.newGridX = this.gridX;
this.newGridY = this.gridY;
}
}
}

//-------------------------
///////////////////////////
//-------------------------

-->
</script>
</head>
<body onkeydown = "HandleKeydown (event)" >

<span id = "roomSpan" style = "visibility:visible; position:absolute; z-index:1;"> <img id = "roomImg"/> </span>
<span id = "player1Span" style = "visibility:visible; position:absolute; z-index:4;"> <img id = "player1Img"/> </span>
<span id = "npc1Span" style = "visibility:visible; position:absolute; z-index:3;"> <img id = "npc1Img"/> </span>

<script type = "text/javascript">
<!--
if (gameState == 0) { StartGame () }
LoadRoom (room.newRoom);
TimedCount ();
-->
</script>

</body>
</html>

Gan · « **Reply #7 on:** August 11, 2009, 09:14:44 PM »

This seems to be very interesting, do you know how this would work if online? Would it have to use php?
Edit: After a little googling it appears that it is best to use Ajax for handling data for smooth and lag free gameplay, also that JavaScript leaves room for people to tamper with data. For a mmo, most suggest Php+Ajax for speed and security. Though I really have no idea what I'm talking about...

-Gandolf

Silverwind · « **Reply #8 on:** August 12, 2009, 03:15:41 AM »

Really? I think there's php and Ajax tutorials on the W3Schools website. I'll look into them later. Hmm... Mist knows php like the alphabet, if we could pry him from WoW he might be willing to help us.

The logic of how to actually send each player's variables back and forth to each other is what stumps me. Didn't you write an MMORPG engine in SC? How did it handle which variables were attached to which player?

Gan · « **Reply #9 on:** August 12, 2009, 07:53:55 AM »

Yeah, it's a bit of a step process.
(1) Player registers. A data packet is sent to the server looking something like:

Code: [Select]

reg$name$password

Which "reg" tells the server that it's a new player so the server will create a new txt file for that player named "name$password" and writes all beginner stats inside that txt file. Then the server sends a confirmation that the player has been created or there was an error.
(2) Player logs in. A data packet is sent to the server with this:

Code: [Select]

log$name$password

The server looks for that txt file called "name$password" and sticks it on a Player's Online list. It then sends the player position and such to the client.
(3) Player moves around and the client sends movement and such to the server and it processes it and sends stuff back.

Though... if php is involved I don't know if there would be a processing server, then the client would have to fill those shoes...

I'll look into this. I'm enabling php on my mac at the moment.
Edit: I have enabled both php and mysql. Now I'll look into having a php site save stuff to the mysql database.
Second Edit: Check out this JavaScript/Php online mmorpg. It runs smooth, fast and looks pretty decent: http://engine.nowhere-else.org/demo/

-Gandolf

Silverwind · « **Reply #10 on:** August 12, 2009, 12:18:39 PM »

Nice! I ran through the basic PHP tutorials today, but I've just started looking at the AJAX tutorials and now I'm thinking AJAX is the way to go. Basically AJAX lets JavaScript fetch data from servers without reloading the active web page, meaning we could dynamically change the contents of a page seamlessly.

I'm gonna focus on AJAX for a bit.

Silverwind · « **Reply #11 on:** August 12, 2009, 12:51:53 PM »

Hang on, it seems that PHP builds the server page and AJAX fetches data from it and stores it in JavaScript variables. Cool.

Gan · « **Reply #12 on:** August 12, 2009, 01:05:03 PM »

With Ajax, won't you need a server or mysql database?
If you plan on using a server, that would fix just about all insecurity issues by having minimal player data on the player's side.
If Ajax works with Java servers, I could whip one together though that would require you to run the server all the time on your machine.

-Gandolf
Edit: Php is the server and Ajax controls data flow? I'm not quite sure I understand.

Silverwind · « **Reply #13 on:** August 12, 2009, 02:21:38 PM »

Quote

Php is the server and Ajax controls data flow? I'm not quite sure I understand.

Hehe, well I'm certain I don't understand, as I've never programmed in anything beyond GameMaker up 'til now and am not used to databases or servers, but so far what I take to understand is:

Epicus Online will consist of 3 things. A client web page, a server web page and a database.
The client web page is the main element of the game and is written in HTML and JavaScript. It contains the game's interface as well as the methods governing user interaction. (keydowns and button clicks etc.)
The server page contains code which governs access to (and therefor any changes to) the database. It's written in PHP.
The database contains all of the "global" variables in the game. (mainly just entity sprite locations)
AJAX is a tool that enables JavaScript to send and retrieve data from the active web page to another, without reloading the active page.

For a visual example of AJAX in action, go to Google's homepage and type "y" in the search field. A list of websites beginning with the letter y will appear in a drop down menu beneath the search field. What's happening: Google is sending the value of the text you typed in the text field (in this case "y") to a server web page, which then accesses Google's database containing the addresses of every website in existence and checks which one's start with the letter y. The server website then sends all of the data (every web address beginning with the letter y) back to the Google homepage along with the instructions to display the web addresses in the drop down menu.

Cool huh? I'm finding it hard to learn though.

EDIT:

Oh btw, since the server won't be visible to the naked eye the game's code will be protected, meaning there's always the possibility of making money from the game

Gan · « **Reply #14 on:** August 12, 2009, 03:18:07 PM »

Aha, brilliant.
This morning I went through the whole w3schools article on php and php+mysql. I even set up my own mysql database and php site hosting on my computer so I'm going to try some simple server client stuff. Like have an input box where you put a name in, press register, put the name in the login box, press login and it'll pop up a message like failed to log in or successfully logged in.
Edit: This is extremely hard. I managed to find a working php/mysql chat source and am attempting to install that. If only Mistron were here.
Edit again: Figured out why it was so hard... I forgot to turn on MySQL.

-Gandolf

Topic: Epicus Online (in development) (Read 21811 times)

Silverwind

Epicus Online (in development)

WarHampster

Re: Epicus Online (in development)

GMG Tim

Re: Epicus Online (in development)

Gnome

Re: Epicus Online (in development)

Silverwind

Re: Epicus Online (in development)

Silverwind

Re: Epicus Online (in development)

Silverwind

Re: Epicus Online (in development)

Gan

Re: Epicus Online (in development)

Silverwind

Re: Epicus Online (in development)

Gan

Re: Epicus Online (in development)

Silverwind

Re: Epicus Online (in development)

Silverwind

Re: Epicus Online (in development)

Gan

Re: Epicus Online (in development)

Silverwind

Re: Epicus Online (in development)

Gan

Re: Epicus Online (in development)