Category Archives: Uncategorized

A simple Ip-TV viewer for iOS

Adding video streaming functionality within an App is becoming more and more important, health care organizations (telemedicine), hospitality (marketing), education (training)  are just a few industries that have adopted real time media to conduct their business.

There are several real time protocols to handle video streaming connections like RTMP, HLS, etc. Many popular “free” internet tv channels are delivered using protocols based on HLS through m3u8 playlists.

In this project I decided to create a sample App that shows how to play m3u8 playlists, the app is based on the ijkmedia framework which in turn is based on the ffmpeg project, which is a set of open source libraries that can handle all sort of media formats and protocols.

Video of the app.

 

The project consists of 3 main views:

  1. The Player view controler.
    • Contains the ijkmedia player
    • Provides also additional controls for tagging a favorite, set the thumbnail and description.
  2. A search panel.
    • Links are obtained by doing web scraping to a set of pages.
  3. A favorites container.
    • Presents the tagged favorite m3u8 links.
    • Favorites can be re-arranged by dragging them.

iacoplayer2

The UI part also makes use of core animation and  swipe gestures to activate the search, favorites and drawer views.

 

Main Components:

iacoplayer1

  • Video Manager.
    • Handles the user favorites and search requests.
    • The search results and favorites  data are stored using core data.
    • Thumbnails are stored as PNGs in the app sandbox.
  • Web scraper.
    • Searches for m3u8 playlists in the provided web page link using regexp.
  • ijkmedia/ffmpes.
    • Open source framework  for handling the streaming and playback session.

 

The app source code and build instructions are in the following github repository:

https://github.com/iaco79/IaCOPlayer.

 

 

 

 

 

 

 

 

 

 

 

 

 

Tagged , , ,

Dots kollide source code is now free.

Full source code of a game I developed a few years back.

Completely free at : https://github.com/iaco79/dotskollide .

  • The code compiles on both Android / win32.
  • The Game framework is based on some of the ideas presented in the book :”Game Code complete”.
  • Shows how to integrate popular open source libraries:
    • SDL / SDL Mixer / Vorbis  / Tremor
    • irrlicht
    • librocket
    • lua / oolua

Running game:

 

Lights and Shadows for 2d worlds

Real time lights and shadows can make a big impact on the presentation of your game if you know how to use them wisely; this is also expected in any modern game.

sc0

For 3D, two common methods for generating real-time shadows are Shadow Mapping and Shadow Volumes (check the documentation of your favorite engine), each with their respective advantages / disadvantages and higher processing if all what you want is a simple 2d game.

Real-time shadows do not have to be something exclusive to worlds with 3d geometry, there are several 2D games out there that make use of real time 2d shadows.

After reviewing several online articles that describe some techniques and some existing implementations (plugins for engines such as Game Maker) I decided to develop this tutorial I hope will be useful, in which I describe simple method for 2d shadows generation.


(Demo at the end of this post)

How to create 2d lights and shadows in real time?

For 2d we can use something similar to shadow volumes, either generate geometry for the light covered area or generate the geometry that is not covered by light, our lighting model is not going to be a real physics, but a fairly good approximation.

What is a shadow?

 sc1

(Spanish lesson: light = luz, shadow = sombra)

 The shadow is the area that is outside the scope of light, areas that are blocked by shadow casters. So to generate shadows we need a light source and the shadow casters.

We can start with a simple light source: an omnidirectional light that covers a finite NxN square area ,the foreground geometry that makes up the game level can be the shadow caster.

sc2

We have defined our source of light, now what remains is to generate the shadows.

 How to generate the shadows?

For this we have 2 options:

  1. Calculate the region (2d geometry) that is not illuminated by light.
  1. Calculate the region (2d geometry) illuminated by light.

 sc3

(Spanish lesson: option = opcion)

Any option is valid,but I decided to take option 2: calculate the geometry that represents the area illuminated by light.

 How to calculate the geometry illuminated by light?

 Our problem now is to detect the borders where shadow casters collide with the light rays emitted by our light source as seen in the image below:

 sc4

How many rays to cast? Is that efficient?

Actually we don’t need to trace that too many rays to determine if they collide with the shadow casters.

What we can do is take the vertices of the shadow casters and select those that generate lines going straight to the center of the light without anything in between. We must also take into account the points of shadow casters that intersect the light region borders.

  sc5

 To make the process more efficient we can use AABB queries to detect intersections with the AABB of the light region and thus reduce the selection of vertices near the light.

