setTimeout with reference to object

The problem

Calling setTimeout or setInterval from an object can be sometimes problematic. The timers are executed outside of your object’s context. You loose reference to your object and can only work with global variables. this suddenly points to window instead.

Solution

I’ve found out that there are plenty of ways to achieve it only after I published this post online. You can use whichever you suits your needs.

  1. using closure
  2. bind(this);
  3. Immediately executing function expression

But first lets see what we’re working with. For all three methods we’ll use the same object, only one function will look different. We’re creating new object of type Person with name Steven and make him say his name after the delay using setTimeout.

// Create new 'class'
function Person(name_)
{
  this.name = name_;
}

// Say whats my name after 2 seconds
// we plug in the reference to `this` person
// with variable named `self`
Person.prototype.whatsMyName = function()
{
  // This one will fail silently with an empty log
  setTimeout(function(){
    console.log(this.name)
  }, 2000);
}

// Define Steven and call him!
var stev = new Person('Steven');
stev.whatsMyName();

Continue reading »

Floating Islands (update 2)

Islands are finally done – for now. I’ve managed to finish this project and pass an exam with the highest grade (It was my project for university). You can check the walkthrough video below.

My job was to use all UDK’s sample content to create something extraordinary with one rule: “Make two paths from point A to point B, one with obstacles”. You can tell that jumping on the rocks supposed to be the harder route, because it requires you to jump. There’s another, much longer route by the stairs.

I’m not done with this project yet! UDK is great tool to quickly set-up your world with sample assets. But you know whats better? Unreal Engine 4. Floating Islands are going to be my bachelors degree project so if I’m gonna make improvements to this world, I’ll need to change my tools. I’ve already played around with UE4 before getting started with UDK and I can already tell, that thanks to my little experience with both tools, I am able to re-create the whole project with much more efficiency then if I were to keep on improving it in UDK alone.

EDIT: I didn’t had time to update it to the UE4, but I managed to finish this project in time and pass my bacherols degree 🙂 Below is my updated video.

Watch

Screenshots

Pixel Sprite Generator

Recently I’ve found this interesting Pixel Sprite Generator. You can create procedurally generated sprites on the fly. It uses ala 2D array of values to draw solid outline, “soft” body or an empty pixel. Provide just one mask and get milions of variations.

I can see it being used in rougelike games, besides procedurally generated levels: enemy sprites, weapons, items, EVERYTHING.

It is written in JS so I couldn’t help but port it over to Haxe!

JS version draws on canvas and Haxe on openfl.BitmapData. Enough talking, go check live example if you’re not yet excited:

Live Example (keep refreshing that thing for new sprites!)

GrayScale – reflections after game jam

GameBoy Jam has ended some time ago and my game ranked #7 in the competition. Among ~250 submitted projects I find it as small personal success and I wanted to thank everyone who voted 🙂

I’ve had really great time during the jam. Seeing other people’s projects being built step by step was really interesting and empowering experience. I could follow many games progress from the scratch, many of them with different mechanics and ideas. Game jams are one of the best ways to get into creating and finishing your small games and I surely will attend to some of them in the future.

Updates

I read every comment added by players on Gamejolt and I came to conclusion that, while many players enjoyed the experience, GrayScale is not actually finished. It has a bit list of things that could be added, fixed and get more polished. In fact i have lots of abandoned ideas in notebook and Trello board.

I decided to keep working on GrayScale but can’t promise that updates will be frequent because I have my full-time job to take care of. But when an update comes – It won’t be small 😉 My goal is not to bloat this game with lots of features but add whats needed and limit what is not, trying to keep the balance right (woah, big talk!).

Android

I’ve successfully compiled the game for Android! You can get the test build below, but I WARN YOU: this is just a quick solution, controls are sloppy, D-Pad is invisible (lower left of your screen) and It might not run on every device. If you’re still interested, link is below, let me know how it runs.

zielak.pl/pub/GrayScale/GrayScale-debug.apk

Future

