Sep 302013
 

There is now a beta available of the new Pyxel Edit I have been working on this summer. It is very much updated from the last version, has a completely new GUI, animation support, animated GIF export etc.
The original was free, but to support development (I worked on it nearly full time this summer) the new version costs $8, a discounted beta price that will increase as it gets more full fledged.
If you make pixel art, tilesets or animations check it out at pyxeledit.com.

interface

 Posted by at 20:29
Jul 312013
 

Short story: In flash, bitmapData.lock() makes drawing faster by only updating the bitmap on screen when calling bitmapData.unlock() after done drawing, but once the bitmap is unlocked the whole bitmap is redrawn, instead of just the changed parts. If you only change small parts of a bitmap displayed on screen, and you do it often, this can result in a big performance hit.

I had been trying to optimize rendering of the canvas in Pyxel Edit without much luck, but then I tried Adobe Scout (awesome application btw!) that let me know that most of the time in the application was spent by the flash runtime rendering the display list. Apparently the whole canvas was re-drawn each time it changed just a bit. The odd thing was that the brush preview bitmap which is displayed on top was only rendered where it changed.

After some experimenting I found out that locking the bitmapdata of a bitmap object, which supposedly makes drawing faster, invalidates the whole bitmap and makes it get redrawn. Commenting out canvasBitmap.lock() immediately cut the displaylist rendering time by about 1/3 when drawing in the application.

To see what parts of the displaylist are redrawn one handy function is flash.profiler.showRedrawRegions(). It will draw rectangles around each redrawn region.

Jul 292013
 

This took me a while to figure out, in the end it was quite simple so I’m posting this to remind myself and possibly help someone else.

The “advanced telemetry” option in FlashDevelop doesn’t seem to do anything (as of FD 4.4.2). So you need to run a Python script on the compiled SWF. This can be done automatically after each build with a command in “Post-Build Command Line” in the FD project options.

1. Install Python (if you don’t already have it).
http://python.org

2. Download the script.
https://github.com/adamcath/telemetry-utils

3. Specify the post-build command.
Go to Project > Properties > Build and enter:

[path to python.exe] [path to script] [path to output swf]

In my case I have

"D:\Program Files (x86)\Python33\python.exe" $(ProjectDir)\add-opt-in.py $(OutputDir)\$(OutputName)

4. Done!
The script is now run on the file after each build.

More info: http://www.adobe.com/devnet/scout/articles/adobe-scout-getting-started.html

Jun 212013
 

In an old post I explained how to shoot an object to hit a moving target in 2D. The method in 3D is basically the same, but the code below is much cleaner and might be simpler to understand even for the 2D case.

Unity3D example and source code

Unity webplayer example

Unity project

The interesting bit of C#:

private Vector3 FindInterceptVector(Vector3 shotOrigin, float shotSpeed,
    Vector3 targetOrigin, Vector3 targetVel) {
   
    Vector3 dirToTarget = Vector3.Normalize(targetOrigin - shotOrigin);
   
    // Decompose the target's velocity into the part parallel to the
    // direction to the cannon and the part tangential to it.
    // The part towards the cannon is found by projecting the target's
    // velocity on dirToTarget using a dot product.
    Vector3 targetVelOrth =
    Vector3.Dot(targetVel, dirToTarget) * dirToTarget;
   
    // The tangential part is then found by subtracting the
    // result from the target velocity.
    Vector3 targetVelTang = targetVel - targetVelOrth;
   
    /*
    * targetVelOrth
    * |
    * |
    *
    * ^...7  <-targetVel
    * |  /.
    * | / .
    * |/ .
    * t--->  <-targetVelTang
    *
    *
    * s--->  <-shotVelTang
    *
    */

   
    // The tangential component of the velocities should be the same
    // (or there is no chance to hit)
    // THIS IS THE MAIN INSIGHT!
    Vector3 shotVelTang = targetVelTang;
   
    // Now all we have to find is the orthogonal velocity of the shot
   
    float shotVelSpeed = shotVelTang.magnitude;
    if (shotVelSpeed > shotSpeed) {
        // Shot is too slow to intercept target, it will never catch up.
        // Do our best by aiming in the direction of the targets velocity.
        return targetVel.normalized * shotSpeed;
    } else {
        // We know the shot speed, and the tangential velocity.
        // Using pythagoras we can find the orthogonal velocity.
        float shotSpeedOrth =
        Mathf.Sqrt(shotSpeed * shotSpeed - shotVelSpeed * shotVelSpeed);
        Vector3 shotVelOrth = dirToTarget * shotSpeedOrth;
       
        // Finally, add the tangential and orthogonal velocities.
        return shotVelOrth + shotVelTang;
    }
}

Update:

If you want to find the point where they meet, you can calculate the time it will take, and then multiply the shot velocity by that. In practice they will collide sooner since they have a certain radius, but we can take that into account when we calculate the time.

