Project Archer – part 1 – concept

Summary:

Creating a close to real-time MMO archer game in Javascript.

((TL;DR jump to Development Plan))

History:

I’m a big fan of game mechanics, everything else may come second, but if the eye-hand challenge don’t feel right, the game most certainly goes down the drain.

The inspiration for this project came about 5 years ago:

Game design

I’ve been thinking of this project since i first shot birds at Bowman 2. The game played under this mode (sandbox) on Android 2, is dead simple. Drag and release to shoot an arrow! Simple but interesting graphic behaviours emerge. Like one arrow hitting 2 or more birds, one arrow that goes up 90 deg, and hit your archer in the head! Maybe go turbo and create an arrow storm!

Screen Shot 2016-03-08 at 4.15.21 PM.png

None of the effects I mentioned give out any score, there is no positive reinforcement mechanism either! It’s plain that screen made for sadistic individuals like myself. And yes, i got tired of it quickly, but still, the mechanics just felt so good for a few minutes.

Add MMO capabilities, a persistent world, one arrow that would teleport my character so now it can move through the scenario, of course some level design.. easy (not easy).

But then I thought, that’s too simple.. I want to embed some great elemental combinations, like Magicka! That would make the game more dynamic and engaging. Of course it would at least double development time, but not a single fuck is given about it in imagination world.

Of course I’m also a big fan of LoL, Kog’Maw being my favourite champion. So i thought i’d embed a somewhat similar cooldown system for each arrow, probably a skill tree would also be in place.

kog-maw-dance-o

Well then, considering elements I want in the game and overlooking a bit of level design that should be enough to think about.

Enter technical choices.

Question: what free game framework support real time multiplayer, is performant and use pure HTML5? … none.

Partial answer, I love Phaser.io, so easy and fun to develop with. But 2 elements held me back at choosing it right away.

Biggest one was, how to sync multiple players on the same space? After all people should be seeing the same arrow flying and hitting the same stuff. When microseconds matter for accurate shots to happen, sync can’t be taken for granted. In fact there are many techniques online shooting games use that were not available out of the box for browser games. Even Websockets couldn’t support it as it’s based on  TCP, not UDP. WebRTC just came in years later.

So… Unity 3D? 😢

They do pack all i’d need for game design, asset management, physics, and i bet there is much more. There was a cost at the time to deploy at mobiles but it would deliver a much superior performance than something in HTML5.

But 3 factors drove me away:

  • vendor locking
  • no HTML5 deploy for browsers
  • considerable learning curve
  • real time networking (MMO) was still crawling

So specially for the networking implementation complexity i gave up on this lib.

I thought another of many other libs that use SVG or WebGL, so we could pack more interesting visual effects, but a decision was never made. Work took a huge space in my life, along with moving to new places and investing in more ‘social time’ something new for the geeky me.

🕛🕝🕞🕘🕙🕚🕐

Development Plan – proof of concept

Present day, present time: 2016-03-08 6PM. In between jobs is probably my most accurate status.

There is no time limit set for this project, nor I consider delivering consistently.

Current goal: rendering something that shoots something, and the scenario should sync for every player connected within 1 second. Ideally, the world state persist.

Pragmatically, the floor will be a flat plain and limited in length. The ‘archer’ spawn at a random position, it represents under control of a player while they are connected. It should be able to shoot a basic physical object, it goes off horizontally at the press of a button – so controls are reaaaally simple.

Architecture lowdown

Clients will run the all of game logic, it should as usual process inputs, events and send (ideally) deterministic information to the server. Almost all input is transmitted, but also the results (where arrow hits, what happened, etc).

The server would be pretty much ignorant of all game logic, not validating inputs / results but storing events and transmitting it to connected clients. When a client come to reconnect the server would send all events.

Needless to say, this is not a secure client-server architecture, it’s much more of a p2p. In traditional multiplayer architecture, the client acts as a vessel for input & rendering, while the server is in charge of processing action, events & results. Our case is simplified as proposed:

  • game spawn player 1 at randomly generated X/Y position (send event with position)
  • player 1 holds down button to shoot arrow (send event with position)
  • player 1 release arrow 1 (send event with angle, force, …)
  • arrow 1 hits the floor or enemy and become immovable (send position it hit)

