Stencyl 3.4.0 is now out. Get it now!

GUI Extension [Unsupported]

mdotedot

  • *
  • Posts: 1114
Stencyl 3.0 (OpenFL) GUI Extension

This extension is becoming obsolete when 3.1 is available.

With the 3.1 Image API and the keyboard event (Add event -> Input -> Any key) there is no need for a seperate extension anymore.

Both TextField and ListBox behaviors on StencylForge are updated, please use these behaviors instead of this extension.

I will leave this information here for future reference and if anyone still wants to use it.

The GUIDemo on StencylForge is made private!



Previous version was for Stencyl 3.0 November release = non-OpenFL version.
This is the OpenFL version!


Flash Demo
https://dl.dropboxusercontent.com/u/221137130/GUI/GUIDemo.html

Extension:
https://dl.dropboxusercontent.com/u/221137130/GUI/gui_openfl.zip


Stencyl exported file:
https://dl.dropboxusercontent.com/u/221137130/GUI/GUIDemo.stencyl


Step-By-Step demonstration of Parse and Database Extensions:
https://dl.dropboxusercontent.com/u/221137130/parse/parse_gui_steps.html


Demo also on StencylForge Download name: GUIDemo

Installation instructions:
As with all extensions you need to put the folder inside the plaf/extension directory from Stencyl.
- Unzip the file in the extension folder
- It will produce a gui folder
- Create a new game
- Goto Settings - Extensions - click on Enable behind GUI
- Stencyl will tell you to close your current game and reopen
- After you have re-opened your Game you will find some blocks in the Custom panel

Basically you have two options to create the GUI Element:

You can either create 'normal' Stencyl Actor with the [create [actor type] ]-blocks or you can create
the elements dynamicly by using the [create actor] custom block. The resulting actor should be stored in
an attribute for future use.

The following step is to make the new actor into a GUI element.
Use the [For [Actor] create -list of elements- X: Y: Width: Height] block.

You can select between the different GUI Elements.

Next you can set properties on the actor. The propertylist works with [anything] blocks and you have to
realize that in that block a textvalue should be enclosed with quotes : "OK"
(Use the 'as number', 'as boolean' for example to make sure that the type matches what you want to achieve)

