Akademy 2013

In a couple of weeks I’ll be attending Akademy for the first time. This is a KDE annual event and this year will take place in Bilbao.

I’m really excited (and nervous) about it because I’ll give a talk about my last year GSoC, which I developed a tiled based engine for Okular. I didn’t finish my presentation yet but I’ll focus on how the tiles are managed inside Okular (the talk will be quite technical).

I'm going to Akademy

Of course, I’ll publish my presentation here in my blog. But only after (or during) my talk. I just hate spoilers :)

I hope to see you there.

Talk about building HTML5 games

Yesterday me and other two guys from INdT (luís gabriel and thiago figueredo) gave a talk about HTML5 games development at the Federal University of Pernambuco (Brazil). The audience was really awesome and even though it only lasted two hours and most of them never wrote a single line of JavaScript code, they could achieve to bootstrap a simple HTML5 game.

You can see the embedded presentation below or click in the direct link to the presentation.

Click on the presentation then press f to view in full screen.

Simple pong game using HTML5 and canvas

I’ve spend some time working on a simple game using canvas 2d. I had some problems while doing this (some hard to find) and I thought it would be great to share my experiences on this work.

This is a simple version of the well know game pong. Throughout this article I’ll give some tips on how I treated the user’s input (both keyboard and touch events), a word about collision detection and also troubleshooting some issues that came to me.

According to wikipedia:

Pong is a two-dimensional sports game that simulates table tennis. The player controls an in-game paddle by moving it vertically across the left side of the screen, and can compete against either a computer controlled opponent or another player controlling a second paddle on the opposing side. Players use the paddles to hit a ball back and forth. The aim is for a player to earn more points than the opponent; points are earned when one fails to return the ball to the other.

Introduction

I’ve used a basic object-oriented approach on top of JavaScript found on Mozilla developer network. In fact, that’s not the only way of using object-oriented programming in JavaScript.

In the game we have a MainLoop() function which calls the game update and draw functions (in that order). The main loop is repeatedly called through a setTimeout.

The Game class* is the actual game. It controls each player movement, listens to user input and also call the draw methods.

*Although JavaScript doesn’t actually have classes I’ll use the term for a better understanding.

Setting the basics

First we need to create a HTML file with a canvas element and source the JavaScript.

<!DOCTYPE HTML>
<html>
    <head>
        <title>Pong</title>
        <script defer src="pong.js"></script>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <canvas id="game" width="512" height="256"></canvas>
    </body>
</html>

There’s a HTML5 page (you can tell by the first line) with a 512×256 canvas element. The defer keyword in the script tag tells the browser to only execute the script after all elements are loaded. This way we avoid referring to a canvas element that weren’t created yet.

The background is painted using CSS instead of calling a canvas draw function to do the job. The reason is that painting on canvas is quite expensive and the browser can do some performance tuning on CSS. So painting a background onto a canvas should be avoided.

#game {
    background-color: #353535;
}

Continue reading

Okular summer of code

Hello everyone, my name is Mailson and I recently got my proposal to Google Summer of Code accepted.

I’m obviously very happy that I’ll spend this summer winter working on a new feature to Okular. I already did a small contribution to the project about a month ago (in fact it was my first contribution to KDE and I felt so awesome after seeing my name on the commit list).

So, what’s the deal?

Okular currently renders the entire page of a document at once and stores the full rasterized image into memory. This can lead to a lot of memory consumption at higher zoom levels therefore you can only zoom up to 400%.

What I’ll do is a tile-based approach to page rendering so only the region of interest will be rendered and saved into memory. Also I have to make sure old tiles will be evicted from memory and new tiles will be rendered when the viewport moves (or the zoom factor changes).

If you’re curious about detailed information of my project, feel free to read my proposal or ask any questions in the comments section below. Certainly this will change during the coding period so new ideas are always welcome.