All events should be sync in between clients as they arrive. Still unsure on how to fine sync certain things, like arrow trajectory.. some funky jitter may happen.

Tech choices:

The foundation laid made upon Phaser.io & Firebase for a 1st try.

Using Browserify + npm for managing packages.

Most likely deploying @ Heroku or GitHub Pages.

Unknowns and risks

¿Can firebase add any arbitrary data on server side, when it receives my json Object, and before re-transmitting it? I really need to set a timestamp when an event it arrives.

¿Can I really sync physics in such simplistic way?

¿Will the delay of Firebase events be acceptable? If not i could run some WebRTC solution on the side.

¿Is it going to work on mobile as is?

Wrapping up

Hope to deliver a first version soon, stay tuned!

 

 

JSONP with Express.js API – cross domain request

The problem:

So you have this awesome API endpoint, but of course it is another domain as the static site.

Web browsers are pretty moody with Cross Domain and there are actually very good security reasons for that, but even using good practices the old Internet Explorer don’t care.

Welcome ancient jsonp techniques!

Solution

For some Express.js API running on Node.js and client using jQuery (or something alike)

In your server:

app.get('/my-unique-endpoint', function(req, res, next) {
  var myAwesomeResource = ["hello", "mundo"];
  if (req.query && req.query.callback) {
    res.set({
      // nice to have, but Chrome dont seem to mind either way
      'Access-Control-Allow-Origin': '*',
      // right content type prevent warnings and errors
      'Content-Type': 'text/javascript; charset=UTF-8',
      // optional, this is in seconds, equivalent to 8h
      'Cache-Control': 'public, max-age=28800'
    });
    return res.send(200, "" + req.query.callback + "(" + JSON.stringify(myAwesomeResource) + ");");
  } else {
    return res.send(200, myAwesomeResource);
  }
});

In the client:

// see the data in your console
$.getJSON("http://myawesomewebsiteurl/my-unique-endpoint?callback=?", function(data){ console.log(data) } )

Caveats

jsonp is works for GET verb, because it effectively execute the code received as if it was downloading a script.
for the same as above, the source should also be fully trusted!

Loggly middleware for Express.js (server visibility)

Hi!

Oh how long without posting, I’ve been missing it dearly, but in transition between jobs I was super busy, and now I can take the time to add some cool stuff =)

Use Case

I’ve been building an API, it is very cool, but the visibility for it is naturally low compared to websites. Loggly offer a great service for monitoring servers via a simple API available in node.js. While this API is cool, it is super broad and require some experimentation to implement an adequate visibility level.

Wouldn’t be amazing to be able to see every request that come in your server and how it respond? Utopic? Absolutely possible!

Loggly API

Implementation

This implementation has been heavily inspired by Connect logger middleware – which is great.

I deeply recommend you to tune it for your visibility needs, though. Make good use: https://gist.github.com/flockonus/5380753

// suggested use:
app.configure(function() {
  app.set("port", process.env.PORT || 3005);
  app.use(logglyMiddleware);
  // ..
  app.use(express.bodyParser());
  app.use(app.router);
  // ..
});

Notes worth taking

  • This snippet will show you information in your console when o development
  • The info sent might be too much in terms of size or frequency, make good use of customization for your needs
  • If you are dealing with a website, I advice you to not send every path hit, it is just too much

Cheers!

Posting a photo (as a business) to a Facebook Page via JavaScript SDK

The Facebook Javascript SDK (API) is not so well documented, what makes not so logical to post to a page, using it. For that I am about to show, make sure your connect scope having at least: “manage_pages,publish_actions,publish_stream”.

I am assuming you already succeeded providing login to the user; if this is not the case, refer to the docs.

We rely heavily on the FB.api method, the docs make a poorly job documenting, but is a starting point anyway. Also, notice the response is async.

Fetch all user pages (actually the first 5k), but only store the first as var page (this is just a sample)

var page = null;
FB.api('/me/accounts', function(response) { console.log(response); page = response.data[0]; })