sc6

Now that we have the points selected is only a matter of connecting dots , create the polygon and draw the area covered by light. The advantage is that this polygon can easily be rendered using a triangle strip and reduce the vertex information sent to the GPU.

sc7

We have light but it does not look too well, that is because we are rendering using a  constant white color, instead we can use a texture with circular color gradient to create the light fading effect.

\sc9 sc8

Lets add some color: for this simply paint a quad with a color gradient (the color of the light).

sc11 sc10

And the trick to make it look as seen in the screenshot is as follows: to paint this quad use a blending function that is equivalent to a multiplication RGB 1 x RGB2. What this does is multiply the value of light color by the value of the pixel beneath.

In opengl this is achieved using glBlendFunc (GL_ZERO, GL_SRC_COLOR).

You can experiment with various effects (I always use GIMP to design and model rendering by layers before doing any coding).

How to do multiple lights?

To do multiple lights, it’s just a matter of using FBOs (“Frame Buffer Object” or “Render to Texture” or “Post processing” or whatever you call it).

  1. We draw the colors of each light in a FBO1 and let the colors blend together (ADD blending).

sc12

  1. Draw the geometry of each light in a FBO2 and let intensities to accumulate (ADD blending)

sc13

  1. We proceed to draw the floor (or background).
  1. Draw over the FBO2 (containing the light intensities in gray scale/alpha).
  1. Draw the geometry of our 2d world (shadow casters).
  1. Finally paint the FBO1: Light colors. (Using blending MULTIPLY).

sc14sc15

With this we have got a simple, low resource and Openg GL ES 2.0 compatible 2d lighting system.

sc16

3 simultaneous lights. (Demo screenshot)

This technique is useful if you are developing a 2d game and want to avoid 3D geometry for shadows. If you are using box2d you can actually reuse the body fixtures as shadow casters, and execute AABB queries to only process the geometry within the area of ​​light.

What else is missing?

+ The shadows penumbra (soft shadows): we may need to generate more geometry for the shadow edges, it’s not that complicated, just some analytic geometry. The other option is to make a kind of blur shader when rendering the light geometry.

+ Per-pixel lighting: the floor is very flat would be nice to add bump mapping.

+ Modeling other types of light (directional lamp): for this we can reshape the region of light (instead of a rectangle use a triangle), make some adjustments to the calculations (origin and angle of light) and use the appropriate textures.

Demo:

Link to win32 demo: Demo 2d Shadows

In future posts I will see another useful technique for 2d games (or perhaps continue a 2nd part of this article revisiting soft-shadows and per-pixel lighting 2d).

References:

http://archive.gamedev.net/archive/reference/programming/features/2dsoftshadow/

http://www.redblobgames.com/articles/visibility/

Addions: The free-moving numbers puzzle!

Hi All

Addions is the new game I’ve been working on, and it is now available in the Appstore and Google Play and it is free!

The concept is like 1024 / Threes but this is a new mechanic (not like other shameful clones).

You can find more about here.

Dots Kollide is now available on google play

Dots Kollide is the name of the game I have been working on and it is finally on google play.

http://dotskollide.wordpress.com/



Get it on Google Play

I’ll shortly post a postmortem, it took me around 6 months of my spare time to complete this game, the iOS version is comming soon..

 

 

 

My first game in progress.

It has been a while since the last post…

Anyway I have managed to put aside some time and continue working in my game, here are some updated videos showing the current game play concept.

Win32 demo:



Ouya demo:

I’ll be posting the  source code for the small engine behind  in C++ pretty soon…

Creating a simple shopping list android App

Hello, this week I decided to take a break of the game programming stuff so in this post I’m going to describe how to build a basic shopping list app that could help you get more familiar with the android API and make use of the following features that android provides:

  • Touch gestures
  • SQLite database
  • Customized ViewGroup

The idea of this app is that when I run out of something I will mark an item as “not available” and then after I go to the grocery store I will check it again as available. Whenever an item is marked as available or not the status is saved in the local db immediately.

Here is an screenshot of the app:

screenshot

  • The SlideToggle

I wanted to have a “switch toggle” like user control to indicate if an item is available or not using a swipe gesture so I created one using a Custom ViewGroup.

animateddemo

The viewgroup is composed of two imageviews at each side and in the middle 2 textviews to display the description of the item. In the next figure you can see the layout and the order at which the TouchEvents are called to achieve the swipe gesture.

