FPS Demo

Monkey Archive Forums/Monkey Projects/FPS Demo

Landon(Posted 2014) [#1]
Playing around with making an FPS game in html5

http://vigilsoft.net/FPSDemo/

WASD - Move | Space - Jump


DruggedBunny(Posted 2014) [#2]
Nicely done -- is this a home-grown engine, MiniB3D, something else?


Landon(Posted 2014) [#3]
Minib3d, although i had to make some changes to the shaders so that lightmapping would work. I dunno if Adam ever made those changes on his end.


Landon(Posted 2014) [#4]
Now with working Gun and scorch decals :)




Sammy(Posted 2014) [#5]
How did you get your decals working, if you don't mind me asking? The only way I could get them to work properly was with multitexturing, hardly ideal though.


Landon(Posted 2014) [#6]
I just used Sprites that are vector aligned to the collision normal of the wall when the bullet impacts.


Sammy(Posted 2014) [#7]
Ah, thanks Landon. I tried that approach but ran into difficulties with mesh edges.

I had a quick look at your FB page, your game is coming along great, well done! :)


ziggy(Posted 2014) [#8]
Love it!


Supertino(Posted 2014) [#9]
Show off :p


Landon(Posted 2014) [#10]
yea if the wall or surface is small or at a weird angle some of the scorch sprite get's cut off. i'm thinking about trying this into html5 websockets to make a multiplayer fps game. ijust wish there was some way to force the mouse to the center of the screen in html5, even if it requires a click from the user's side.


ziggy(Posted 2014) [#11]
Tested on my phone and it worked great


Landon(Posted 2014) [#12]
Bwhahaha check it out, now with fullscreen and lockpointer support, just click the blue F in the top left.

Changed the DHfullscreen module that was posted to the code below, once in fullscreen and lock pointer mode you have to use Fullscreen.getx and gety methods to get future mouse positions.

dhfullscreen.html5.js
var Fullscreen = new Object();
Fullscreen.mx = 0;
Fullscreen.my = 0;

Fullscreen.eventOn = function() {
	document.getElementById("GameCanvas").addEventListener("click", Fullscreen.toggle, false);
	document.getElementById("GameCanvas").addEventListener("mousemove", Fullscreen.capturemouse, false);
	
}

Fullscreen.eventOff = function() {
	document.getElementById("GameCanvas").removeEventListener("click", Fullscreen.toggle, false);
	//document.getElementById("GameCanvas").removeEventListener("mousemove", Fullscreen.capturemouse, false);
}

Fullscreen.on = function() {
	RunPrefixMethod(document.getElementById("GameCanvas"), "RequestFullScreen");
	RunPrefixMethod(document.getElementById("GameCanvas"), "RequestPointerLock");
}

Fullscreen.off = function() {
	RunPrefixMethod(document, "CancelFullScreen");
}

Fullscreen.capturemouse = function(e) {

  var movementX = e.movementX ||
      e.mozMovementX          ||
      e.webkitMovementX       ||
      0;

  var movementY = e.movementY ||
      e.mozMovementY      ||
      e.webkitMovementY   ||
      0;
	Fullscreen.mx += movementX;
	Fullscreen.my += movementY;

}

Fullscreen.getx = function() {
	return this.mx;
}
Fullscreen.gety = function() {
	return this.my;
}


Fullscreen.toggle = function() {
	if(Fullscreen.active()) {
		Fullscreen.off();
	}
	else {
		Fullscreen.on();
		document.getElementById("GameCanvas").webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 
	}
}

Fullscreen.active = function() {
	return (RunPrefixMethod(document, "FullScreen") || RunPrefixMethod(document, "IsFullScreen"));
}

var pfx = ["webkit", "moz", "ms", "o", ""];
function RunPrefixMethod(obj, method) {	
	var p = 0, m, t;
	while (p < pfx.length && !obj[m]) {
		m = method;
		if (pfx[p] == "") {
			m = m.substr(0,1).toLowerCase() + m.substr(1);
		}
		m = pfx[p] + m;
		t = typeof obj[m];
		if (t != "undefined") {
			pfx = [pfx[p]];
			return (t == "function" ? obj[m]() : obj[m]);
		}
		p++;
	}
}


dhfullscreen.monkey
#if TARGET="flash" or TARGET="html5"

Private
Import "native/dhfullscreen.${TARGET}.${LANG}"

Extern

Class Fullscreen = "Fullscreen"

	Function on:Void()
	Function off:Void()
	Function getx:Int()
	Function gety:Int()
	Function toggle:Void()
	Function active:Bool()
	Function eventOn:Void()
	Function eventOff:Void()
	
End

#end



Sammy(Posted 2014) [#13]
I seem to be stuck looking straight up on Firefox?

Minib3d, although i had to make some changes to the shaders so that lightmapping would work. I dunno if Adam ever made those changes on his end.


What were the required changes BTW?


Landon(Posted 2014) [#14]
hmm i've only tested it in chrome, i'll see if i can fix it in firefox.


What were the required changes BTW?



at line 202 in opengl/basicshadergsl.monkey replace the FRAGBLEND string with the following

Global FRAGBLEND:String = "/*blendfunc*/"+
	"vec4 BlendFunction(const float blend, const vec4 texture, const vec4 finalcolor, const vec4 vertcolorx) {"+
	"vec4 color = one_zero.yyyy;	"+
	"if (blend ==1.0) {color.xyz = mix(finalcolor.xyz, texture.xyz, texture.w );color.w = vertcolorx.a;	return color;"+
	"} else if (blend ==2.0) { color = (vertcolorx * texture * finalcolor); 	return color;"+
	"} else if(blend==3.0) {	color = ((color * vertcolorx) + (texture * finalcolor)); return color;"+
	"} else if(blend==4.0) {	color = (vertcolorx * texture); return finalcolor+color;"+
	"} else if(blend==5.0) {	color = (vertcolorx * texture); return finalcolor*color;"+
	"} return (texture);}"


Originally adam didn't code support for blendmode 5 which was meant for lightmapping. This fix isn't probably the exact way to do it because i'm still pretty new to shaders but it gives the closest look and feel to the correct lightmapping as i could get it.


Landon(Posted 2014) [#15]
Flash seems to crash with error 3697 if i even make any attempt to load a model with lightmapping on it. Somewhere the sampler in stage3d isn't being reset for that lightmap texture. i can't seem to find it yet.


Landon(Posted 2014) [#16]
Ok i fixed it so it "Should" work in firefox, you HAVE to click the Blue F in order to activate fullescreen and the mouse otherwise you'll be stuck looking at the ceiling.


Sammy(Posted 2014) [#17]
Still no luck, clicking "F" has no effect. The debug "Mouse: 0 0" remains unchanged? I am now looking forward though, I just cant turn.

Well done with you FRAGBLEND fix Landon, maybe you should send it to Adam for the MiniB3D repo?


Landon(Posted 2014) [#18]
i'll do that.

hmm yea it seems the fullscreen fix isn't working on firefox, i'll see if i can get that sorted out


Landon(Posted 2014) [#19]
Ok i made a big change, you may need to F5 or reload the page so the cache get's cleared but instead of clicking the Blue F icon, instead just press the F key on your keyboard to go in fullscreen.

should work after that.


Sammy(Posted 2014) [#20]
Much better! :)

It's actually quite fun running around and spraying the walls with bullet holes.

The of the textures are a little indistinct and flicker a bit in the distance, this is probably just down to the lack of mipmapping though.

Very impressive to see it up an running in a browser now though, well done.


therevills(Posted 2014) [#21]
This is cool! Good job! Reminds me of the early FPS games on the Amiga!


Landon(Posted 2014) [#22]
Actually that shakiness of the textures is due to checking the ground collision, i guess for some reason there isn't a constant collision while you are already touching a polygon, so every other frame or so it thinks you aren't standing on anything and tries to apply gravity, when that happens minib3d sends the ground collision, and the player is moved up ever so slightly, so that causes the camera to vibrate. i'm trying to sort that issue out.

i found a COLLISION_FLAG_CONTINUOUS variable but it looks like it was commented out, i'm assuming it caused some serious overhead..


Landon(Posted 2014) [#23]
ok fixed it, also fixed the lightmapping a bit in the room so it's not so dark. i didn't realize UU3D was adding a bump map for the lightmapping.


Sammy(Posted 2014) [#24]
Yes, that's a lot better. It's a little slow though, feels about 10fps?


Landon(Posted 2014) [#25]
Yea it seems that map was actually causing a lot of problems behind the scenes, some people who tried my demo couldn;t even get html5 to work, and flash would just crash over and over. I swapped out the map with Deck16 from UT99 just to test it and it seemed to improve the frame rate, also flash version works now.

i guess i'll have to be very careful about bad materials in maps from now on.

anyways if you ever played UT99 you can relive teh glory dayz on my map right now lol.

Also i'm curious if the framerate is better for you guys.


Landon(Posted 2014) [#26]
Flash version, still have to get the fullscreen stuff to work properly

http://vigilsoft.net/FPSDemo/flash/


Sammy(Posted 2014) [#27]
Flash version is a lot faster, feels like 60fps on my system(maybe add a FPS counter?). Full screen mode is not working in flash.

Much nicer map too, looks very good all in.


Landon(Posted 2014) [#28]
Uh ok i got Fullscreen scaling to work in flash but i dunno it leaves a weird artifact on the screen i can;t seem to remove.

http://vigilsoft.net/FPSDemo/flash/

Press F to go fullscreen


Landon(Posted 2014) [#29]
Couple guns i am working on. Each gun has two modes of fire, the Flamer shoots out a flamethrow and then alt fire it shoots out melting lava blobs that stick the walls and stuff.

Freezer



Flamer is complete






Landon(Posted 2014) [#30]
had to lower the polys on the freeze gun a bit but here it is in game.




Landon(Posted 2014) [#31]
A new player has entered the match... yes this will be the base model for the players.

So.... i was thinking of basing these player models off of the devs on this site, who wants a monkey!?

just let me know how you want to look and i'll add you, i wanted at least 20+ selectable skins (i can add accessories like shades, hats etc etc too) and i'll add your screen name as the player model name in game.





TeaBoy(Posted 2014) [#32]
Your game combined with miniB3D has just given Monkey a new lease of life!

The flash version is fast 'n' smooth, well done! All this needs now is a multiplayer version :)


Landon(Posted 2014) [#33]
i plan on adding a multiplayer version using websockets, also i'll be uploading an update soon with new guns and some AI bots


Sammy(Posted 2014) [#34]
Looking forward to multiplayer beta testing your project Landon.


tiresius(Posted 2014) [#35]
You probably won't have different models but if you do and have a fat monkey, I call dibs. Barring that, I'll take one in yellow. :)

Oh, and this looks awesome. I've heard of MiniB3D but this project and EdzUp's is making me take another look.