fpwing-eng: September 2016

Monday, September 12, 2016

CARGO Project The main character of the game

Probably, the first brick for the construction of a game of this type is the protagonist.
Usually equipped with a superhuman patience, it obeys your every request.
Often walking, and sometimes speaks, he collects objects and performs actions that often surprise you (or rather should surprise you).
Specifically my actor whith I named "steve" moves only left or right.

The javascript code that drives the protagonist to be included in the file index.js:

Let's start by defining some global variables:

var steve;
var steveAspect = 'img/mainfigure/man.png';
var steveHeight = 22;
var steveWidth;
var stevePosX = 50;
var steveTop = 60;
var myWalk;
var steveMoveToX;
var steveMoveDir;
var steveSpeed=0.3;

and the starting function:

window.onload=function(){
load();
};

function load(){
setNewscene('img/scnr1/S0.jpg'); //carico una immagine di fondo
addSteve(steveAspect); //creo il protagonista
document.getElementById("backImg").addEventListener("mouseup", goWalk, false);
}

function setNewscene(sceneName)
{
document.getElementById("backImg").setAttribute("src", sceneName);
}

function addSteve(aspect)
{
if (steve==null){
steve = new Image();
steve = document.createElement('img');
steve.id = 'steve';
steve.setAttribute("src", aspect);
steve.style.cssText = 'position:absolute;top:'+steveTop+'%;left:'+stevePosX+'%;height:'+steveHeight+'%;width:auto;background-color:blue;pointer-events:none;opacity:1;z-index:100;';
document.body.appendChild(steve);
}else{
steve.style.cssText = 'position:absolute;top:'+steveTop+'%;left:'+stevePosX+'%;height:'+steveHeight+'%;width:auto;background-color:blue;pointer-events:none;opacity:1;z-index:100;';
}
}

the following function will be executed after the mouseup event:

function goWalk(e) {
steveMoveToX = parseFloat((e.clientX-this.offsetLeft) / this.offsetWidth * 100);
steveWidth = parseFloat($("#steve").width() / this.offsetWidth * 100)/2;
startWalking();
}

I check if "steve" is not null and the direction to go; dx o sx.

function startWalking()
{
if (steve!=null){
useWith='';
stopWalking();
if (parseFloat(steve.style.left) > steveMoveToX){
steveMoveDir = "left";
steveAspect = "img/mainfigure/man.png";
}else{
steveMoveDir = "right";
steveAspect = "img/mainfigure/man.png";
}
myWalk = setInterval(walkHandler, 30);
}
}

function stopWalking()
{
clearInterval(myWalk);
}

and now I move "steve" to the mouseup click point.

function walkHandler()
{
if (steveMoveDir == "left"){
if (parseFloat(steve.style.left) > (steveMoveToX - steveWidth)){
stevePosX = (parseFloat(steve.style.left) - steveSpeed);
steve.style.left = stevePosX + "%";
}else{
stopWalking();
}
}else{
if (parseFloat(steve.style.left) < (steveMoveToX - steveWidth)){
stevePosX = (parseFloat(steve.style.left) + steveSpeed);
steve.style.left = stevePosX + "%";
}else{
stopWalking();
}
}
}

And this is our "steve" (red rect) moving on the scene

Here you can find all files.

CARGO Google Play

Monday, September 5, 2016

CARGO Project - Project structure

Here begins a series of posts describing the process of creating the game both technically and creatively.
I do not pretend to say that the structure of this project is the best for the kind of game that I made but I would only describe as I have done.
Advice and constructive suggestions are indeed necessary I agree.
I made this game in HTML and Javascript, thinking immediately to incorporate them into a web app Android.

So the whole game except for some small details can run on any modern browser.
Specifically, I used Chrome.

The HTML page it is really minimal:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <meta name="game" content="myGame">
   <meta name="fpwing" content="fpwing">
</head>
<body id='mybody' style='background-color:#000000;opacity:1'>
<img id='backImg' style='position:fixed;top:0%;left:0%;width:100%;height:88%;z-index:60;'/>

<div id="collectedObjs" style='position:absolute;top:88%;left:0%;height:12%;
width:100%;opacity:1;color:Black;z-index:60;background-color:#000000;' >
</div>

<div id='msgPopUp' style='position:absolute;top:0%;left:0%;height:15%;width:90%
;opacity:1;z-index:100;'>
</div>
</body>
<script type="text/javascript" charset="utf-8" src="js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/index1.js"></script>
</html>

There are references to js libraries and the main project tag on which the whole game is played.

In the next post we will see the javascript code and I will try to describe in simple terms the functioning of the basic game mechanics as the protagonist movement and the objects collection and interaction with the scene.

The free project that contains the first chapter can be downloaded from the Play store at this address

CARGO Google Play

Saturday, September 3, 2016

CARGO Project

According to Garcia Lorca, there are 3 things that every person should do in life:

HAVE A CHILD.
WRITE A BOOK.
PLANT A TREE.

I basically agree but according to my personal way of seeing things, the dear Garci inexplicably forgot one thing:

MAKE A POINT AND CLICK GRAPHIC ADVENTURE.

Do you remember the "Monkey Island"? if you do not know what I'm talking about, you can also click anywhere else: - (((((

It was 1990 when in a typical day, I do not remember how and why, I installed on my first computer "IBM compatible" a new game. It was called "The Secret of Monkey Island".
I did not know much of the game and did not inspire me particularly, but only a few days later, had become my happy thought fixed. It had become my secret garden. A place to live another life, a temporary escape from everyday life. Then I played with "LeChuck's Revenge" and all other LucasArts masterpieces. I remember with emotion "Amerzone" and "Syberia" Benoît Sokal. Remember "Atlantis" of Microid and "brokens Sword" software revolution, "Blade Runner" by Westwood Studios.

Then a few months ago, in a creative moment, I realized that I had the knowledge and ability to create in a reasonable time a graphical point and click type adventure.

So exploiting deeply my medium graphics capabilities and programming that I have accumulated over time, I began to imagine how he could be the new "thing" and especially began to enjoy the pleasure and satisfaction to make this happen.

Here are some pictures of the project being developed: