Nightly Coding; » Home Page

Top Down Tilemap Editor beta

  By Michael Dobekidis | March 22, 2014 - 19:43 | , , ,
Leave a comment

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

facebooktwittergoogle_pluspinterestlinkedin
linkedin

Click and Drag multi-selection rectangle with Javascript

  By Michael Dobekidis | February 10, 2014 - 10:00 | , , , , ,
Leave a comment

This is a nice solution for a problem occured when making strategy games or wireframe applications. Or generally when we want to select multiple items and have them in a visible group.
It is a rather simple solution once the math make sense.

Here’s a nice example I made on codepen. Simply click and drag to form a rectangle around one or both of the objects.

See the Pen Multiselect drag by Michael Dobekidis (@netgfx) on CodePen.

Continue reading →

facebooktwittergoogle_pluspinterestlinkedin
linkedin

Replay system for KineticJS and HTML5 Canvas

  By Michael Dobekidis | January 28, 2014 - 12:37 | , , , , , , , ,
Leave a comment

I have been struggling with the lack of replay procedures in HTML5 gaming, with flash things were quite easy because we could save all of our game sessions as movies or swf files that could be later on viewed. With HTML5 we don’t quite have that, or it is not as easy. So I was thinking of ways to produce movies from canvas.
And then it hit me… images can produced as urls and canvas can be exported as an image, and what are continuously changing images? A movie!

So I went on and made a codepen about this. And quite frankly it kinda looks awesome. Of course some more brilliant minds than mine could dig into this and help me make it truly useful for all.

So let’s see the pen first. The procedure is as follows:

We click record and move the box around
Then we stop and we watch the movie that was produced.

See the Pen Record & playback for canvas by Michael Dobekidis (@netgfx) on CodePen.

Continue reading →

facebooktwittergoogle_pluspinterestlinkedin
linkedin

Remote collision detection (for games)

  By Michael Dobekidis | January 22, 2014 - 12:16 | , , , , , ,
Leave a comment

Hello all, so I have been pretty active on the “create games” front but not so much for blogging, sorry about that… So I come to you now with a Pen that razed over 1500+ views on codepen and 14 hearts so far…

It’s my implementation of a remote collision detection system that uses degrees instead of bounding boxes. This works well for games where you want to calculate the position of the shoot but the “cannon/lazer/fazer/tower” is not near the target, so instead of creating long bounding-boxes. We just calculate the degrees between the source (cannon) and the target(enemy). And when the cannon is rotated on those degrees it can fire.

Here I will show how a tank can “detect” the enemy. Here’s a quick example and the code will follow:

See the Pen Remote collision detection by Michael Dobekidis (@netgfx) on CodePen.

Continue reading →

facebooktwittergoogle_pluspinterestlinkedin
linkedin

Secret Word, (a hangman game with a twist)

  By Michael Dobekidis | January 17, 2014 - 19:51 | , , ,
Leave a comment

I have launched yet another game. This time is a classic hangman game build with HTML5 Canvas and Javascript.

Features

Classic hangman game with a plot twist

Game Features:

Dictionary with over 1800 words
Supports themes, and theme creation
Includes two themes ( blackboard and notepad )
Adaptive design that manages size in different devices
Included video help file for changing Theme

Check how easy it is to change themes:

facebooktwittergoogle_pluspinterestlinkedin
linkedin

Guess Who? HTML5 Game

  By Michael Dobekidis | December 19, 2013 - 17:17 | , , ,
Leave a comment

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 →

facebooktwittergoogle_pluspinterestlinkedin
linkedin

Flex / Air post apocalyptic battleship game [Post-Grid]

  By Michael Dobekidis | December 4, 2013 - 17:11 | , , , , ,
Leave a comment

Hello, I have just released a new Flex/Air game on ActiveDen. Check it out!

large-banner

- It features smart A.I to play against.
- Source files include cross-platform Air application AND Flex Web-application.
- High customization available.
- Based on latest Official Adobe Flex SDK (4.6)

You can find it here: LINK

facebooktwittergoogle_pluspinterestlinkedin
linkedin

Using SoundJS for games

  By Michael Dobekidis | December 1, 2013 - 00:26 | ,
Leave a comment

So I was building a new game and wanted to include some sounds and an ambient sound as background music. So I bought a sound from Envato Audio Jungle, and also I asked my cousin to make me an ambient/sci-fi/space sound… He came up with a rather nice composition for a space game.
So I wanted to incorporate all these into my game, so I used one of the best libraries for javascript sound out there, SoundJS

What I did however is to create a custom javascript function/class to handle all of the game sounds and have them ready for playback when I need to fire a bullet or stop the background-sound.

EXAMPLE Here

This is how I did it:
Continue reading →

facebooktwittergoogle_pluspinterestlinkedin
linkedin

Canvas grid pattern constructor v1.1 released

  By Michael Dobekidis | November 24, 2013 - 20:26 | ,
Leave a comment

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!

facebooktwittergoogle_pluspinterestlinkedin
linkedin