SPID 8 – Captain Tsubasa online

I will be posting SPIDs (Slashie’s Project Idea Drafts) in the blog, they will be short ideas for games or other projects I may or may not develop into full projects. May be someone will be inspired by them and save me the trouble of developing them.

Based on Captain Tsubasa II: Super Striker for the Famicom, create a game that keeps the spirit of the original including the 2D graphics and cinematics, while allowing online play and other game modes.

tsubasa3

Features

  • Playable in any browser and mobile
  • No history mode.
  • Select a team and play with your friends or…
  • Create your own persistent team, and participate in tournaments.
  • 2D illustrations similar to the anime

tsubasa2

 

Some of the things to improve:

  • Usability,  keeping  the style of the interface but removing it’s rough parts (fan translations had to struggle with it to make it work)
  • No experience points / level up, players have fixed stats and it’s up to the player using their best abilities in the field.

 

tsubasa1

Lorenzo

One week ago, Victor Barrios died in the Bullring of Teruel, Spain. He was killed by Lorenzo, a bull from Ganadería Los Maños.

Lorenzo was sacrificed shortly afterwards, and his mother Lorenza may have been slaughtered too as part of a tradition to end the lineage of the “Killer Bull”, but she had reportedly been killed already weeks before, because of her old age.

I did this small game, as a tribute to Lorenzo.

Play now!

All of his life Lorenzo was trained to become a fierce fighting bull, but instead of being hailed as a great champion when he manages to defeat his opponent against all odds, he sees the world turn against himself and his family. Will Lorenzo be able to escape and save his mother from being slaughtered?

SPID1 – Concordia Tournament

I will be posting SPIDs (Slashie’s Project Idea Drafts) in the blog, they will be short ideas for games or other projects I may or may not develop into full projects. May be someone will be inspired by them and save me the trouble of developing them.

SPID1 – Concordia Tournament

dumeril

A simple 4-players hot-seat death-match game themed on the universe of Ananias, players would pick a class and try to defeat the others in 2D combat (similar to Towerfall). Art will not be pixel art but rather illustrations in chibi style.

Each class would have different features:

  • Paladin: Uses a crossbow as weapon, shoots bolts in a short range. Jumps low, can withstand 3 hits (heavy armor). Can attack with the Holy Sword of Destruction at close range.
  • Hunter: Uses a Magic Longbow as weapon, shoots arrows long range in an arc. Jumps high. Can withstand 2 hits (light armor)
  • Alchemist: Uses the Alchemist Carbine as weapon, shoots acid to a mid range in an arc. Can throw explosive potions.
  • Arcane: Uses a lightning wand as weapon, shoots lighting to a long range in a straight row.

During combat, players can find potions and spells they can use on their advantage.

A better build and deploy process for hybrid apps?

The current build and deploy process for Ananias takes a lot of time and requires lots of focus and bandwidth. Everything is done manually (and is thus prone to errors). Most of times I just can’t afford to release for all platforms, and I forget to announce thru all channels.

The cocoon.io parts are a bit cumbersome since they don’t have a CLI and it requires some back and forth, while also adding a dependency to an online service (for how long is it going to work?) I’m going to experiment with some native crosswalk builds to see if that step can be saved.

But probably what takes more time is the manual process to be done for each different storefront via its own web interface. Each one requires different info, and all uploads have to be started and monitored manually. It’s pretty uncommon for a store to supply a command line tool.

May be I should automatize parts of this? Someday I may do that, in any case it’d simplify packaging but wouldn’t make distribution any easier.

This is the current process executed for each new release of Ananias:

  • Mark the new version in the source code (client and server)
  • Generate a new JS bundle using browserify
  • Upload new build to web (ananiasgame.com/play) (About 15MB) (Only Standard edition)
  • Deploy new server version and restart (About 1MB) (including executing migration database scripts)
  • Use nwbuild to generate the executable packages for Windows, Mac and Linux
  • Rename the directories and zip them
  • Upload to itch.io via web interface (About 200MB )
  • Zip web directory
  • Update config on cocoon.io for next version
  • Upload web directory to cocoon.io (About 15MB)
  • Hit the build button on cocoon.io, wait for build to finish
  • Download APK packages from cocoon.io (About 150 MB)
  • Unzip package, copy release APKs (one per architecture, x86+arm7) to APK directory
  • Run script to sign and align APKs
  • Sign in to google play developers console
  • Upload both APK (About 100 MB)
  • Build change log from git commit messages
  • Summarize change log for Google Play
  • Upload both APKs to Amazon via web interface (About 100MB)
  • Upload to indiegamestand via web interface (About 200MB)
  • Upload to gamejolt via web interface (About 200MB) (Only Standard Edition)
  • Upload to IndieDB via web interface (About 200MB) (Only Standard Edition)
  • Set cocoon.io for iOS builds
  • Hit the build button, wait for build to finish
  • Download xcarchive (About 50MB)
  • Open xcarchive in xcode organizer
  • Submit to App Store
  • Wait for processing
  • Go to iTunes Connect
  • Go to Testflight / External Testing
  • Select new build to test
  • Wait for beta review
  • Go back to Testflight / External Testing
  • Set the new build as active.

