Adding OpenGlows to Houdini

Hey,

As people keep requesting this, here is the step by step tutorial on how to implement OpenGlows onto AS2 Houdini.

PROOF OF CONCEPT: https://vimeo.com/347787881

REQUIREMENTS:

  • Houdini should be already installed and setup either on a localhost environment or a VPS.
  • (OPTIONAL) Adobe Flash CS6 to continue adding more glows/tweaks
  • Source code editor like Visual Studio Code and an FTP tool to edit Houdini files.

NOTE: Using a source code editor like Notepad++ can cause indentation issues, so when you attempt to run Houdini it will say a piece of code you added is not indented when it is from your view. The easy fix for this is to just switch to visual studio code.

The current OpenGlows.fla.swf file provided currently supports nameglows, namecolor, bubblecolor, bubbletext, bubbleglow, speed, mood, moodglow, moodcolor, walk on walls and penguin size. It should work if you follow this tutorial correctly.

However, I also attached a file called rcpps.swf that has even MORE features and glows, but this tutorial does NOT show how to setup the extra features within that file, it’s just for you to look through, maybe experiment and take any parts of it you want to implement into the normal OpenGlows file.

You could attempt to set up the RCPPS.fla file but there is much more modifications server sided, you could probably file them at my repo here, although it’s for the async version.

I would recommend just using the openglows.fla file, getting that to work first, then adding parts of RCPPS.fla to openglows.fla and see if the features work. Examples of what is in the RCPPS.fla file is playercard colour, credits etc.

NOTE: I did not create this original OpenGlow’s file, although I tweaked and added some modifications to make the glows look slightly neater.

1. Injecting OpenGlow’s safely through the dependencies.

First of all, you can either download this file from the bottom or do this:

Open up Adobe Flash CS6, create a new AS2 document, it should be named Untitled by default, save the file and call it whatever you want i.e. openglows.fla

Now, you want to add the actionscript code for openglows, so you want to navigate to Window -> Actions like shown in the screenshot:

It should then show a blank script, this is where we’re going to add our actionscript code.

You want to paste the following code from this pastebin:

https://pastebin.com/u3sSYY4Y

The end result should look like this:

You then want to save it by hitting CTRL+S or CMD+S, then exit out of actions so you’re back at the stage, like shown here.

Then you want to navigate to File -> Export -> Export Movie like shown in the screenshot below, this will export our FLA file with the openglows code to a SWF file that we can inject through the dependencies, so that the glows load via client-side.

It should ask what file extension you want to save it as and what you want to call it, make sure you use the .SWF extension and you may call the file whatever you want, just try not to include spaces or special characters, maybe choose something simple like glows.swf or openglows.swf.

It will ask you where you want to save this file, depending on your setup, you want to save it into the client area of the media-server.

So if you’re on e.g. Windows and have a XAMPP environment setup, you should save it in C:/xampp/htdocs/media/play/v2/client assuming your media server folder is called media in htdocs.

If you’re on a VPS, it would be e.g. /var/www/html/media/play/v2/client and you would have to upload this file via FTP. It solely depends on what your setup is like, you should know where your media server is and what one you are using for this CPPS.

Once you have saved it in the client folder, we can move onto fiddling with the dependencies.

2. Adding the file via dependencies

Now we need to make sure the file is loaded when the client loads, so that the glows can be added onto our penguin. Head to the client folder, where we saved our openglows swf file. In that folder you should find a file called dependencies.json.

If you’re hosting this on a VPS, you want to open this file using a source code editor, either download it from FTP and reupload it once done or if you’re on localhost, just edit it directly from your media-server within htdocs.

We’re going to add an entry for our new openglows file.

Once you open the file, you should see this:

Look out for the lines:

{
id: ‘book’,
title: ‘Mail’
},

Underneath the bit where it says },

We are going to add our entry for the openglows file, as you can notice most of these entries already in here are files from the client folder, specificially the id is the file name, e.g. interface entry is for interface.swf, mail entry is for mail.swf, gridview is for gridview.swf.

Since our openglows.swf file is in that client folder and we WANT it to be loaded, we want to create an entry with the id: ‘openglows’ since that’s our file name, you may of named your file name differently so adjust it accordingly to whatever you renamed your swf file.

So under }, we are going to add our entry:

{
id: ‘openglows’,
title: ‘openglows’
},

Remember if you are copying this, rename openglows to whatever you decided to name your file, or if you used openglows then keep it like that.

Then we want to save the file, just by hitting CTRL+S or CMD+S.

Then it’s safe to say, openglows has been implemented client side, now we got the remaining server side work to do.

NOTE: Those with their CPPS under CloudFlare must clear their cache ON CloudFlare, by navigating to CloudFlare’s panel, going to the cache tab and selecting purge all cache. Then you must clear your own browser cache, whether it’s hosted under CloudFlare or not.

3. Adding openglow fields to our database

Considering you setup Houdini before, you should be able to access your database via SSH or through a database tool like DataGrip or Sequel Pro, make sure this is possible first.