customviewgroup

 

Since loading images can be quite slow it is better to use an AsyncTask in order to improve the scrolling response of the listview by not blocking the UI thread.

new AsyncTask<Object, Void, Drawable>() {
ImageView imv1 = null;
ImageView imv2 = null;


@Override
protected Drawable doInBackground(Object... params) {
String imageName = (String)params[0];
Drawable d= getImageFromAssets(imageName);

imv1 =  (ImageView)params[1];
imv2 =  (ImageView)params[2];

return d;
}

@Override
protected void onPostExecute(Drawable d) {
super.onPostExecute(d);
if (d!= null) {
imv1.setImageDrawable(d);
imv2.setImageDrawable(d);
}
}

}.execute(o.getPictureName(),cr.mImageLeft, cr.mImageRight);

  • The sqlite database

I’m using a simple table that contains the list of items


CREATE TABLE TABLE_ITEM_CATALOG (    

COLUMN_ITEMID  INTEGER PRIMARY KEY AUTOINCREMENT,

COLUMN_NAME  TEXT NOT NULL,

COLUMN_DESCRIPTION TEXT NOT NULL,

COLUMN_IMAGENAME TEXT NOT NULL,

COLUMN_STATUS  INTEGER NOT NULL )

To work with sqlite in android you need to create a class that extends the SQLLiteOpenHelper class. The very first time you request access to the database and it doesn’t exist yet the method DBHelper.onCreate will be called so you can create the database tables and provide initial data.