Now, we want to publish a post to the page timeline, the thing is, we are not posting as ‘me’ anymore, we must post as the page, and it requires both the id and access_token!
I will make a sample function for it, the response is the post id if it all went well, or an error.

function postToPage(page, msg){
  FB.api('/'+page.id+'/feed', 'post', { message: msg, access_token: page.access_token },
    function(res) { console.log(res) }
  )
}
postToPage(page, 'hello fb-page world')

For last, posting a picture requre the url param, like so:

function photoToPage(page, src, msg){
  FB.api('/'+page.id+'/photos', 'post', { url: src, message:msg, access_token: page.access_token },
    function(res) { console.log(res) }
  )
}
photoToPage(page, 'http://24.media.tumblr.com/tumblr_m1ttif5puW1qcrr0lo1_500.png', 'nyan art')

* Don’t try to run all functions in sequence, since the result comes asynchronously you wont have the var page set.

** kudos for Владимир Дворник answer on Stack Overflow for the url param not documented in the Page Graph API.

*** Security note. The JavaScript SDK can be very unsafe in the case a hacker is able to inject JS code in your page (and even happens in Twitter all the time even though they have millions in funding) they may take advantage of all of the user’s permissions.

Done!

ImageMagick on Joyent

It is really simple:


pkgin search ImageMagick # you will get some result like this:
ImageMagick-6.6.6.5 Package for display and interactive manipulation of images
p5-PerlMagick-6.6.6.5 Object-oriented Perl interface to ImageMagick
php53-imagick-5.3.5.2.2.2 Provides a wrapper to the ImageMagick library
ruby18-RMagick-2.13.1nb3 Ruby binding to ImageMagick
ruby18-mini-magick-2.1 Ruby wrapper for ImageMagick command line
ruby19-RMagick-2.13.1nb3 Ruby binding to ImageMagick
ruby19-mini-magick-2.1 Ruby wrapper for ImageMagick command line

Now, install the latest version, today it is 6.6.6.5, so run:

pkgin install ImageMagick-6.6.6.5

Done!

For the Node.js package “imagemagick” at “0.1.2” works for my use cases, which are just resizes 🙂
If you are using other languages you may need the other packages as well.

Mongoose validate unique field (insensitive)

Making a validation function for Mongoose (Node.js – MongoDB ODM) that checks upon validation field.

function uniqueFieldInsensitive ( modelName, field ){
	return function(val, cb){
		if( val && val.length ){ // if string not empty/null
			
			var query = mongoose.models[modelName]
				.where( field, new RegExp('^'+val+'$', 'i') ) // lookup the collection for somthing that looks like this field 
			
			if( !this.isNew ){ // if update, make sure we are not colliding with itself
				query = query.where('_id').ne(this._id)
			}
			
			query.count(function(err,n){
				// false when validation fails
				cb( n < 1 )
			})
		} else { // raise error of unique if empty // may be confusing, but is rightful
			cb( false )
		}
	}
}

Then call it to a field (aka path):

UserSchema.path('nick').validate( uniqueFieldInsensitive('User', 'nick' ), 'unique' )

Recommend you organize all validations in a file for itself, or even a folder if grows too big.

If you have a unique index set for the path you may just save it and check for the error raised; the thing is the format of the error.

Basic Authentication on Node.js – Express and Mongoose

via Axiom Zen

Hello!

This post is about the most important parts I can think of implementing signup and login to Node.js powered by Mongoose and Express.js.

This post have a huge audience, but guys, please keep in mind that this post was done a while ago. It works pretty well as a cook-book, but there probably are better options for achieving this nowadays, new npm packages and such.

Implementing last night, I was impressed on how fast had the functional part done (around 3 hours), pretty much the same time I’d had it done in Rails (if not faster).

Goal:

  • 3 urls: GET login & signup, POST login, POST signup.
  • User fields: email, nick, password(encrypted).
  • Validate (and show) messages for all fields.
I’ve setup a small Github project that may be used as example (assuming you have mongoDB installed and running in localhost) – DOWNLOAD IT FROM GITHUB  

Model: user.js

