SamSuka
sqwarkdemon
sqwarkdemon

patreon


Program with Sqwark - Tidy code

Creating tidy code can sometimes be an annoying and tedious task, but keeping organised and tidy code is the basis of a healthy program/game/app, or whatever you're programming.

You can organise your code in several different ways, and it often changes from person to person, language to language.

Today I'm going to go over how I keep my AS3/JavaScript code organised and how I try to maintain an easy to understand layout.


Firstly lets discuss layout.

Pretty simple stuff.

I start with the comment for the expansion, which is my usual note of:
/***************************************************/
/* */
/* This is an interactive animation */
/* made by SqwarkDemon for DeviantArt. */
/* If you find this someplace else then */
/* I dunno man, do whatever. */
/* I ain't a cop. */
/* */
/ ***************************************************/



Sure okay, that's kind of lame but I've had it in my animations since the start, believe it or not.

Then after posting this I paste my AS3 imports:

import flash.display.MovieClip; //This controls the MovieClip files
import flash.events.Event; //This adds events for stuff like 'Event.ENTER_FRAME'
import flash.events.MouseEvent; //This adds mouse functionality
import flash.events.TimerEvent; //This adds timer events
import flash.net.navigateToURL; //This adds the ability to go to URLs
import flash.net.URLRequest; //This adds the ability to request URLs
import fl.transitions.Tween; //This enables tweens
import fl.transitions.easing.*; //This enables the easing tween
import flash.ui.Mouse; //This allows us to disable the mouse
import flash.utils.Timer; //This is another timer import

These all control specific elements in the flash, be it button configs or timers.
All of them have a purpose to fill, usually.

Then, after all of these, I start programming the main body.

I like to program the clothing changer first, then move on to the body functions like belly animations or breast animations.
After that I put the sound and the timer events, then I program the mini-game.

When that's all programmed I start on the text and the speech array - which I now keep in a separate AS3 class to prevent the base code becoming too long.

After all of this I finally put in Doom's expansion code, as that's usually the last thing to go in.

So that's how I layout my code. I like to separate all the lines with this:

"/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */"

This helps keep everything segmented clearly so I don't end up writing code in the wrong location.


Now lets move on to general tidiness.

The best way to help keep all of your code organised is to keep constant notes and have a clear understanding about what goes where.
I stated earlier that I have all my vars in one place, which is generally a good idea but you also want to keep other variables in their respective zones. For example, keep all the sound defining variables in the sound section, and all the expansion variables in the expansion section, ect.

This keeps everything in the right place so you don't need to look far at all to find what you want.

To keep a note of what things do you can just type "//" to create a comment and that will affect the rest of that line.
So typing "import flash.display.MovieClip; //This controls the MovieClip files" will still import the MovieClip class, but typing "//This controls the MovieClip files - import flash.display.MovieClip;" doe not.

You can also start a multi-line comment, like I did above, by doing "/*" and closing with "*/" elsewhere in the code. This is particularly handy if you want to single out a code block to debug because anything inside is seen as a comment and is ignored when the program goes to export or render.

You can use these notes to keep track of what you've added. It's always a good practice to mark what your functions do or what they control, especially if they're self-made functions that you're creating for a specific purpose or if they're a generic timer.


Now we're done with that lets discuss the last topic streamlining your code and putting it in the right order.

Of course this sounds like a no-brainer, but always organise your code with what you need to activate first.
If you have sounds happening first and text second then put the sounds first. Sometimes AS3 and JavaScript will either run slower or flat out refuse to work at all if you don't put one before the other.

If you're defining a function then make sure you're defining the function before you actually call it.
Of course you don't have to, but if you do this a lot you'll notice your game slow down and become bogged down as it searches. (There's probably a better explanation for this, but for now that's all I know)

Always have important functions or sections front and centre to avoid this.

Also note that the ENTER_FRAME or "tick" functions take up a lot of resources and can lag out a game if left to their own devices. Only ever have 3 at most, and never more. It's usually best to create one and just share that between functions with clear labelling so you don't get lost.

It's also good to note that having too many timers running at once can also pose an issue, so if you're going to set up multiple timers consider creating just one with a dynamic number and attaching a boolean or an int to it so if your code calls on timer it can dynamically change the time and function as you need it.


So that's it!
This really only covers the basics and there's faaaar more to learn, but that's some quick and dirty knowledge on how to keep your code clean. I can post some examples in the future if you guys are interested!


More Creators