• 1. Intro
• 2. New features
  • 2.1. Iframe feature
    • 2.1.1. Open links in an iframe in the current page
    • 2.1.2. iframe warnings
    • 2.1.3. load local pages inside the iframe
  • 2.2. Sound Audio Features
    • 2.2.1. mute button
    • 2.2.2. mute sound if player goes AFK
  • 2.3. Sections and surveys feature
    • 2.3.1. show section
    • 2.3.2. add survey
  • 2.4. Traffic log features
    • 2.4.1. Traffic log
    • 2.4.2. Traffic resume by email
  • 2.5. Graphic features
    • 2.5.1. different resolution background images
    • 2.5.2. force scale and offset
    • 2.5.3. perspective mode
    • 2.5.4. animated background
  • 2.6. Other improvements
    • 2.6.1. Join and Leave functions for any room
    • 2.6.2. Define actions on NPC clicks
    • 2.6.3. Define actions in text commands
    • 2.6.4. definepre and post action
    • 2.6.5. Debug more accesible
• 3. credits
  • 3.1. Image licenses
  • 3.2. Music licenses

BARRICUDA LIKELIKE Online

1. Intro

The tiniest MMORPG. Choose an avatar and hang out with your friends in a virtual version of La Barricuda.

>>>Try it here<<<

This project is an extension of original likelike by molleindustria and is commisioned by arsGames

Look here for basic usage instructions.

Aventuras visuales is an avant garde cinema school and collective in Madrid (Spain). This is a virtual tribute to 'La Barricuda', their beloved local where the workshops took place, which closed years ago, in 2009.

2. New features

2.1. Iframe feature

2.1.1. Open links in an iframe in the current page

Now you can define a link to open in an iframe inside the current page instead of open it in a new tab. For this, add this attribute in the command definition (valid for areas and things):

iframe: true

In example:

h0066ff: { cmd: "text", iframe: true, label: "myLabel", point: [62, 77], txt: 'Intro text', lines: 1, url: "https://www.whatever.com" }

2.1.2. iframe warnings

Be careful to check if the url selected allow iframes.

2.1.3. load local pages inside the iframe

You can put html pages in the public folder and load them inside the iframe.

2.2. Sound Audio Features

Some basic sound features were added.

2.2.1. mute button

A button to switch on/off the audio.

2.2.2. mute sound if player goes AFK

A new function to switch on/off audio if player goes Away From Keyboard. This happens when players change their browser tab and also when a player interacts with some iframed content.

2.3. Sections and surveys feature

2.3.1. show section

Parrafo

2.3.2. add survey

Look at clientMod.js to see how to define a survey. It allows normal inputs, checkbox selectors (with and without images) and radio selectors. Surveys html are auto generated inside a section element added in the index.html.

You can define a function to receive the form answers after been executed, declare it in clientMod and reference it in the postAction attribute when defining the survey.

If log feature is activated, the answers will be recorded in the log.

2.4. Traffic log features

2.4.1. Traffic log

Add this to .env file:

TRAFFICLOG=true

A log file will be created in /logs. It will register the following actions in a csv file.

• server start

  timestamp (ISO format), 'serverStart'
  

• user login:

  timeStamp (ISO format), userID, 'join', user name, starting room name, IP address
  

• user change room:

  timeStamp (ISO format), userID, 'room', new room name
  

• user focus:

  timeStamp (ISO format), userID, 'focus'
  

• user blur:

  timeStamp (ISO format), userID, 'blur'
  

• user disconnect:

  timeStamp (ISO format), userID, 'disconnect'
  

2.4.2. Traffic resume by email

You should activate Traffic log feature for this to work!!!

Add this to .env file to activate this feature:

```
SENDLOG=true
MAILHOST=SMTP ongoing server
MAILUSER=mail login
MAILPASS=password
[email protected]
[email protected]
TIMEZONE="Europe/Madrid"
```

TIMEZONE is optional, "GMT" is the default. Look here for available timezones. This is important to sync cron tasks with your server locale time.

A cron task will rename log file at 00:00AM to match current date.

Also, on every reset and during the daily task, a collect data function will run.

The data collect function will merge all the logs in one global log. You can find an updated copy of the data in:

localhost:3000/logs/global.csv
localhost:3000/logs/global.json

The global.json will be sent by email if SENDLOG is set to true

You can run this collect event at any time by using the '/collect' or '/c' admin command.

2.5. Graphic features

2.5.1. different resolution background images

