M.E. Game Development: 2015

maandag 28 december 2015

Stencyl : Change the build process

Changing the Stencyl Make Process

Creating Ad-Hoc IPA file failed in Stencyl.

Solution was given by Captain Comic in this Threat:

http://community.stencyl.com/index.php/topic,42036.0/topicseen.html

Steps:
* Create Back-up first !
* mkdir /tmp/SW
* cp sw.jar /tmp/SW/sw.jar
* Unpack it : cd /tmp/SW; jar xvf sw.jar
* Edit the file: vi res/ios/PackageApplication
* Search for beta-reports and uncomment them
# runCmd('/usr/libexec/PlistBuddy', '-c', 'Add :beta-reports-active bool', $entitlements_plist);
# runCmd('/usr/libexec/PlistBuddy', '-c', 'Set :beta-reports-active YES', $entitlements_plist);
* Package the jar again:

* rm sw.jar

* Don't create a new Manifest

* jar -Mcvf sw.jar .

* cp sw.jar $HOME/Downloads/Stencyl-full/.

Launch Stencyl

Reference to my bug-report in this threat: http://community.stencyl.com/index.php/topic,44561.msg249997.html#msg249997

Edit:

The same applies to the generation of the StencylPreloader.hx
It is a file in the sw.jar and when you want to modify it you have to follow the suggestion
above.

zondag 27 december 2015

Stencyl : Swipe-speed recorder

As a follow up on the Wheel-of-Fortune a question was asked how to spin the wheel using a swipe motion.

The following code was attached to the wheel-actor and since it is generic it could be used for all type of speed recording movement on an actor.

The click code from the wheel-spin example could become a custom event and in this actor code we could do a 'execute trigger spin on all behaviors of scene spin' block. The random spin can be replaced by the spin-time. (maybe calculate the fast movement of the spin to rotate more often)

zaterdag 26 december 2015

Stencyl : Drawing an ellipse / circle inside a Rectangle

Graphics : Drawing an Ellipse inside a rectangle

Using Extension for Drawing Utilities in Stencyl: http://community.stencyl.com/index.php?topic=35352.0

Source: Download for 3.2+ Made by ETH

The ellipse / circle is being drawn using cosinus and sinus in a 360 loop.

The corners of the ellipse can be found by using this code:

var a=_Counter;
var i=180; // i=90 quarter, i=180 HalfWay etc..

var w=64;
var h=100;
var x=128;
var y=128;
var tempx = w * Math.cos(i * Utils.RAD);
var tempy = h * Math.sin(i * Utils.RAD);
var templ = Utils.distance(0, 0, tempx, tempy);
var tempa = a + Utils.angle(0, 0, tempx, tempy);
tempx = x + (templ * Math.cos(tempa * Utils.RAD));
tempy = y + (templ * Math.sin(tempa * Utils.RAD));
g.fillRect(tempx, tempy, 10, 10); // Mark the side with a rectangle

vrijdag 25 december 2015

Stencyl : Spinning Wheel

A Stencyl-Chat question was how to determine which part of a Wheel-of-Fortune was selected.

Wheel had 16 parts. Randomly the parts were between bad things and good things you would receive.

This is the solution I came up with (Click method on Scene)

Drawing on Scene:

Update one Scene:

Of course for this little example I wouldn't have to use a list. But when the parts are randomly filled with objects it will do nicely.

The difficult thing was to get the angle of the rotated actor:

zondag 20 december 2015

Stencyl : Simple Dialog Box

Dialog Screen

Create a scene that is larger than the display-screen.

Put a button on the first part of the scene 'top dialog'

Button pressed on actor:

