Monthly Archives: April 2014

Anima Beyond Fantasy, Anima: UNICO, Informática, Juegos de Rol, Oschel Editions, Programación

Making of Anima: UNICO – General structure

In my last post I went through the tools I’m using to develop Anima: UNICO. I have to add another one: SourceTree, a graphical UI for Git very useful and nice, and which makes easier following the GitFlow pattern. Obviously, I don’t need to use GitFlow (and actually I don’t follow it fully), but I like it, as a base over which organize me.

Now, let’s start with the meat. First, how to organice a javaScript application the size of Anima: UNICO? After my initial investigations, I arrived to the following workflow:

  1. I create as many Javascript files as I want/need, usually one per class.
  2. To publish them, I use Grunt to concatenate them and then to minify and uglify them. This way I get only one JavaScript file to publish on the web.

Regarding the organization of the javascript files, I’ve been following (more or less) Model-View-Controller patterns.

  • js/ – General folder for javascript files.
    • controller/ – Controllers.
    • data/ – Data.
    • view/ – Views.
    • model/ – Models.
    • locale/ – Localization.
    • libs/ – Third party libraries
    • vendor/ – Third party libraries
  • sass/ – SASS files.
  • img/ – Image files
  • fonts/ – Fonts
  • css/ –  CSS files.
  • index.html – Main web.
  • indexLocal.html – Main web for local debug.
  • Gruntfile.js – Grunt script.

Controllers

They control the communication between models, prepare data for the user, and receive the user actions and act on them.

Data

The concrete instance data for every class. This is, the data for every Advantage, Spell, Martial Art, etc.

There are several ways of storing data. As I wanted my application to work offline, I could not use a database. In the end, I stored them in their own initialization. This really is a bad idea. I should have stored them in JSON format from the start. In the future I will make the change.

An example:

addVentaja(new Ventaja( VENT_APRENDIZAJE_INNATO_EN_UN_CAMPO, “”, VENT_APRENDIZAJE_INNATO_EN_UN_CAMPO_DESC, REPETIBLE_OPCIONES, [2,3], [], true, [LISTA_TIPOS_SECUNDARIAS], [aprendizajeInnatoCampo], GRUPO_SECUNDARIAS ));

This line of code initialices the advantage “Natural Learner, Field”.

Views

Views generate the UI and interact with the user.

Models

Models are the base classes. Character, Race, MartialArt, etc…

Localization

Localization is everything related to showing the application in several languages. Right now, this means spanish and english, and french is in the works. For this, I have the inestimable help of Andrew “Dynaes” Reich and Vincent “Moklo” Bouscarle.

In another post I’ll detail how I do the localization.

 

Anima Beyond Fantasy, Anima: UNICO, Informática, Juegos de Rol, Oschel Editions

Making of Anima: UNICO – Tools

Here I am again. As promised, I’m going to talk about the tools I use to create Anima: UNICO. Without further ado…

1. Language: HTML+CSS+JavaScript client-side, PHP server-side

This one is easy. The main development of Anima: UNICO is made in JavaScript. The web itself is done in HTML, but it is mainly created dynamically from the code using jQuery. The representation is almost totally controlled by CSS.

2. Frameworks and JavaScripts libraries: jQuery, jQuery UI, Modernizr, Gumby

One of the strong points of JavaScript is the great quantity of existing developments. Very probably jQuery is the most famous. It allows working with the webpage DOM without going crazy.

Beyond jQuery, I started using jQuery UI as base for the user interface. jQuery UI is a framework with functions to create buttons, dialogs, draggable components, etc.

Modernizr is a small library which easies the design among different web browsers.

Gumby is a framework to create adaptative webpages, ehich adjust themselves to the screen size. Is the base I use to format the page.

3. Frameworks and PHP libraries: CakePHP

For the server-side, I’m using, in a very basic way, CakePHP, which offers me just what I needed.

4. IDEs: Jetbrains WebStorm, JetBrains PHPStorm

I’ve fallen in love with the JetBrains IDEs. I loved WebStorm  to develop JavaScript, and when I started using PHP, I jumped to PHPStorm (which includes all WebStorm functionality). They are very powerful environments, and integrate everything I wanted them to integrare: version control, remote database, ftp, libraries…

Also, through them I discover the technologies from the next point.

5. More: Node.JS/NPM+Grunt, SASS+Compass, Mocha

JetBrains IDEs integrate with their own Node.JS server, which allows the use of lots of useful scripts. I discovered Grunt, which allows to automatize tasks (it is similar to Make), and used it to unify, minimify and uglify mi javascript files and get them ready to deploy to production.

6. Version control

I started using Subversion as version control, but some months ago I discovered and learned Git, and never looked back. It is a really great VCS.

7. Tasks, general management, online repository: Assembla

I found several online repository options. In the end, I chose Assembla, which offered me a very nice free plan. It integrates with svn and git and offers task and ticket management, that I can integrate with PHPStorm.

8. Reports and web analysis: Google Analytics

In my web I use Google Analytics to check daily views, language, browser… important details for a JavaScript project.

That’s all for today. Next day I’ll start with the code structure.

By the way, you can find the code in GitHub. Go ahead, fork it!

Cine y TV, Críticas

Películas de James Bond

3 Comments