// Find the time of collision (distance / relative velocity)
float timeToCollision = ((shotOrigin - targetOrigin).magnitude - shotRadius - targetRadius)
        / (shotVelOrth.magnitude-targetVelOrth.magnitude);

// Calculate where the shot will be at the time of collision
Vector3 shotVel = shotVelOrth + shotVelTang;
Vector3 shotCollisionPoint = shotOrigin + shotVel * timeToCollision;
Jan 092013
 

The Caps Lock key is mostly just an annoyance. But there are ways to make it more useful. I recently found a very nice script by Gustavo Duarte called How Row Computing which maps Caps Lock as a modifier key that lets you navigate in text Vim-style using H, J, K and L. This is very handy as you don’t have to move your hand back and forth to the cursor keys while typing. It also maps Home, End, Page Up, Page Down and Del to easy accessible keys from the home row.

The script required remapping the Caps Lock key to another key in the Windows registry though, so I started improving it a bit. I added some new functionality and customized it to my preferences. I also added another very handy function that lets you drag anywhere on a window to move it while holding Caps Lock, the way you can do while holding the Alt key on Linux. I got that feature from an article at How-to-geek, changed the key from Alt to CapsLock and added it to the script. Very handy indeed!

Below you can see the default mappings for the script, although it’s easy to change it if you like:

CapsLock binding keyboard layout small_spaceYou have access to all the common keys on the right side of the keyboard (Cursors, Home, End, PgUp, PgDn, Ins, Del) from your home row, which is very handy when typing! Common commands like cut-copy-paste, undo-redo, backspace-delete are also very easy to access giving less hand movement. You can still toggle caps lock if you need to by pressing the Windows Key + Caps Lock.

To use the script:

  1. Download and install Autohotkey.
  2. Download the script.
  3. Put the script (or a shortcut to it) in the Startup folder so that it runs each time you start you computer.

I chose keys that are consistently placed for QWERTY layouts, some keys might have to be changed for QWERTZ or AZERTY. Let me know in the comments if you have any suggestions or comments.

Update: If you like the regular cursor layout I made another version of the script:

CapsLock binding keyboard layout_ALTsmall_space
The cursor key layout should be more familiar than the Vim-style layout to most people, and much easier to learn.

Gist for the version I currently use: https://gist.github.com/Danik/5808330

Original keyboard layout graphic by Simon Kaupinmäki

 

 Posted by at 00:35
Dec 182012
 

I recently started using the excellent Sublime Text 2, and it’s awesome. It annoyed me though that you couldn’t open files with it directly from the right click context menu in Windows like you can with Notepad++, so I made a registry file that accomplishes that.

IMPORTANT 1: The file makes changes in the registry, use it at your own risk!
IMPORTANT 2: You need to open the file in a text editor and change the path to sublime_text.exe if it’s not located at C:\Program Files\Sublime Text 2\sublime_text.exe.

Download, (edit if needed) and run this file. Now you should be able to open files and folders by right clicking!

 

Update: You can add a “open with” context menu for Sublime by clicking a checkbox in the installer (I must have missed it). It doesn’t add an option to open folders as projects though, so you can use this reg file if you need that.

 Posted by at 16:56
Jun 172012
 

Pyxel Edit is now in public beta and you can get it at http://pyxeledit.com/

Pyxel Edit is a drawing application aimed at making pixel art. It has features to make it faster and easier to make low resolution art like tile sets for games. It’s made using Adobe Air, runs on Windows and Mac, and is currently in beta.

What’s special about it?
You can draw freeform like in any other program, you can also draw and place tiles. If you have multiple instances of a tile and edit one, they all update. This still works if some of the instances are flipped or rotated. This is really nice when making tile sets, as you can instantly see how all the tiles work together as you draw them. This feature is inspired by the awesome Pixothello and Cosmigo Pro Motion, but taken one step further.

Tileset importing
Pyxel Edit can import images of tilesets or mockups and identify all the unique tiles automatically, which is great for editing and rearranging old tile sets or doing edits of mockups.

Tilemap exporting
The tilemap can be exported to XML or plain text, making Pyxel Edit also useable as a level editor. Just export the tileset image and the tilemap, and you are ready to load it into your game!

How much does it cost?
The beta is free. In the future there might be a free and a paid “pro” version.

Future features
In addition to adding lots of small features, new tools, better menus and polishing the UI, animation support is planned.

Follow @PyxelEdit for updates.

 

Video

 Posted by at 22:47
Apr 232012
 

Another Ludum Dare is over, number 23 to be precise, and my game is submitted. It’s called “Aether” and is a mix of an explorer platformer and missile command, where you have to run through a landscape to reach a mountain with a secret weapon, while at the same time fighting off alien spacecraft.

You can play it here: Play Aether. Have fun!

Edit: Results:

#31 Fun 3.79
#37 Overall 3.90
#47 Mood 3.66
#51 Innovation 3.90
#82 Audio 3.47
#108 Graphics 3.80
#312 Humor 2.47
#354 Theme 3.18
Total number of compo entries: 1072