Quizland Conquest now on Codecanyon

Hello,

This is my latest game named Quizland Conquest.

A STRATEGY / TRIVIA GAME, WHERE THE PLAYER NEEDS TO ANSWER TRIVIA QUESTIONS TO PROGRESS AND CAPTURE NEUTRAL OR ENEMY POINTS ON THE MAP.

USE YOUR WITS AND DEFEAT UP TO 3 COMPETITIVE A.I OPPONENTS, OR YOUR OWN FRIENDS!

 

 
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

Replay system for KineticJS and HTML5 Canvas

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

Image Slideshow with PreloadJS, JQuery and TweenMax

This is a tutorial about how to create a simple slideshow element with dynamicaly loaded images and some cool animations.
PreloadJS is a rather new JS library that aims to help with the loading of various assets, in our case it will provide us with the info of when the images are fully loaded and a value of percentage completion of this task.

DEMO

Continue reading

Greensock-TweenMax Javascript animation (JQuery based)

Hello
This is the first post in this blog for javascript based stuff. I am using greensock products for years for flash/flex/air projects and I would not change their animation power with anything. So when greensock announced port to javascript I was thrilled, and excited to try out the “new” implementation… but wait… there is nothing “new” to the way we declare things… its the same compact and straightforward structure I used in flash! Amazing!

Plus it works with JQuery out of the box AND supports CSS animations, HTML properties animations, timeline animations and a bunch of other cool stuff.

So for my next trick I created a page with the pacman eating some dots, this was done in 10′ and the javascript required as you will see its minimum.

!Note: best viewed with a modern browser as I used css3 for the shapes.

Check it out: http://www.netgfx.com/trunk/animateJS/

Learn more about Greensock and its animation platform here: http://www.greensock.com/v12/

Capitalize first letter of a word JS & AS3 (quick tip)

After 10′ of searching for a fast solution I came up with this, I suspect there is a much cooler way of capitalizing with AS3, but if I can’t find it on 2 pages of search results it pretty much doesn’t exist…
So here we go, this might work only for single words but that was the intention.

function capWord(source) {
var cap = String(source).substr(0,1);
cap = String(cap).toUpperCase()+String(source).slice(1);
trace('A capitalized '+cap); // A capitalized Word
window.console.log('A capitalized '+cap);
}

enjoy!

Flex audio player with Flowplayer core

I’ll present a simple task that allows to implement the power of the flex framework and flash graphics to a equally powerful core player such as the Flowplayer, bridged with JQuery.

First of all let’s create the graphics for the player, lets assume you have some basic images for the buttons and the background:

<s:Group width=”338″ height=”39″>
<s:Image source=”assets/playerBack.png” smooth=”true” width=”338″ height=”39″/>
<s:Image source=”assets/play.png” smooth=”true” left=”20″ top=”10″ click=”goPlay()” useHandCursor=”true” buttonMode=”true”/>
<s:Image source=”assets/pause.png” smooth=”true” left=”50″ top=”10″ click=”goStop();” useHandCursor=”true” buttonMode=”true”/>

<s:HSlider horizontalCenter=”20″ top=”10″ width=”178″ maximum=”1″ minimum=”0″ showDataTip=”false” stepSize=”0.1″ skinClass=”Skinz.VolumeSkinClass”/>
</s:Group>

!Note: make the <s:Application/> slightly bigger and opaque (height=”45″ width=”360″ backgroundAlpha=”0.0″)

!Note:make sure to include Jquery to your HTML file, I created this with JQuery.1.5.min.js

now a little bit of AS3 script to trigger the Javascript

private function goPlay()
{
ExternalInterface.call(“goPlay”);
}

private function goStop()
{
ExternalInterface.call(“goStop”);
}

Now export a release build and copy the .swf file in your HTML Project folder.

Our Flowplayer lives on a <div/>

<div id=”audiosecure” style=”display:block;” href=”http://releases.flowplayer.org/data/fake_empire.mp3″></div>

!Note: placing it on a div without size makes it invisible but still functional. cool huh!?

Create the flowplayer:

// install flowplayer into container
$f(“audiosecure”, “flowplayer/flowplayer.commercial-3.2.5.swf”, {

// fullscreen button not needed here
plugins: {
controls: {
fullscreen: false,
height: 30,
autoHide: false
}
},
clip: {
autoPlay: false,

// optional: when playback starts close the first audio playback
onBeforeBegin: function() {
$f(“audiosecure”).close();
}
}
});

Our SexyPlayer :

<div id=”sexyPlayer”>
<object width=”360″ height=”45″ wmode=”transparent”>
<param name=”movie” value=”css/assets/player/Action24Player.swf”>
<embed src=”css/assets/player/Action24Player.swf” wmode=”transparent” width=”360″ height=”45″>
</embed>
</object>
</div>

Some CSS:

#audiosecure
{
position:absolute;
left:150px;
top:100px;
}

#sexyPlayer
{
position:absolute;
left:150px;
top:10px;
z-index:9999;
}

!Note: make sure to place the Flowplayer lower than sexyPlayer

Throw in a couple of JS functions and you’re good to go:

function goPlay(){
$f(1).stop();
$f(0).play();
}

function goStop(){
$f(1).stop();
$f(0).stop();
}

Enjoy!

feel free to comment if you found this helpful.

Communicate with JavaScript, send-receive

Actually its quite simple to communicate with Javascript from Flash, simply by importing the externalInterface library. The following code displays a simple use, from which the Javascript “reads” the available space within the browser window and sends it to the flex application, which draws a panel to match this space, so you can have a full screen application no matter the screen resolution and/or browser…

&lt?xml version=”1.0″ encoding=”utf-8″?&gt

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” viewSourceURL=”srcview/index.html”&gt

<mx:Script&gt
&lt![CDATA[
import mx.controls.Alert;
import mx.events.*;
import mx.controls.*;
import flash.external.*;

public var w:uint;
public var h:uint;
public function callWrapper(event:MouseEvent):void
{

var jsWidth:String = “getWidth”;
var jsHeight:String = “getHeight”;
w = ExternalInterface.call(jsWidth);
h = ExternalInterface.call(jsHeight);
//testPanel.width=w/2;
//testPanel.height=h/2;
Alert.show(w.toString()+”*”+h.toString());
resizeMe.widthTo=w;
resizeMe.heightTo=h;
resizeMe.play();
}

public function original():void
{
resizeMe.widthTo=200;
resizeMe.heightTo=300;
resizeMe.play();
}
]]>
&lt/mx:Script&gt

<mx:Resize id=”resizeMe” target=”{testPanel}”/&gt

<mx:Canvas height=”100%” width=”100%”&gt

<mx:Button label=”Expand!” click=”callWrapper(event);” horizontalCenter=”0″/&gt

<mx:Panel id=”testPanel” width=”200″ height=”300″ backgroundColor=”#BDE018″ y=”0″ x=”0″ borderStyle=”none”&gt
<mx:Button label=”Return” click=”original();”/&gt
&lt/mx:Panel&gt

&lt/mx:Canvas&gt

&lt/mx:Application&gt

add this 2 functions to your html that contains the produced .swf

<script language=”JavaScript” type=”text/javascript”&gt

function getWidth() { return document.body.clientWidth; }
function getHeight() { return document.body.clientHeight; }

View working example here