Phonegap/Cordova read images from gallery folder [Tip]

Hello, recently I was working on a project where I wanted to get all the images from the camera but because I wanted to load them in batches I had to find their filenames and store them in a local array for future use.
Since the new cordova file plugin did some changes, there is little information on how to get directories and files.

So here is how it is done on Android (because Apple doesn’t allow access to public folders).

Continue reading

[HTML5 Game] Nightcast, horror game

title
Nightcast is a horror game that places the player in the role of an adventurer that moves through a dark forest (too dark) and has only his trusty flashlight to guide him. As ghosts appear the player needs to dispatch them swiftly before the fear overwhelms him.
features

Game is ready to be compiled using Phonegap (config.xml included)

You can view/get the game here: Nightcast on Codecanyon

Phaser Powered Android Game: Okto*

Last week I launched my first Android Game that is powered by the amazing gaming framework Phaser. It is a reflexes and coordination game.

You can download it for free from Android PlayStore here

Okto Gameicon_96

You can also learn a bit for the Phaser Game framework from here: Phaser.io



The game source code is now available from Envato Codecanyon here: Okto* @ Codecanyon.

The compilation of the game was done with Adobe Phonegap Build.

Enjoy!

Kineticjs Drag & Drop

KineticJS inherently supports dragging of elements, but what if you need “Drop” as well, sure you may drop anything anywhere on the stage but most of the times we want to be able to drop stuff in a pre-defined position and then apply some transformation. This is an example how we can achieve something like this easily.

Here is a codepen DEMO:

See the Pen Kinetic JS drag n drop by Michael Dobekidis (@netgfx) on CodePen.

So let us break it down and see how it is constructed.

Continue reading

Top Down Tilemap Editor beta

Hello all, this time I’m releasing one big tool as open-source, I have been working on this for the past few weeks and I think it can be of use to some.
So what is a top-down-tilemap-editor, it is a tool that can help when creating top-down maps for various games or simply to print them.

I struggled with many other programs and tilemap editors but almost all were lining towards platform games, however I’m mostly working with topdown games. So I started to create a map-editor that would be easy to use and would export a json string that I could import to my game and be ready to go.

Show case

So what can this map editor do for you:

  • Import of JSON as exported by it.
  • Export of JSON bases on the names of the tile images e.x (corner.png will become corner in the json)
  • Load of a sample Map for quickstart
  • Load extra items along with tiles
  • Load custom tiles from Dropbox
  • Print tiles for export
  • Adjust Width and Height of Map

You can fork or simply download it here: TNTMapEditor on Github

Or try it out here: TNTMapEditor DEMO

Feel free to post any bugs or request features on the github page. (Issues page)
If you use it for a project drop me a line if you wish.

Sample export: http://nightlycoding.com/wordpress/wp-content/uploads/2014/03/www.netgfx.com_trunk_games_tntmap_preview.pdf

Guess Who? HTML5 Game

I have released another HTML5 game on CodeCanyon.
big_banner
A classic game for a modern browser

Features:
HTML5 and CSS3 technologies
Supports all modern browsers and tablets
Multi-language architecture
Highly customizable to change avatars/pictures/names/questions
Fully functional with AI
No-globals means wordpress compatible
Files include version of the game in Greek. Names and questions can be changed to every language.

Game is already responsive but can be further extended via media-queries.


Continue reading

Canvas grid pattern constructor v1.1 released

Hello, I just released a grid pattern constructor on Envato Codecanyon. This Grid-pattern is ideal for wireframe templates, blueprint designs or as a simple background.

The grid contains a build-in mechanism for responsive re-draw, and can be easily customized to include other grid-patterns, right now it can produce: blocks, diamonds, hexagons, circles and diagonal lines

The script is pure javascript and has no dependencies of other javascript libraries. However it can be easily extended to become a JQuery or other library plugin.

Multi-Grid

You can find it here: Canvas Multi-Grid

Examples Preview


Enjoy!

Create simple graph with css flexbox

When I first read about flexbox I was quite sceptical because I thought that this would be poorly executed and the developers would have to hack around several things.
But I was delighted to be wrong… flexbox seems quite promising and it actually makes creating a simple timeline graph a 5 minute procedure.

For those unfamiliar with the CSS Flexbox spec here are some cool resources:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

Now onward to our little project.

What we are trying to achieve here is to create a “timeline” based block-graph.

This is the end result:

See the Pen Flexbox graph by Michael Dobekidis (@netgfx) on CodePen

Continue reading

All Available CSS Color Names

For a fun project I wrote a little javascript class/function that returns all the availabe CSS color-names like (“red”,”royalBlue”,etc) in many different ways (assosiative-array, indexed-array, object,etc) as well as the selected color shades.

You can find it on gitHub here -> ColorNames Fn

And some examples here -> Examples

[[code]]czowOlwiXCI7e1smKiZdfQ==[[/code]]<a href="http://codepen.io/netgfx/pen/hvsfB">Check out this Pen!</a>

The use is quite easy and it has no library dependencies

Engage the function:

var colorNames = new ColorNames({
"numOfShades":10 // optional
});

And then ask for the type of return object that you wish:

var _colorNames = colorNames.returnItems('all_names'); // returns only the names of the colors
var _colorValues = colorNames.returnItems('all_indexed_obj'); // returns an array of objects that contain both names and colors

Enjoy!