var Schema = mongoose.Schema
  , ObjectId = Schema.ObjectId
  , Validations = require('./validations.js')
  , salt = 'mySaltyString'
  , SHA2 = new (require('jshashes').SHA512)()

function encodePassword( pass ){
	if( typeof pass === 'string' && pass.length < 6 ) return ''

	return SHA2.b64_hmac(pass, salt )
}

var UserSchema = new Schema({
    nick        : {type: String, required: true, unique: true, trim: true }
  , email       : {type: String, required: true, unique: true, trim: true, lowercase: true }
  , password    : {type: String, set: encodePassword, required: true }
});

UserSchema.statics.classicLogin = function(login, pass, cb) {
	if( login && pass ){
		mongoose.models.User
			.where( 'email', login )
			.where( 'password', encodePassword(pass) )
	  	.findOne( cb )
	} else {
		// just to launch the standard error
		var o = new this({nick: 'VeryUniquejerewelA', password: '', email: login+'aaa'})
		o.save(cb)
	}
}
UserSchema.path('nick').validate( Validations.uniqueFieldInsensitive('User', 'nick' ), 'unique' )
UserSchema.path('email').validate( Validations.uniqueFieldInsensitive('User', 'email' ), 'unique' )
UserSchema.path('email').validate( Validations.emailFormat, 'format' )
UserSchema.path('password').validate( Validations.cannotBeEmpty, 'password' )
UserSchema.plugin( mongoose.availablePlugins.timestamper )

mongoose.model('User', UserSchema)

.Highlights of this code: We are using the package jshashes, which supplies many convenient encryption methods, among those SHA512 –strong enough
It is a good practice to use a salt along, represented by the var salt. In practice it makes way difficult for a cracker that acquired access to the database do decipher the passwords stored.
The method encodePassword is used at two occasions, when setting the User password, and when retrieving it from database.
UserSchema.statics is a object that stores additional static methods our User model will offer.
The function classicLogin requires both login and pass to search the db for existence, otherwise, it will launch an error (kinda of a smelly workaround to make it work dry )
UserSchema.path(…).validate offers us validations, in our case, we do not allow repeated email or nick, and password should be bigger at least 6 characters long. Also email should at least look like a email.
All those validations work along with the own Schema definition: required, unique, trim, lowercase

Route: auth.js

// app.get( '/auth/popover', auth.popover);
exports.popover = function(req, res){
	//req.session.popover = new Date()
	console.log('My session:', req.session)
  res.render('auth/index_pop', req.viewVars);
};

// CLASSIC LOGIN / SIGNUP       --because everyauth seems too messy for login+pass
// app.post('/auth/classic-signup', auth.classicSignup)
exports.classicSignup = function(req,res,next) {
	if( !req.body ){
		console.log('why u signup nobody?')
		return res.redirect('/?nobodySignup')
	}

	var user = new app.models.User()

	user.set('nick', req.body.nick)
	user.set('email', req.body.email)
	user.set('password', req.body.pass)
	user.set('providers', ['signup:'+user.get('email')])
	user.set('profiles', [{ _name: 'signup'}])

	user.save( function(err) {
		if( err ){ // validation failed

			req.viewVars.u = user
			return classicYieldErr( req, res, 'signUp', err)

		} else { // signup successful

			req.session.user = {
				provider: 'signup',
				id: user.get('id'),
				nick: user.get('nick'),
			}

			req.flash('notice', 'Welcome!')
			req.viewVars.welcome_login = "Welcome, "+user.nick

  		res.render('auth/win_pop', req.viewVars )
		}
	})
};

// app.post('/auth/classic-login',  auth.classicLogin)
exports.classicLogin = function(req,res,next) {
	if( !req.body ){
		console.log('why u login nobody?')
		return res.redirect('/?nobodyLogin')
	}

	app.models.User.classicLogin( req.body.email, req.body.pass, function(err, user) {
		if( err ){ // validation failed

			return classicYieldErr( req, res, 'signIn', err)

		} else {

			if( user ){ // login

				req.session.user = {
					provider: 'signup',
					id: user.get('id'),
					nick: user.get('nick'),
				}

				req.flash('notice', 'Welcome!')
				req.viewVars.welcome_login = "Welcome, "+user.nick

	  		res.render('auth/win_pop', req.viewVars )

			} else { // not found
				return classicYieldErr( req, res, 'signIn', {errors:
					{'loginpass': {
						name: 'V',
						path: 'login+password',
						type: 'loginpass'
					}
				}})
			}

		}
	})
};