Hauce ya tiempo que tenía una espina clavada. De La Llamada de Cthulhu leí las obras de Lovecraft. Del MERP leí la obra de Tolkien. Jugué a 007… y nunca había visto entera una película de James Bond. Así que últimamente me he puesto a verlas todas en orden.

Voy por Moonraker y… ahora entiendo que se diga que las de Connery son mejores. El nivel de patochada ha incrementado exponencialmente. Creía que Live and Let Die sería de las peores, con su +20 a racismo, pero Moonraker… tiene a un pájaro mirando dos veces con sorpresa a una góndola hovercraft conducida por James Bond. Y eso es sólo un ejemplo.

Mi reproductor me ha dejado tirado a media hora de terminar, así que ya haré una crítica más completa en algún momento.

De momento, breves ideas de las vistas hasta ahora:

  • 007 contra el Dr No: Mucho mejor de lo que esperaba. Muy lenta, más seria de lo que se suele asociar a James Bond.
  • Desde Rusia con Amor: Un rollo.
  • Goldfinger: La primera película con todos los elementos de James Bond, y diría que una de las que mejor los usan.
  • Operación Trueno: Se nota que querían mostrar las caras secuencias submarinas. Otro rollazo. Pero es una de las fuentes de Austin Powers, con el número 2, los tiburones…
  • Nunca Digas Nunca Jamás: Aún no la he visto. Que sea otra vez la historia de Operación Trueno no me motiva.
  • Sólo se vive dos veces: Poca cosa. Ninjas asaltando la guarida del volcán, y otra tanda de material base para Austin Powers.
  • Al Servicio Secreto de su Majestad: Lazenby me gusta como Bond. Esta es una de las que más me han gustado en conjunto.
  • Diamantes para la Eternidad: Y más material para Austin Powers. Casi me sorprende lo poco qu tuvo que exagerar para hacer sus parodias.
  • Vive y Deja Morir: Un presidente negro de un país africano se dedica en su tiempo libre a hacerse pasar por criminal de Harlem con pinta de proxeneta y mover a todos los negros a hacer cosas criminales. Ah, y vudú, que también es de negros. No sé si ser de los setenta es excusa suficiente para esta película.
  • El Hombre la Pistola de Oro: No se por dónde empezar. Christopher Lee y su tercer pezón y su mayordomo enano.
  • La Espía que me Amó: Parece una mezcla de ideas y escenas ya usadas en las películas anteriores.
  • Moonraker: Pfffffff.

Ya sólo me quedan 13 y pico. Bueno, en realidad Skyfall la vi el otro día por casualidad. Y como ya vi hace un tiempo Casino Royal (la original, la de Woody Allen y David Niven), ya va quedando poco. A ver si falta alguna que merezca la pena.

Anima Beyond Fantasy, Anima: UNICO, Oschel Editions

Making of Anima: UNICO – Introduction

Logo de Anima: UNICO

Hello to everyone.

I’m starting with this post a series about the development of Anima: UNICO, mi character generation web application for the role-playing game Anima: Beyond Fantasy. Let’s see if I can do one or two of these per week. I think I will be able to share many interesting things for anyone looking to develop a similar web application.

First, a bit of background. I started to develop Anima: UNICO around September/October 2013 (I can’t remember the exact date). Inspired by the great character generation web application made by my friend Azrapse for the game The One Ring, which we use almost every week to play, and moved by the lack of character generation software for Anima, one of my favourite role-playing games, I decided to start working on it.

However, Anima: UNICO was not my first work in web based character generation. I have (and very advanced, actually) a similar application for  7th Sea, and I also started one for Hackmaster (for the current edition). With the Seventh Sea one I lacked motivation (although I want to finish it some day). The Hackmaster one I abandoned when I learned that the game creators were developing their own character generation application: I’m not interested in doing useless work.

I have said before that there was no character generation software for Anima, but it seems I looked for it very poorly back then, because around February 2014 I searched again and found several projects. The main one, is the ingenious excel sheet made by several members of the Anima Spanish forum (I think the main developer is Solkar). It is so good that, were I to see it before starting my work on Anima: UNICO, I probably would have never started the development. I also found out that someone did a little crowd-funding in Indiegogo to develop a character generation application for Anima. I have seen no further movement there, and I don’t know if they got to develop anything. In any case, it seems they have made public nothing.

My goals for Anima: UNICO when I started with it were basically (and in this order):

  1. Allow to fully create characters in the web application and also without Internet connection.
  2. Develop it in JavaScript: the One Ring application convinced me that it was the best way.
  3. Develop it around the current rules (Core Exxet) with all the supplements (Domin Exxet, Arcana Exxet, Prometheum Exxet, Gaïa 1, Gaïa 2, Those Who Walked Among Us, Master Screen, we supplements 1, 2 and 3, and any other book that gets published).
  4. Allow the incorporation of house ruled items, like classes, abilities, advantages, disadvantages, martial arts, ars magnus, spells, etc.
  5. Allow saving the characters, defining game groups, defining a DM in the group, that the DM could be able to set which rules to use, and that the group members, when creating their characters, used directly those rules.
  6. Allow the DM to demand “fair” characters: with this option checked, all the random part will be made in server-side.

In the next post I’ll talk about the tools I’m using (and those I used and stopped using).