The process should be executed twice, once for the Standard Edition and then again for the Fellowship edition.

THIS IS A LOT OF WORK. WHY CAN’T IT BE SIMPLER? This process takes out HOURS (Not exaggerating) of valuable and scarce development time for an Indie dev.

Why can’t I just simply update a single web endpoint, and have all the clients deal with the updating? they have to deal with it anyways, they just have to do it with their own, different store.

Also, the game is already multiplatform, if your platform has an HTML5 browser, like all modern platforms, you can play the game (Yes, you can even play the game on a PS4), then why go through all this?

I understand the advantages of having a downloaded app… people wants to feel they own the app, and they want to play their games while offline or in poor network conditions.

It would be awesome if the app could automatically check and download the updated scripts and required assets. This is not a new idea… some people has already tried but there are some obstacles:

  • Both Play Store and the AppStore are not very clear about their support of this model. You may be risking your app being taken down for not complying with the terms of service. They are also not MEANT to work like this, so you are always fighting against their nature.
  • For in-dev games, the player wouldn’t be notified a new version exists unless he runs the game or you implement some kind of push notifications.
  • The system has to work perfectly, if it doesn’t then your players will be stuck with an old version, or will be unable to play offline, or will end up with a malfunctioning app.
  • Another thing to consider is that this would prevent players from updating the web runtime in which the game runs, although I guess that may be fixed via a normal update.
  • If the player uninstalls the app or erases its data cache, they will have to redownload all assets.

There is a cordova plugin (cordova-app-loader) which adds support for “hot updates”. It seems to work but has some issues (based on what people reports). I don’t know of any similar tool for node-webkit / NW.js, I guess it’d have to be done manually.

Any thoughts?

Exult Turn Based Combat: Small advancements

Been working on the actual Turn Based Combat flow, I’m now using some of the “time_stop” support for the actual battle turns (That is, the way the engine handles the “Stop Time” spell).

The game now stops when in combat mode and I’m also counting the player steps and ending his turn when it hits a limit. Also, using a timer I’m reenabling the player after 2 seconds.

It starts shaping up but there are still some things to do:

  • The avatar’s combat AI is still kicking in, even when he is not in his turn and he’s set to Manual combat mode. So, as long as we are not trying to move he’s going to go ahead and attack nearby enemies nonetheless.
  • The party members keep following me, haven’t been able to make them stick on their place until it’s their turn to move.

Static HTML generation for slashie.net website using MustacheJS

I did some back-end changes for the slashie.net website, with the idea of making it easier to include new projects and update their status. About one year ago I went for a single page layout, but was doing maintenance over the HTML file… which was a bit frustrating. With the new approach I can easily manipulate how the list of projects is shown. You can see the current results at slashie.net

I looked around a bit for a static site generator, but in the end decided to roll my own since what I was going for was extremely simple and didn’t want to meddle with the setup of any of these.

What I needed was generating a single HTML file based on a JSON file with the information of all my projects. I decided to go for nodejs using mustachejs for the template; the script is dead simple… I thought I’d share what I did, in case someone needs something similar. This approach gives you a lot of flexibility, as long as you don’t need to maintain a lot of different pages.

Mustache

First, the data, it’s basically a structured list of all my projects

{	
	"sections": [
		{
			"name": "Games",
			"id": "games",
			"items": [
				{
					"title": "Ananias",
					"image": "img/buttons/ananias.png",
					"text": "Dive to the bottom of the Tomb of Ananias using your smartphone or computer. Take adventure with you everywhere!.",
					"status": "published",
					"buttons": [
						{
							"title": "Play Online",
							"url": "http://ananiasgame.com/"
						},
						{
							"title": "Android Version",
							"url": "https://play.google.com/store/apps/details?id=co.slashland.ananias"
						},
						{
							"title": "Desktop Version",
							"url": "http://slash.itch.io/ananias"
						}
					],
					"tags": ["turn-based", "stable", "denzi", "roguelike", "pixel-art", "javascript", "android"]
				},
				{
					"title": "Rodney",
					"image": "img/buttons/rodney.png",
					"text": "Slash your way to the bottom of the Dungeons of Doom, learn new skills and use tactics to survive.",
					"status": "published",
					"buttons": [
						{
							"title": "Play Online",
							"url": "http://games.slashware.net/rodney"
						}
					],
					"tags": ["turn-based", "stable", "oryx", "roguelike", "pixel-art", "javascript"]
				}
			]
		}
	]
}