// display form error
function classicYieldErr( req, res, mode, err ){
	req.viewVars.erroredForm = mode
	if( mode === 'signIn' ){
		req.viewVars.signin_errors = app.helpers.displayErrors( err )
	} else {
		req.viewVars.signup_errors = app.helpers.displayErrors( err )
	}
	req.viewVars.email = req.body.email

	res.render('auth/index_pop', req.viewVars);
}

Here we define the 3 routes;
– one route(GET) that defines one page for both login or signup
– one route(POST) to submit login
– one route(POST) to submit signup
About the last 2, their only role is to allow access for valid data. That is, valid signup data, or login+password existing in our collection from MongoDB.
The function classicYieldErr is there just to serve the errors in sort of an uniform way. We will see about this function on the next file

Model Helper: validations.js

exports.uniqueFieldInsensitive =  function ( modelName, field ){
	return function(val, cb){
		if( val && val.length ){ // if string not empty/null
			// only for new docs
			if( this.isNew ){
				mongoose.models[modelName].where(
					field, new RegExp('^'+val+'$', 'i')
				).count(function(err,n){
					// false when validation fails
					cb( n < 1 )
				})
			} else {
				cb( true )
			}
		} else { // raise error of unique if empty // may be confusing, but is rightful
			cb( false )
		}
	}
}

exports.emailFormat = function( val ){
	// false when validation fails
	return (/^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i).test( val )
}

exports.cannotBeEmpty = function( val ){
	console.log('pass val is:', val)

	// not all passwords should be set, BUT when string, should be encoded
	if( typeof val === 'string' ){
		if( val.length ){ // when it comes empty, something went wrong!
			return true
		} else {
			return false
		}
	} else {
		return false
	}
}

This file contains some very important function, being intuitive, I will only comment on the first.
uniqueFieldInsensitive is actually a validation creator. It uses JS’s closure ability along with the powerful this object to wrap the context where this will represent whichever Model is calling it.
The intent of the function is to search the db for any repeated occurrence of the field, case-insensitive. This way the system will block a user “John” from signinup, if “john” is present.

Helper: form_helper.js


//app.helpers.displayErrors = require('./helpers/form_helper.js').displayErrors

stripErrors = function(mongooseErr){
	var prop, list = [];
	for( prop in mongooseErr.errors ){
		list.push( [mongooseErr.errors[prop].path, mongooseErr.errors[prop].type] )
	}
	return list
}

/*
 * Translate mongoose errors into a <li> of errors
 */
exports.displayErrors = function( mongooseErr ){

	console.log( 'mongoose errs', mongooseErr )

	var list = stripErrors( mongooseErr )

	var output = []
	list.forEach(function(e,i){
		switch( e[1] ){
			case( 'unique' ):
				output.push( e[0]+" is taken" )
				break;
			case( 'required' ):
				output.push( e[0]+" is "+e[1] )
				break;
			case( 'format' ):
				output.push( e[0]+" has a bad format" )
				break;
			case( 'password' ):
				output.push( "password should be at least 6 char long" )
				break;
			case( 'loginpass' ):
				output.push( "login+password not found" )
				break;

			default:
				output.push( e[0]+": "+e[1] )
				break;
		}
	})
	if( output.length ){
		// condense all items in an error list
		output = [output.join( '</li><li>\n' )]
		output.unshift( '<ul><li>' )
		output.push( '</li><ul>' )

		// wrap in a div
		output.unshift( "<div class='error block'>" )
		output.push('</div>')
	}
	return output.join('\n')
}

This file provides a translation from Mongoose errors to user-readable errors. In order to offer a good UX, it is important to give accurate feedback. Notice this file could benefit from some refinement 🙂

Don’t forget to download the code from github, it plays well along everyauth module 🙂

Cheers!