If you want to retrieve properties you can use the block [For [actor] get property [-property-list-]
For instance the 'Value' of a TextField actor can be retrieved or the 'Selection' of a listbox or radiobutton.

In order to react on Clicks or do when update/draw things there is a [For [actor] on [click/draw] do [trigger]]
block. The trigger can be a scene trigger or an actor trigger. But remember that the trigger fires acros both.
If you have a trigger on your scene level with the same name as in your actor there will be conflicts!!


The extension is in the public domain, to be accessed and modified freely. (Use at your own risk)

Big thanks to Rob1221!

Tested on:
* Flash
* iOS (iPhone 3gs, iPhone 5s, iPad mini)
* Android (Galaxy Tab Note, SII, SIII, Note 2014 Edition)
* Windows Native
* Mac Native

Best regards from
M.E.

May 3rd:
Made obsolete by upcoming 3.1

Edit: for nightly builds round 9 March 2014:
Change GUI.hx :
Code: [Select]
Line 198:

var _actorType=new com.stencyl.models.actor.ActorType(_typeID,_atlas,_name,_groupID,_spriteID,_behaviorValues,_bodyDef,0,_autoScale,_pausable,_ignoreGravity);


Line 224:

var theActor:com.stencyl.models.Actor=new com.stencyl.models.Actor(engine, 1000+(++engine.nextID),_groupID, _theX,_theY,0,_width,_height,_sprite,_behaviorValues,_actorType,_bodyDef,_isSensor,_isStationary,_isKinematic,_canRotate,_shape,_typeID,_autoScale,_ignorGravity,0);


« Last Edit: February 03, 2015, 08:43:02 pm by Jon »
Best regards from
M.E.
Hanging out in the Chat:  http://www.stencyl.com/chat/

1MrPaul1

  • *
  • Posts: 1133
Great extension! Thank You.
Very useful for many games.
But probably it will be cool to have some simple tutorial with all abilities of this extension.

mdotedot

  • *
  • Posts: 1114
Hello 1MrPaul1,

Thank you for your kind words!

The GUIDemo.stencyl is a file you can import in Stencyl and you can check out all the blocks in the different triggers for the different elements.
Granted, the demo does not show all the different little settings you can do.
But it will get you started!

However if the demand for tutorial(s) is great enough I probably make some!

Best regards from
M.E.
Best regards from
M.E.
Hanging out in the Chat:  http://www.stencyl.com/chat/

TwistedIdentity

  • *
  • Posts: 244
Major thanks. This is what I need for my project. Now I'm awaiting your Parse conversion over to OpenFL..

Btw that GUIDemo file is corrupted.. Download stays at 50%

« Last Edit: February 12, 2014, 08:34:43 am by TwistedIdentity »
My Critter Android http://bit.ly/1gJyUs4
TI's FB Page: http://on.fb.me/1ijla4Y
Deadly Space Boss Arena 2: http://goo.gl/KIuowG

Follow me on Twitter: @jettas88

mdotedot

  • *
  • Posts: 1114
Hi TwistedIdentity,

I'm nearly there regarding the Parse.

Which GUIDemo? I tried downloading the .Stencyl and it imports just fine. Is it the one on StencylForge?

Kind regards from
M.E.
Best regards from
M.E.
Hanging out in the Chat:  http://www.stencyl.com/chat/

TwistedIdentity

  • *
  • Posts: 244
Hi TwistedIdentity,

I'm nearly there regarding the Parse.

Which GUIDemo? I tried downloading the .Stencyl and it imports just fine. Is it the one on StencylForge?

Kind regards from
M.E.

Never mind, apparently my Download Manager didn't like to download that file fully, so I just right click, save as instead..
My Critter Android http://bit.ly/1gJyUs4
TI's FB Page: http://on.fb.me/1ijla4Y
Deadly Space Boss Arena 2: http://goo.gl/KIuowG

Follow me on Twitter: @jettas88

mdotedot

  • *
  • Posts: 1114
Hello 1MrPaul1,

Since TwistedIdentity asked for some steps regarding the Parse Database I made some steps with the GUI Extension along the way. So I know it is not a complete step-by-step demonstration of all the different settings you can make with the extension I hope you still have a starting point using the guide:
https://dl.dropboxusercontent.com/u/221137130/parse/parse_gui_steps.html

Best regards from
M.E.
Best regards from
M.E.
Hanging out in the Chat:  http://www.stencyl.com/chat/

nickel686

  • Posts: 2
Hi mdotedot,

First i have to say thanks for this cool Extension.
But there seems a bug with European language.
If i try to wrote umlauts like "ä","ö","ü","ß" the Input box hang on and i have to refresh the whole site.
Is there any way to fix this?


mdotedot

  • *
  • Posts: 1114
Hello Nickel686,

Thank you for your kind words.

The TextField/InputField element uses the US keyboard translation. The key code that some other keyboards are able to generate are not converted in the translation code.
The code merely checks for a code and generates a text for that key-code. For other keyboards that could well be a different character!

You are free to change the TextField.hx file in the extension/gui directory.
Also remember that not all fonts are capable of displaying diacritical characters but that is the next step in getting those characters on the screen.

I've not experienced a hang with the inputs that I have tried. (Macintosh - Mavericks + Stencyl OpenFL from January)
What will happen is that the text will have 'bad' characters in them as the input key-codes can't be translated to a character.
Maybe doing something with those bad characters (i.e. ascii code value < 32) in other code will generate null-pointer.

I estimate that a native input behavior/extension will be made in the future so I kind of leave the code as is for the moment.
It fulfilled my current purpose and if the native input never will be a reality I would have the need to make a better input-system altogether with these capabilities:
 * cursor movement / inserting
* scroll inside height/width area
* word-wrap
* And what you suggest : based on keyboard layout + diacritical character input

Hope that you will be able to adjust the TextField.hx for your own purpose!

Best regards from
M.E.
Best regards from
M.E.
Hanging out in the Chat:  http://www.stencyl.com/chat/

mdotedot

  • *
  • Posts: 1114
Hello,

The nightly builds from March changed something in the ActorType/Actor classes.
To use the extension with these new builds change the GUI.hx:
Code: [Select]
Line 198:

var _actorType=new com.stencyl.models.actor.ActorType(_typeID,_atlas,_name,_groupID,_spriteID,_behaviorValues,_bodyDef,0,_autoScale,_pausable,_ignoreGravity);


Line 224:

var theActor:com.stencyl.models.Actor=new com.stencyl.models.Actor(engine, 1000+(++engine.nextID),_groupID, _theX,_theY,0,_width,_height,_sprite,_behaviorValues,_actorType,_bodyDef,_isSensor,_isStationary,_isKinematic,_canRotate,_shape,_typeID,_autoScale,_ignorGravity,0);


Thanks to BonZero for reporting this issue!

Best regards from
M.E.
Best regards from
M.E.
Hanging out in the Chat:  http://www.stencyl.com/chat/

Jon

  • *
  • Posts: 17497
We had to add a new parameter to support the upcoming Simple Actor feature.

bonzero

  • *
  • Posts: 462
i've replaced line 198 but line 224 was originally empty, adding that line of code gives this error=

GUI (224) -  Unknown identifier

I feel clumsy not being able to copy and paste properly hehe  :)

mdotedot

  • *
  • Posts: 1114
Hi BonZero

The change is adding a zero to what was there already. Where are those lines in your haxe file?

Regards from
MdotEdot
Best regards from
M.E.
Hanging out in the Chat:  http://www.stencyl.com/chat/

bonzero

  • *
  • Posts: 462
it works now

I replaced line 198, and then on line 210 I added the 0 at the end, it works great now, time to fiddle with it

TwistedIdentity

  • *
  • Posts: 244
Hello, I'm getting this error after using the latest nightly.. I've already changed the Gui.hx stuff


Quote
[LOG] C:\Program Files (x86)\Stencyl\plaf\haxe\extensions/gui/GUI.hx:320: characters 87-96 : Array<Int> should be Int
[ERR] java.lang.StringIndexOutOfBoundsException: String index out of range: -2
[ERR] java.lang.StringIndexOutOfBoundsException: String index out of range: -2
[LOG] Unexpected problem on thread Thread-21: String index out of range: -2
My Critter Android http://bit.ly/1gJyUs4
TI's FB Page: http://on.fb.me/1ijla4Y
Deadly Space Boss Arena 2: http://goo.gl/KIuowG

Follow me on Twitter: @jettas88