public void onCreate(SQLiteDatabase database) {
...
...
database.execSQL(DATABASE_CREATE);

  • Data access model

In order to update the database I setup a basic Data Access Object Model with generics. This data access object model operates over DTOs (Data Transfer Objects) and in this case there is just one dto class named “item”.

DaoStructure

When the switch toggle for an item is updated the OnChange callback is triggered and at this point I call the dao’s update method to update the item in the database.

DtoStructure

this.m_adapter = new ItemListAdapter(

  this.getActivity(), R.layout.row, m_dao.getList());

this.m_adapter.setOnItemViewChangeListener(

       new ItemListAdapter.OnItemViewChangeListener()

       { // Update the item status in the DB table

        @Override

        public void onChange(Item item) { m_dao.update(item);

        }

      });

That’s it you can download the source code from github.

Tagged

Mobile Game – Part 3 : Adding a motion blur effect with a FBO

It’s been 2 weeks since the last post, I hope you didn’t face any trouble when compiling the source code.

In this post I’ll describe a simple way to add a nice motion blur like effect to our demo, we will use this effect to display a ghost trail on the moving balls.

Blur effect

Blur effect

To achieve the effect I setup a FBO (Frame Buffer Object also known as a Render Target in Irrlicht terminology).

A FBO is a basically an off-screen buffer where you can send drawing commands and then later use this FBO  as a texture and create several post-processing effects.

These are the steps that I used to create this basic blur effect:

  • Setup
  1. Setup a FBO (renderTarget1) with an alpha channel and also setup a camera for this particular render target.
  2. Setup a new material (ClearMaterial) that will apply the following blend function:

    es2driver->blendFunc( EBF_SRC_ALPHA, EBF_ONE_MINUS_SRC_ALPHA);
  3. Setup an SpriteNode (darkNode) object with a material texture that contains a semi-transparent dark color. This texture will be applied at each frame over the current contents on the FBO till it completely darkens the FBO, also this node will use the ClearMaterial defined in step 2.
  4. Setup an SpriteNode (blurNode) object using the renderTarget1 as its material texture.
  • Render Loop
  1. Select the FBO  (renderTarget1) as the main drawing buffer:

    driver->setRenderTarget(renderTarget1, renderFirstTime, false, video::SColor(0,0,0,0));
  2. Make visible the darkNode and render it.
  3. Make visible only the balls and render all of them:
    for(int i=0;i<test.mGameObjects.size();i++)
    {
    test.mGameObjects[i].mVisible =(test.mGameObjects[i].mUserData->m_shapeType == 0);
    }
    darkNode->setVisible(true);
    target1Camera->render();
    darkNode->render();
    batchedNode->render();
  4. Select the screen as the render target  but now set the darkNode as invisible (so it will not obscure the main screen).

    driver->setRenderTarget(0, true, true, 0);
    darkNode->setVisible(false);
  5. Render all the objects as usual (this includes the blurNode that contains the blurred balls):

    smgr->setActiveCamera(activeCamera);
    smgr->drawAll();
  6. Voilà…the balls leave a blur trail when moving!

How this works?  here is a visual example:

Darkening steps

Darkening steps

At each frame the darkNode will paint a transparent black color over the renderTarget1 using a “subtract” color operation, but also at each frame a new ball is painted using an “add” color operation, so it is like a battle between light and darkness but in this scenario dark always  wins and creates the motion blur effect.

Main Buffer + Offscreen FBO

Main Buffer + Offscreen FBO

Final result

Final result

Here is a small video on win32:

Source code updated in github…enjoy

Mobile Game – Part 2 : The source code

Hi everybody, this post is going to be really short…

Well as I promised now you can get the source code for our “Hello World” game 🙂

Here are some screenshots running on my nexus 7

breakout clone on nexus 7

breakout clone on nexus 7

breakout clone on nexus 7

breakout clone on nexus 7

 

Video of the demo running on my Nexus 7

And a video of the demo running on win32

  • Check the README file with the instructions to build both Android and win32 projects
  • You may also need to download the DirectX headers (for sdl to compile in win32)

I do still need to cleanup some code, but anyway keep reading the following posts as I will be describing how most of the stuff works

Windows Controls:

– Mouse  : Move paddle
– Key (1) : Launch ball
– Key (2-5) : Launch other objects
– Key (C) : clear all
– Key (W) Reset demo
happy coding…

Mobile Game Part 1 : Getting started

Following the last post lets get started  by setting up the development environment and the tools to make this  work.

But before that let me give a little background about how I started my game:

When I began my project a few months ago I want it to be released initially for the android market (since I am more  familiar with android development) and also to be able to make  it work for iOS and ouya (android based) in the  future, my development was be to done in c/c++ to be cross-platform (android, iOS and windows)  using open source libraries.

I’m of those who like games to run smooth as silk, every single game from the nes/snes(no sfx chip) era where designed to run at constant 60 fps, why? because those old crt TVs (and current mobile handsets) have a refresh  rate of at least 50/60fps, so it makes sense to draw each frame of animation at the speed of the refresh rate providing  users a fast responding game.  With the advent of 3d games and the processing power of the early 3d consoles it was very difficult to sustain 60fps, for me it was ok if not passable to have games like ocarina of time running at barely 20-25 fps, but right now with current multi core processors, parallel gpus I think  there is no excuse for not providing 60fps gaming (http://n4g.com/news/1227581/60-fps-should-be-standard-in-next-gen-consoles I like that post), I’ll stop here since this always causes such a debate :s.

The rendering part of the game has to be really fast, we need to take advantage of hardware acceleration,  the good news is that the majority of current handsets support hardware accelerated 3d graphics with opengl es 2.0, my  choice for handling the rendering is with the Irrlich engine.

The Irrlicht engine is cross-platform, supports either opengl or direct3d, it is simple and easy to use and can be easily adapted to your own needs.

Since I’m a little impatient I started to look around if someone else has already setup an android project with Irrlicht and for my luck there it was 🙂 http://gitorious.org/irrlichtandroid, these guys already did the task to adapt Irrlicht with an opengl ES 2.0 renderer  with a working android demo (yes I know this is cheating, shame on me).  This was the starting point of my project.

OK so what we are going to do is a “hello world” game demo : a breakout clone.

– All the graphics are going to be neon like (like those of geometry wars)
– Have a nice 3d model rotating in the background  or a fancy background deformation
– We are going to use a particle system for the explosions (when the ball destroys a brick)
– The explosion particles will be done using vertex shaders, so we can have thousands of them
– Box2d wil take care of all the collisions
– Sfx and  background music
– Basic score at the top of the screen (courtesy of librocket)
– Run at smooth 60fps
– Running in both Windows and Android

Here are some initial screenshots (video at the end of this post)

neon figures

neon figures

vertex shader explosions

vertex shader explosions

Below is a little diagram describing each component (library) for our game.

Components

Components

Ok this is the list of things that you need to get familiar with. there is plenty of information on the net on how to setup your android and windows development environment, etc:

To make this as fast as posible in the next post I’ll submit a working demo to a public svn repository (with all  the open source libraries included) and from there I’ll explain each part of the code so you can start your own projects.

In the meantime you can look at this video showing up some of the features that our “hello world” game will have (this is running at 50/60fps on my Nexus 7):

Be patient for the next post…