Author Topic: just starting out in java/html (Read 70781 times)

ninogenio · « **Reply #120 on:** February 04, 2014 »

well i just bought a domain name and rented some space through xilo! yay,

now comes the part i have no idea about

. basically atm i just want too be able too upload and share my projects via live links, will i still have too build a basic site as a front end? if so what tools would you guys advise, cheers.

combatking0 · « **Reply #121 on:** February 04, 2014 »

If you don't have access to Dreamweaver you can code in raw HTML using Notepad++ to build your website.

To get you started, you can send me a specification for a design and I'll build the first few pages for you.

ninogenio · « **Reply #122 on:** February 04, 2014 »

thanks mate!!

all i need atm is the most basic page that i can put links too my projects hosted on the server. just any simple template that will let me share my projects with the members here and some friends too begin with. then i plan on slowly over time adding a nice structured ui with pictures and different things..

if you could help me out with setting a starter page out that would be excellent thank you very much.

combatking0 · « **Reply #123 on:** February 04, 2014 »

Just a basic site - feel free to adjust the colour settings in the css file.

Everything can be modified in notepad.

ninogenio · « **Reply #124 on:** February 04, 2014 »

k++,

thats brilliant!!! just exactly what i needed too get me started, thanks very much mate.

i put it live at

www.ninogenio.co.uk

i can't wait too get stuck in now

combatking0 · « **Reply #125 on:** February 04, 2014 »

Great! I'll put a link from my site in the next update.

edit - I have updated the map builder: http://www.barcodebattler.co.uk/fx/waveSphere/jsrMapBuilder.htm

Sprite capability has been partially implemented. I will add a mode button to switch between Wall mode and Sprite mode.
I'll also add a sprite properties manager to support frames and dot colours.

We will need to modify the source of the sprite colours for the map. An array will be easier to import / export than a series of if statements.

ninogenio · « **Reply #126 on:** February 07, 2014 »

thats brilliant ck!!

while porting this over too the android sdk. i found lots of bug fixes which i have fixed. one being where i split the ray casts and wall rendering into two functions and draw the floor in between, this fixes the floor and ceiling floating slightly on quick rotations.

by doing this i also save all the cast rays into buffers so as you suggested earlier if the cam doesn't move we don't do any casting.

yes an array system would be better than all the if checks i will implement all this into our js engine in the next few days and upload a good update. im still looking into touch based inputs.

now i have my own server space i have been uploading lots of little touch input test but so far i can't get it too work properly

combatking0 · « **Reply #127 on:** February 09, 2014 »

I'm ready to put our heads together and work on a specification for the sprite data.

What you seem to have at the moment is:

Code: [Select]

const BADGUYSPRITEKEYFRAMESX=8;
const BADGUYSPRITEKEYFRAMESY=1;
const BADGUYSPRITETYPE = 4;
    
const GOODGUYSPRITEKEYFRAMESX=1;
const GOODGUYSPRITEKEYFRAMESY=1;
const GOODGUYSPRITETYPE = 5;

const OBJECTTYPE1 = 6;
const OBJECTTYPE1KEYFRAMESX = 1;
const OBJECTTYPE1KEYFRAMESY = 1;

const OBJECTTYPE2 = 7;
const OBJECTTYPE2KEYFRAMESX = 1;
const OBJECTTYPE2KEYFRAMESY = 1;

I propose replacing this with:

Code: [Select]

var wallTextures = 4;
var spriteData = [[8,1,0.588,0,0],[1,1,0.588,0,0],[1,1,0.980,0.980,0.980],[1,1,0.980,0.980,0]];
var spriteCoords = [[10,4,0],[3,9,0],[5,14,0],[12,14,0],[21,8,0],[27,3,0],[32,21,0],[2,21,0],[22,1,1],[21,21,1],[19,21,1],[23,21,1],[25,21,1],[3,1,2],[24,1,2],[1,15,2],[24,10,2],[26,12,2],[6,3,3],[10,10,3],[18,1,3]];

The wallTextures variable serves as an offset for selecting the correct image object from the main image object array when drawing the sprites.

The spriteData array holds data about the sprite types in this order: KeyFramesX, KeyFramesY, Red, Green, Blue.

The SpriteCullMap array could be populated from the spriteCoords array during the startUp function.

Let me know if you need a hand translating my rough description into code - I might not have typed this very well.

ninogenio · « **Reply #128 on:** February 10, 2014 »

excellent!

here is an updated version with those changes implemented,