We need to be able to execute an SQL query to alter the penguin table to add new fields for where our glow strings will be stored, i.e nameglow, namecolor etc.

You can do this over SSH or through a database tool, like I said above. For this example I will use Sequel Pro, you want to navigate to the query tab like shown:

You then want to execute this SQL query I uploaded to pastebin to alter the penguin table to add new fields for our glows:

https://pastebin.com/0svMeZ6L

It should look like this:

Once successfully executed without any errors, you can check whether the fields were created. You can also modify what glows you want using hexcodes by adding them into the glow fields, i.e. 0x000000 represents black, if I wanted it as my nameglow i’d enter it like so:

Later on I will give you commands to be able to edit your glows in-game, whilst updating the values in the database.

glow

You can also find hexcodes from here.

Now that we have the fields created, we can move onto Houdini. Depending on whether you have a localhost setup or if you’re hosting it on a VPS, navigate to your Houdini source.

4. Modifying Houdini

Lets clear this up first, there are TWO Penguin.py files and we will be editing both of them. There is one in /Houdini/Penguin.py and one in /Houdini/Data/Penguin.py. The first one (/Houdini/Penguin.py) is the penguin class, which we can use to carry out updates on the glows and to modify the playerstring so it loads our glows.

The other file (/Houdini/Data/Penguin.py) is used to define the database fields, that we have in our database and we’re editing this file to add the new fields we just added to the database.

First we will edit: /Houdini/Penguin.py

We first want to add these methods to the penguin class so that we can update our glows through the commands plugin.

Add the following methods from the pastebin I made:

https://pastebin.com/QJCx0nJj

Add it below any other method within that class, for example underneath the joinRoom method:

jr

So it would look like this:

Now we need to modify the playerstring attribute to the penguin class whilst we are in this file. So go down to the getPlayerString method aka this:

playerstring

The green text with numbers represent comments I left, this basically shows the position of each feature in the playerstring.

The CP protocol uses a playerstring to read data, in the format |ID|Nickname|Approval|Color|Head etc.

An example may be:

|101|ro|1|6|1100 etc for my penguin having the nickname ro, each penguin has their own playerstring which defines what features they have i.e. their colour, head item, face item. We need to add our glows as each individual penguin has their own glow, as seen from the database. Each penguin has their own nameglow field.

So what we want to do is see where the glow positions are from when we edited and uploaded the OpenGlows.swf file. If we re-read the actionscript code it shows it starting at 17, with nameglow…

17

Then that line continues to go up to 27.

It starts at 17, which is perfect as from our playerstring attribute in Houdini, it finishes right at 16!

As you can see here:

16

1, being 15 and self.age being 16

Since nameglow starts at 17, we need to add nameglow below the line so it continues from 16 onwards, all the way upto 27 as Size is the last feature and it’s position is 27.

So you would want to change the getPlayerString method to be like this pastebin I uploaded:

https://pastebin.com/tXFAKk5V

So that it includes the nameglow values at 17 onwards like shown here:

NOTE: Add a , after self.age
Then don’t include , at the very bottom one aka self.user.size

Once that is done, we’re finished with this file.

You then want to head over to the other penguin.py file, aka in /Houdini/Data/Penguin.py

We need to define the fields that we created in the database, like how the other fields are defined already e.g. username, password, nickname etc.

Find this line:

WaterMatchesWon = Column(Integer, nullable=False, server_default=text(“0”))

After this line, you want to add the following from this pastebin:

https://pastebin.com/iX0ZHPuZ

So that it looks like this…

ADDING COMMANDS:

To make things easier, so that you don’t have to keep viewing your database again and again to modify yours and other penguins glows, i’ve created some commands that allow you to execute changes within the game. All you do is type for example nameglow you would type !ng 000FFF and it would change your nameglow to blue.

First of all, head over to /Houdini/Plugins/Commands/__init__.py and open it with a source code editor.

Then below any command i.e. the !JR command shown here:

jr

Add the following commands for your glows from this pastebin:

https://pastebin.com/yK3nJwxA

So it should look like this…

Now you can restart Houdini to apply the changes, login to the game and try typing for example !ng 0xFF000 or !small or !mood hello!, hopefully it should work if you followed this tutorial carefully.

You may notice the bot is invisible if you have the bot plugin enabled, that’s simply because it hasn’t been modified to have glows, like the adjusted playerstring has.
Just use this bot plugin and edit the values of nameglow, namecolor etc if you wish: https://pastebin.com/NCPJfF24

Here is a little snippet of what the OpenGlow.swf file supports/does:

https://vimeo.com/347787881

openglows.swf (3.5 KB)
OpenGlows.fla (6.9 KB)
RCPPS.swf (6.2 KB)
RCPPS.zip (8.4 KB)
/Houdini/Penguin.py (8.4 KB)
/Houdini/Data/Penguin.py (6.2 KB)
/Houdini/Plugins/Commands/__init__.py (13.1 KB)

Be sure to refer to Solero’s discord or leave a reply if you are stuck on anything.

~ ro