Right now GrayScale is available to play in Web (Flash player), Windows and Linux. It’s going to land on Android Market and possibly other platforms eventually. I don’t really have any Apple device right now but I might get them someday. Building cross-platform games with HaxeFlixel is really easy.

I’ve already published source code for this game so you can follow my progress or even remix GrayScale in your own fashion. Get it on Github.

Game will remain completely FREE on every platform and I’m not going to smash advertisement on it. I don’t want to put any price on my “first game ever”, this way (hopefully) more people could discover GrayScale. Besides I don’t know if I can legally sell anything like that in my country without having company – but that doesn’t matter now anyway.

UDK – Floating Islands.

Step 1: palm trees grow on islands

Floating Islands is a project for studies. We’re limited to use UDK so it’s a little step backward for me. Gaah, that interface 🙁 The plan is to make 1 level where player needs to go from point A to B directly or by alternative route. See that island on the left? Thats my point B. I’m going to put a lot of floating rocks and lower the gravity a bit for some jump-action.

Performance wise, I’ve discovered that default UDK’s grass isn’t well optimised. Static mesh doesn’t have any LOD meshes and the best way to gain some performance is to force it disappear from the screen somehow (‘m not an expert, but I know some stuff). But I wanted to see more grass in the distance! So I imported this grass into Blender somehow, put 2 planes in the center, fix UV maps and export it back inside UDK. Now just set LOD 1 mesh, tweak some properties and Voila! From 50 to 100 FPS just as it should be. Now the rendering runs much faster and I can still see some grass in the distance 🙂 Screenshot below:

Screenshot_2zoom

Included: Introduction

I’ve heard many opinions to start publishing your new game projects right from the start, from the very first line of code or concept art. This place is going to be just that.

What is “Included”?

“Included” is early codename for a puzzle 2.5D platformer strongly focused on Sci-fi and some astrophysical concepts. Player is put into young member of exploration crew on the first interstellar colony at Gliese 581g. Years pass and human race discover existence of mysterious entities scattered around the Gliesian star system. Invisible to naked eye, their readings indicate almost true similarity to theoretical wormholes. Those “inclusions” unlike wormholes, are wrapped spacetime (loops or bubbles as you wish) of the real world. You never know what kind of spacetime was wrapped inside those inclusions but It’s your job to explore and discover as much as you possibly can.

Gameplay focuses on using newly acquired powers to bend some laws of physics at your will, solving puzzles and more.

Technical stuff, consoles?

I’m developing this idea in Unreal Engine 4 for PC, Linux (Steam OS too) and Mac. I’m not aiming at consoles at all, because I’ve heard Indies have problems with publishing there. But also because I don’t have any bloody console, so why would I want to create a game for environment that I barely understand? When time comes, I plan to go for Steam Greenlight if this system is going to stay that long.

What now?

I could write endlessly about my idea of this game but I don’t like talking without providing, so… BACK TO WORK, BABE and see you next time!

I’ll try to update with any concept art, design prototypes, character design, so on and so forth.

Responsive Tabs

If you have a component with tabs in your non-mobile website you don’t think about “how will those look on smaller screens?” You already know it’s going to look ok but switching between tabs will not feel comfy in most cases. Instead you should wonder “how do I make it work well on mobile?” or “how to make tabs usable on smaller screens?”. Creating responsive tabs is important to make the website usable in every environment.

“Tabs”, how-to

Depending on a number of tabs in your component, making it look and work just like in desktop may not always be the best idea. You can make tabs a little bigger to make them easier to hit with your fingers. Sure, that’ll work on a component with 2 or 3 tabs (with small, non-descriptive captions on them). What if your component have more then 3 tabs or even better – dynamic number of tabs? Predicting the numbers and making silly styling adjustments for each of them is like ignoring a huge hole in your room and stepping over it, everytime you want to get out. 😀

The perfect solution doesn’t need to be a hard one if you start thinking in Responsive Web Design and It doesn’t require any bloated jQuery plugin. While we’re still going to use a little bit of jQuery, It will only be used to switch between CSS classes.

Continue reading »