http://www.ninogenio.co.uk/dpadwebglcaster/mousecontrowebgl.htm

you will notice the dpad is still there atm. thats just because i have been trying some touch specific code out that should work but doesn't. if i don't figure out the touch stuff soon ill just remove this until i get it correct.

the code changes i have made go as soo.... i have completely re organized the order of things in the main loop i have split our raycasting into two functions one that casts all the rays and stores all relevant data into buffers for later use.

and the other functions draws based on these buffers.

this gives us the chance too...

casts all the rays and get floor/ceiling position data.
draw floor and ceilings
draw walls.

in that order. this eliminates the floating effect on the floor and ceiling lines.

i have also changed things so now no sprite or raycasting happens unless the player has moved then when we come too a stop the floor/ceiling/raycasting/spritecasting stops until we move again.

so hopefully low fps while standing still will be improved..

next up we need too add some more data too the new spritedata/coord arrays too factor in the heightoffset sprite static and x and y scale. if we do this the whole engine can run purely on your excellent map builder. i would have done this but only had an hour this afternoon too get all this done.

cheers mate.

ninogenio · « **Reply #129 on:** February 11, 2014 »

i have been thinking about this a little today.

i am ready too add the extra params too the new arrays too make this completely free from hard coded values. i just need too make sure its compliant with what you are doing on the map builder side of things. if you let me know how you would like me too organize this extra data i will do it in this way.

one thing i should have asked yesterday. are you going too be using the webgl version or the canvas version? i have been adding and modifiying the webgl version without first checking too see if this is indeed the preferred version.

if you prefer too use the canvas one for compatibility, all modifications so far and future ones will be put on that.

my thinking for after we get the sprite stuff completely working on the map builder, is too then completely hide the engine from the individual users. maybe have a source.js file in the same folder where level and sprite info are placed and a universal main loop where all the game logic can go.

this way younger people could use this for fun educational purposes without giving a hoot how or why the engine works. with just a little script in a js file they can build 3d levels with there own logic.

combatking0 · « **Reply #130 on:** February 11, 2014 »

The WebGL version will probably be better. You've put a lot of work into it and the performance is better overall.

I'm just wrestling with the colour picker on the map builder at the moment. Once that's done I'll be able to work on the keyframe settings.

Splitting the engine into a separate file is probably a good idea.

edit - the colour selector for the sprite dots is finished. I'll work on setting the number of frames next, followed by adding the sprite settings to the data output. After that I'll add sprite location editing.

ninogenio · « **Reply #131 on:** February 12, 2014 »

nice!!

just let me know when the sprite side of the map builder is done and what format the the arrays come out in, then we can put our heads together and organize the engine in such a way that is user friendly.

combatking0 · « **Reply #132 on:** February 12, 2014 »

The array format for the sprites will be as follows:

Code: [Select]

var wallTextures = 4;
var spriteData = [[8,1,0.588,0,0],[1,1,0.588,0,0],[1,1,0.980,0.980,0.980],[1,1,0.980,0.980,0]];
var spriteCoords = [[10,4,0],[3,9,0],[5,14,0],[12,14,0],[21,8,0],[27,3,0],[32,21,0],[2,21,0],[22,1,1],[21,21,1],[19,21,1],[23,21,1],[25,21,1],[3,1,2],[24,1,2],[1,15,2],[24,10,2],[26,12,2],[6,3,3],[10,10,3],[18,1,3]];

The spriteData array holds data about the sprite types in this order: KeyFramesX, KeyFramesY, Red, Green, Blue.

The SpriteCullMap array could be populated from the spriteCoords array during the startUp function.
The spriteCoords array holds data about sprite coordinates in this order: xPosition, yPosition, spriteType.

I'll add the NOSPRITES variable to the output too.

The map builder currently populates the spriteData array, but not the spriteCoords. I should have this done in the next day or two if my meetings don't over run.

combatking0 · « **Reply #133 on:** February 13, 2014 »

We now have a fully working output code.

I'm going to work in importing code and adding a perimeter function.

ninogenio · « **Reply #134 on:** February 14, 2014 »

excellent work ck!!

just had a little shot of the map builder, it feels like a proper fully featured tool now!.. ill get too work on integrating all the generated sprite stuff into the engine so it can fully run on the map builder info.

is there no way we can adapt the engine and map builder so it could be used server side? i would love too host this on my site and let visitors just build a 3d level. that would be really really cool.

now i have only just began looking into php so i don't fully know its capability's yet. but could we maybe store the generated info from the map builder on our server and let the engine access that part of our servers using php?.