[move [camera] to (x:0 y:1400)

Put another button the second part of the scene

Another button

Pressed on Actor:

[move [camera] to (x:0 y:0)

Now you can switch between the 'dialog' screens.

HaXe / Stencyl : Javascript

== Javascript from haxe ==

code-block:

flash.external.ExternalInterface.call(“o3p_write(\”this is the text to store\”)”);

flash.html

<<html>

<head>

function hallo(){

alert('hallo from swf');

}

function o3p_write(v){

alert('Hi What is variable v : '+v)

}

</script>

</head>

</center>

</html>

Another:

ExternalInterface.call return values

To run javascript code inside a flash game you can use externalinterface.call.

The returnvalue is’nt always working.

This worked in Stencyl:

var theResult:String="";

#if flash

theResult=ExternalInterface.call("doit_return");

trace("The result is: "+theResult);

#end

Javascript function:

function doit_return(){

return "abcdef";

}

Stencyl / HaXe : Replace TileSet image dynamically ( levels ? )

Note: Blog Post is a quick proof-of-concept outline that was used to replace a tilesheet. It is not a 'use-everywhere'-scenario.

Assumption : there is only one TileSet made in Stencyl {(resources.get(0)}

// old => cast(Data.get().resources.get(0),Tileset).bitmapData=bitmapData;

cast(Data.get().resources.get(0),Tileset).pixels=bitmapData;

// make the rest (than flash) use the tilesheet construction

#if cpp

cast(Data.get().resources.get(0),Tileset).setupTilesheet();

//.bitmapData=bitmapData;

#end

Also you can use the nme.net.URLRequest together with the

nme.display.Loader (loader.load(new URLRequest(theURL));)

in combination with the

loaderinfo.content.somehtning.addeventlistener(event.complete,do_the_above_with_tileset_function);

var bit:Bitmap = new Bitmap();

bit.bitmapData = bitmapData;

g.drawImage(bitmapData,0,0,0);

//this.engine.g.canvas.graphics.drawImage(bit, 0,0,0);

var url:String="https://dl.dropboxusercontent.com/u/107982821/test.png";

var loader:Loader = new Loader();

var urlRequest:URLRequest = new URLRequest(url);

if(urlRequest != null)loader.load(urlRequest);

var b:Bitmap = new Bitmap();

if (loader.content != null) {

b = cast(loader.content,Bitmap);

}

g.fillColor=330;

//this.engine.g.canvas.graphics.fillRect(0,0,50,530);

if( b != null){

g.drawImage(b.bitmapData,0,0,0);

}else{

g.fillRect(0,0,50,50);

}

//actorOfType.originMap.set("1"), new B2Vec2());

var i:Array<Int> = new Array<Int>();

i.push(100);

var ba:BitmapAnimation = new BitmapAnimation(b.bitmapData,1,i,false,null);

actorOfType.addAnimation("1",ba);

//var picLoader = new Loader();

//var spritePic = picLoader.load(new URLRequest("https://dl.dropboxusercontent.com/u/107982821/test.png"));

Stencyl : Dynamic change scene width

Dynamic alter scene width

code block

Engine.sceneWidth = pixels;

Egine.sceneHeight = pixels;

Start with a scene (properties of scene in editor set to 4 by 4)

In click event :

Engine.sceneWidth=1000;

Engine.sceneHeight=1000;

Engine.engine.scene.sceneWidth=1000;

Engine.engine.scene.sceneHeight=1000;

Stencyl / HaXe : Quit a Game

When used in published Android/iOS game you could face with publication problems since it is not allowed to quit the game. But for technical/testing purposes you can do this:

nme.system.System.exit(0); // replace nme with openfl if you use that branch

Flash:

flash.system.fscommand("quit");

Stencyl / HaXe : Loading files using URL

==Loading files from URLRequest==

All the targets accept URLRequest, but the iOS and Android devices like HTTPS and the

location seem to be different than the site they loaded from.

Flash has to reside on the same Base-URL in order to work.

The Alpha-stages of the game was posted on the Dropbox folder Public

The .SWF and the HTML with embeded code was posted here as well.

The APK (android) and API (iOS) were deployed using a website and iTunes.

First turn on the Tile API with Settings => Extentions => Tile API enable

We create a scene event/behavior

Add Event : Advanced : Custom Import

// Change bitmap

import nme.display.BitmapData;

import nme.display.Bitmap; // when converting data

import com.stencyl.Data;

import com.stencyl.models.scene.Tileset;

import com.stencyl.models.scene.Tile; // for empty Tileset creattion

// URL loading

import nme.display.Loader;

import nme.net.URLRequest;

Create a Code Block:

+ Add Event

Advanced : Custom Code Block

//public variables:

var bitmapData:BitmapData;

var theBitmap:Bitmap;

var loader:Loader;

public function onComplete(event:Event){

// We will receive some data from the event

// Convert the event.currentTarget.loader.content (bitmap)

var bimg:Bitmap=new Bitmap(event.currentTarget.loader.content.bitmapData);

//draw the bitmap onto the bitmapdata we casted from the tileset

bitmapData.draw(bimg.bitmapData);

// If you know the TilesetID you can avoid this find-resource thing.

// The ID number of the sheet can be found in the Tile-editor in Stencyl.

// The number will increase if you add/remove tilesets.

// find the resource where the bitmap is going to be replaced into

var i:Int = 0;

for( i in 0 ... 100){

if(Data.get().resources.get(i) != null ){

// Temporary Tileset to compare the found resource with

var ati:Array<Tile>=new Array();

var tt:Tileset=new Tileset(0,0,"ats1_351",0,0,0,0,ati);

if(""+Type.typeof(Data.get().resources.get(i) ) == ""+Type.typeof(tt) ){

// Replace the tileset datasource with the new bitmap

cast(Data.get().resources.get(i), Tileset).pixels=bitmapData;

// tell the devices it has a new tileset

cast(Data.get().resources.get(i), Tileset).setupTilesheet();

}

In the start event we will create the bitmap:

var height:Int = 1024;

var width:Int = 1024;

bitmapData=new BitmapData(width,height, false,0x000000);

When we load the data:

Stencyl block

[set [theURL] to [https://dl.dropboxusercontent.com/u/09091092309252/file.png] ]

loader = new Loader();

loader.load(new URLRequest(_theURL));

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);

IMPORTANT:

Add a Custom block from the Tile API:

[set tile at row [1] col: [1] layerID [0] using tileID [5] from tilesetID [3] ]

Stencyl / HaXe : Changing Background using an Actor

Changing Background using Actor

Put an Actor on the scene (with invisible pixels)

Put it on the scene on the 0 layer

Put the tiles on the 1 layer

Put the Player on either layer 2 or layer 1

The background actor needs two animations. The first is the invisible one to start with.

The second is the name that is ‘animation_name2’ refered later in the code.

This animation will be overriden by the code

for each [actor of type] [Select the Background Actor]

Code-block:

var bitmapData = new BitmapData(1024,1024,false, 0x000000);

// load the image into the bitmapData or use the following code:

var i:Int=0;

var j:Int=0;

var rc:Int=0;

var gc:Int=0;

var bc:Int=0;

for(i in 1 ... 1020){

for(j in 1 ... 1020){

var pixel=i;

rc=pixel;

gc=pixel+rc;

bc=pixel+gc;

bitmapData.setPixel(i,j,(rc<<16|gc<<8|bc));

}

var iti:Array<Int> = new Array<Int>();

iti.push(100); // animation time

var ba:BitmapAnimation = new BitmapAnimation(bitmapData,1,iti,true,null);

// animation_name2 must exist (as a second animation on the Actor)

actorOfType.addAnimation("animation_name2",ba);

actorOfType.originMap.set("animation_name2", new B2Vec2(bitmapData.width/2,bitmapData.height/2));

// --- EOP

Add Event: Custom : Import code:

// Change bitmap

import nme.display.BitmapData;

import nme.display.Bitmap; // when converting data

import com.stencyl.Data;

// URL loading

import nme.display.Loader;

import nme.net.URLRequest;

// Changing the Actor image

import box2D.common.math.B2Vec2;

import com.stencyl.graphics.BitmapAnimation;

// --