Now, the generator itself, it basically reads the data and the template, parses the JSON and then renders it using MustacheJS

function generateFile(){
	var file = fs.readFileSync('data.json').toString();
	var template = fs.readFileSync('template.html').toString();
	var data = JSON.parse(file);
	groupByStatus(data); // Groups by status and sorts items
	calculateNewRows(data); // Adds the newRow and endRow attributes
	var output = Mustache.render(template, data);
	fs.writeFile('index.html', output);
}

Now, I had to add the groupByStatus and calculateNewRows functions in order to do some processing over the raw project data (namely grouping the projects by status and grouping them by 3); Mustache declares itself as a logic-less template system, which means it lacks if/else statements or loops. All it does is replacing stuff. You may have to do something similar, depending on how complex you need your page to be.

Finally, this is my Mustache template, as you can see, it’s pretty simple

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Slashie.net</title>
	<link rel="icon" type="image/png" href="img/icon.png">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<link href="lib/bs3/css/bootstrap.css" rel="stylesheet">
	<link href="css/slashland.css" rel="stylesheet">
	<!--[if lt IE 9]>
		<script src="lib/bs3/js/html5shiv.js"></script>
		<script src="lib/bs3/js/respond.min.js"></script>
	<![endif]-->
	<script type="text/javascript" src="lib/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="lib/bs3/js/bootstrap.js"></script>
</head>
<body>
<section class = "container">
	<section class = "page-header">
		<div class = "row">
			<div class="col-md-2">
				<div id="logoImage"></div>
			</div>
			<div class="col-md-5">
				<h3>Welcome...</h3>
				<p>I'm Slash. This is my collection of game projects, I hope you like them!.</p>
				<p>You might also want to check <a href = "http://slashwareint.com">Slashware Interactive</a>, which is my brand for finished products.</p>
				<ul class="nav nav-pills">
					<li><a href = "http://blog.slashie.net" target = "_blank">Blog</a></li>
					<li><a href = "https://twitter.com/slashie_" target = "_blank">Twitter</a></li>
				</ul>
			</div>
		</div>
	</section>
</section>
{{#sections}}
<section id = "{{id}}">
	<div class = "container">
		<h1>{{name}}</h1>
		{{#count}}<h2>{{count}} projects</h2>{{/count}}
		<p>{{text}}</p>
		<div class = "container">
			{{#items}}
			{{#newRow}}
			<div class = "row">
			{{/newRow}}
				<div class="col-md-4">
					<div class="thumbnail">
						{{#image}}
						<img src = "{{image}}"/>
						{{/image}}
						<div class="caption">
							<h3>{{title}}</h3>
							<p>
								{{#tags}}
								<span class = "label label-success">{{.}}</span>
								{{/tags}}
							</p>
							<p>{{{text}}}</p>
							{{#buttons}}
							<a href = "{{url}}" target = "_blank" class = "btn btn-primary" role = "button">{{title}}</a>
							{{/buttons}}
						</div>
					</div>
				</div>
			{{#endRow}}
			</div>
			{{/endRow}}
			{{/items}}
		</div>
	</div>
</section>
{{/sections}}

<div id = "footer" class = "text-right">
	<p>Copyright (c) 2004 - 2016 Santiago Zapata</p>
	<p>Generated using <a href = "https://github.com/janl/mustache.js/" target = "_blank">mustachejs</a></p>
</div>
</body>
</html>

You can find the mustache tags in the “sections” section, as you can see mustache interprets each attribute contextually from the source object.

The # mustache tags (for example {{#sections}}) represent a repeating block; the contents inside will be replicated for each one of the objects if the attribute is a list, or once if the attribute exists. (this is used for example on the {{#image}} block, to only show the image tag if the project has an image)

The double and triple mustache tags {{}} and {{{}}} are replaced with the value of the attribute of the given name on the context object. The triple mustache leaves HTML content unscaped, which may be useful if you want to include HTML content directly.

Finally, the {{.}} tag is used to include the value of an object directly, it’s useful for example to include the content of arrays of strings.

And that’s about it! now I can easily add new projects without having the worry about the page layout! My program sorts the projects in alphabetical order and groups them by type and status. What’s also important for me is it takes care of the grouping by 3 items which is required by the way I’m using bootstrap.

And of course, the main point of this is decoupling the data from the view, which in turns takes me to the following point: I may in the future work a bit in the frontend side, to maybe get rid of bootstrap and include some filters…

I hope this is useful for someone to create a simple portfolio or similar page.