if there is any possibility of hosting this on the server and having it dynamically work off the map builder i would have a good look into that.

combatking0 · « **Reply #135 on:** February 14, 2014 »

We could set it up so that the textures and sprites are uploaded to the server.

If an image already exists with the name of a new image we would need to add a number to the end of the new image.
Existing images on the server can be listed using PHP with a SQL database to keep track of which images are textures and which are sprites.

.js files holding the map data can be saved to the server to eliminate cutting and pasting. Map data files could be selected from a menu page before loading the main game, again using PHP. Database functionality for this is optional but recommended.

combatking0 · « **Reply #136 on:** February 15, 2014 »

I've just had a thought - what's the calculation for the starting coordinates? We could put this into the map builder.

The import button now works - download this and run it locally to test:
http://www.barcodebattler.co.uk/fx/waveSphere/jsrMapBuilder.htm

The following code can be imported, just copy and paste it into the import text box:

Code: [Select]

var MAPW = 22;
var MAPH = 33;
var MapData = [[1,1,2,3,4,2,3,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],[1,0,0,0,0,0,0,0,0,0,1,1,0,1,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,4,0,0,0,0,1,0,0,0,4,0,0,1],[1,0,1,1,0,0,0,0,0,0,4,0,0,0,0,1,0,0,0,0,0,0,1],[1,0,1,1,0,0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,1],[1,0,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,3,0,3,1,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,0,3,0,1],[1,0,0,4,4,4,4,4,4,4,4,0,0,0,0,1,1,0,3,0,3,0,1],[1,0,0,0,0,0,0,0,0,0,4,0,0,0,0,0,1,0,0,0,1,0,1],[1,0,0,0,0,0,0,0,0,0,4,4,4,4,0,0,0,1,1,0,0,0,1],[3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,1,0,1],[3,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,1,1,1],[4,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1],[1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1,1,0,1,1,1,0,1],[1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1],[1,0,0,1,4,1,0,0,0,1,1,1,0,0,0,0,0,1,0,1,1,1,1],[1,0,0,1,1,0,0,0,0,0,1,3,0,0,0,0,0,1,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,1,3,1,0,0,0,0,1,0,1,1,1,1],[1,0,0,0,0,0,0,0,0,0,0,1,4,0,0,0,0,1,0,0,0,1,1],[1,0,2,2,2,0,0,0,0,0,0,0,1,0,0,1,1,1,1,1,0,0,4],[1,0,2,2,2,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,1,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,4],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,1,1],[1,4,0,0,0,4,0,1,1,1,1,1,1,1,1,1,0,1,0,1,0,0,4],[1,0,4,4,0,4,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0,1,1],[1,0,0,4,0,4,0,1,0,1,1,1,1,1,1,1,1,1,1,1,0,0,4],[1,0,0,4,0,4,0,1,0,0,0,0,0,0,0,0,1,1,0,0,0,1,1],[1,0,0,4,0,4,0,1,1,1,1,1,1,1,1,0,1,0,0,1,0,1,1],[1,0,1,0,0,4,0,0,0,0,1,0,0,0,0,0,1,0,1,0,0,0,1],[1,0,1,0,1,1,1,1,1,0,1,0,1,1,1,1,1,0,1,0,1,0,1],[1,0,1,0,0,0,0,0,1,0,1,0,0,0,0,0,1,1,0,0,2,0,2],[1,0,1,1,1,1,1,0,1,0,1,1,1,1,1,0,1,0,0,2,0,0,2],[1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1,2,0,0,2],[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2]];
var imageSources = ["Bricks.png","Concrete.png","Wood.png","Metal.png","ryu2.png","megaman.png","lamp.png","sign.png"];
var wallTextures = 4;
var spriteData = [[8,1,0.588,0,0],[1,1,0,0,0.588],[1,1,0.98,0.98,0.98],[1,1,0.98,0.98,0]];
var spriteCoords = [[4,10,0],[9,3,0],[14,5,0],[14,12,0],[8,21,0],[2,27,0],[21,32,0],[21,2,0],[1,22,1],[21,21,1],[21,19,1],[21,23,1],[21,25,1],[1,3,2],[1,24,2],[15,1,2],[10,24,2],[12,26,2],[3,6,3],[10,10,3],[1,18,3]];
var NOSPRITES = 0;

The specified image files must be located in the images folder just the same as if they were added manually.

Jim · « **Reply #137 on:** February 16, 2014 »