Adding this to the room declaration in the data file, you can bypass the 128x100 rule

bgScale: 1,
bgResolution: [256, 200],

2.5.2. force scale and offset

Force scale and offset to modify the appearance of things in the room.

I found a bug in the depthOffset calculation and fixed it to make it scale dependant. Now depth drawing will work with sprites in different scales.

In 'hall' room, look how i set the 'mesa' thing with a fixed offset of 10. Also the depth with the column will work at different avatarScales.

Look at 'sillas' things in the 'classroom' room. Each one uses a different scale and the scene profit from the bug fixed. You can change avatarScale and the depth calculation still works fine.

2.5.3. perspective mode

You can define a special function to calculate player scales for each room. This does not affect things, as they are expected to be static. Use scale and offset to align things in perspective. The debug mode draw is very helpfull for this, so i added a yellow line to show the depthOffset (it should be the 'feet' of the sprite at any scale)

Walk into 'cave' room to see it working.

2.5.4. animated background

Background become a sprite and can be animated. Define animated background adding this property "animations" in the data.js

hall: {
    bg: "/barricuda/entrada-spritesheet.png",
    frames: 4,
    animations: { 
        bg0000: [0, 4], 
        bg0001: [4, 4], 
        bg0010: [8, 4], 
        ...
    },
    frameDelay: 60,
...

In this format:

    animations: {
        animName: [startframe, loopDuration (in frames) ]
    }

In our data example you can use the switches in the hall floor to change animation.

Also, if you enter with admin (use 'admin|pass' as name) you can change bg animation by calling this command:

/on 1001

or any combination of 4 binary digits, related to: projector, hall lights, classroom lights, cave lights

change animation in bg:

module.exports.setBgAnimagion = function (animationName) {
    // emit to all clients
    io.sockets.emit('changeBgAnim', animationName);
}

This feature is a Work In Progress.

2.6. Other improvements

2.6.1. Join and Leave functions for any room

You can declare anyRoomJoin and anyRoomLeave functions in your serverMod file and they will be executed when entering and leaving any room, so you don't need to copypaste lots of code anymore.

2.6.2. Define actions on NPC clicks

You can define actions to be triggered when clicking NPCs. In this example, clicking the 'divulgadorNpc will execute onDivulgador function, if it exist in your serverMod file.

var divulgadorNpc = new NPC({
    id: "divulgador",
    nickName: "divulgador",
    room: "r02Entrada",
    x: 64,
    y: 81,
    avatar: 1,
    colors: [2, 2, 1, 5],
    labelColor: "#1e839d",
    actionId: "Divulgador"
});

2.6.3. Define actions in text commands

You can define an action inside a text command, to be executed at the time of running the command, or add the postAction attribute to force the execution after closing the text.

hff00ff: { cmd: "text", txt: "some text", lines: 1, postAction: true, actionId: "MyAction",  label: "click me", point: [65, 95], obstacle: false },

This example runs onMyAction function after the text is closed. onMyAction function must be declared in your serverMod file.

2.6.4. definepre and post action

When defining actions associated to a text command, now you can select whether the action has to be executed before or after the text command is executed. For this you can set the attribute 'postAction' to true in the cmd definition

hff00ff: { cmd: "text", txt: "some text", lines: 1, postAction: true, actionId: "MyAction",  label: "click me", point: [65, 95], obstacle: false },

2.6.5. Debug more accesible

In client.js you will find these selectors. Just set them to true.

var QUICK_LOGIN = false;
var DEBUG_CLICKS = false;
var DEBUG_SPRITES = false;
var DEBUG_CONSOLE = false;

DEBUG_CONSOLE will mute the console output (it's better for performance)

You can also mute server console by adding a .env variable

VERBOSE=false

You can use DEBUGMAILTO variable in .env to define a mail for debug or admin alerts.

[email protected]

Put this line in the code to send an admin alert by mail.

mailer.sendDebugMail('your debug mail subject here', 'Your mail content here');

3. credits

Code licensed under a GNU Lesser General Public License v2.1.

3.1. Image licenses

hall, classroom and cave images by Carlos Padial CC-by-nc

desert images from https://cocomaterial.com/

3.2. Music licenses

Iced Earth, by Dragan Espenschied CC-by-nc

Procrastination Polka by Dragan Espenschied CC-by-nc

Zombie & Mummy Theme by Dragan Espenschied CC-by-nc

Dragan Espenschied https://freemusicarchive.org/music/Dragan_Espenschied#contact-artist