Why not

Code: [Select]

var map = 
{
 width: 22,
 height: 33,
 data: [...]
};

I think grouping things together in objects would help keep the code tidy and make it easier to extend and/or map into a database.
Jim

combatking0 · « **Reply #138 on:** February 17, 2014 »

That sounds like a great idea.

ninogenio · « **Reply #139 on:** February 24, 2014 »

sorry ck me and the family all were hit with a horrible flu. and then work and finishing some other projects have taken everything out of me for the past couple of weeks.

Quote

I've just had a thought - what's the calculation for the starting coordinates? We could put this into the map builder.

something like this should work.

Code: [Select]

camy = (grid_y*maph)*(mapscale/maph);
camx = (grid_x*mapw)*(mapscale/mapw);

Quote

The following code can be imported, just copy and paste it into the import text box:
Code: [Select]

var MAPW = 22;
var MAPH = 33;
var MapData = [[1,1,2,3,4,2,3,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],[1,0,0,0,0,0,0,0,0,0,1,1,0,1,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,4,0,0,0,0,1,0,0,0,4,0,0,1],[1,0,1,1,0,0,0,0,0,0,4,0,0,0,0,1,0,0,0,0,0,0,1],[1,0,1,1,0,0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,1],[1,0,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,3,0,3,1,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,0,3,0,1],[1,0,0,4,4,4,4,4,4,4,4,0,0,0,0,1,1,0,3,0,3,0,1],[1,0,0,0,0,0,0,0,0,0,4,0,0,0,0,0,1,0,0,0,1,0,1],[1,0,0,0,0,0,0,0,0,0,4,4,4,4,0,0,0,1,1,0,0,0,1],[3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,1,0,1],[3,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,1,1,1],[4,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1],[1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1,1,0,1,1,1,0,1],[1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1],[1,0,0,1,4,1,0,0,0,1,1,1,0,0,0,0,0,1,0,1,1,1,1],[1,0,0,1,1,0,0,0,0,0,1,3,0,0,0,0,0,1,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,1,3,1,0,0,0,0,1,0,1,1,1,1],[1,0,0,0,0,0,0,0,0,0,0,1,4,0,0,0,0,1,0,0,0,1,1],[1,0,2,2,2,0,0,0,0,0,0,0,1,0,0,1,1,1,1,1,0,0,4],[1,0,2,2,2,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,1,1],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,4],[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,1,1],[1,4,0,0,0,4,0,1,1,1,1,1,1,1,1,1,0,1,0,1,0,0,4],[1,0,4,4,0,4,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0,1,1],[1,0,0,4,0,4,0,1,0,1,1,1,1,1,1,1,1,1,1,1,0,0,4],[1,0,0,4,0,4,0,1,0,0,0,0,0,0,0,0,1,1,0,0,0,1,1],[1,0,0,4,0,4,0,1,1,1,1,1,1,1,1,0,1,0,0,1,0,1,1],[1,0,1,0,0,4,0,0,0,0,1,0,0,0,0,0,1,0,1,0,0,0,1],[1,0,1,0,1,1,1,1,1,0,1,0,1,1,1,1,1,0,1,0,1,0,1],[1,0,1,0,0,0,0,0,1,0,1,0,0,0,0,0,1,1,0,0,2,0,2],[1,0,1,1,1,1,1,0,1,0,1,1,1,1,1,0,1,0,0,2,0,0,2],[1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1,2,0,0,2],[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2]];
var imageSources = ["Bricks.png","Concrete.png","Wood.png","Metal.png","ryu2.png","megaman.png","lamp.png","sign.png"];
var wallTextures = 4;
var spriteData = [[8,1,0.588,0,0],[1,1,0,0,0.588],[1,1,0.98,0.98,0.98],[1,1,0.98,0.98,0]];
var spriteCoords = [[4,10,0],[9,3,0],[14,5,0],[14,12,0],[8,21,0],[2,27,0],[21,32,0],[21,2,0],[1,22,1],[21,21,1],[21,19,1],[21,23,1],[21,25,1],[1,3,2],[1,24,2],[15,1,2],[10,24,2],[12,26,2],[3,6,3],[10,10,3],[1,18,3]];
var NOSPRITES = 0;

The specified image files must be located in the images folder just the same as if they were added manually.

ha thats awsome. i just tried it out. massively impressed

i am about too embark on properly building my website so once i have everything set up i am going too look into php for this as i think it would be an awesome attraction if this was all held server side.