LibGDX + Box2D + Spine - libgdx

I am trying to get the hang of game development using LibGDX, so far I am understanding everything of it since it's basic Java with a good use of interfaces and super classes.
What I'm struggling with is with the incorporation of graphics into the LibGDX project, I am using Tiled to create maps which I understand how it works and how to render them.
I also started to get into Box2D for physics and I was able to wrap my maps (tiled..) with Box2D.
The problem comes when I try to import a project from Spine, I visited the following link: https://github.com/EsotericSoftware/spine-runtimes/tree/master/spine-libgdx and sure they have documentation there....but for someone getting started I believe they assume you know everything, and as of right now the Box2D example that they have doesn't work because of the new BoundingBoxAttachment..
My question basically is: is there any recent "tutorial" on how to use these 3 tools (libgdx, box2d and spine) from scratch and not separate?
I won't post any specific code because what I want is more of a guidance rather than a code troubleshoot.
Thanks for any cooperation in advance.

I guess it was a matter of truly diving in the code, after a lot of studying the structure of the json that gets generated with Spine and really learning my way around Box2D I was able to control the camera at my will and using the loop provided in the sample codes for spine
// Position each attachment body.
for (Slot slot : skeleton.getSlots()) {
if (!(slot.getAttachment() instanceof Box2dAttachment)) continue;
Box2dAttachment attachment = (Box2dAttachment)slot.getAttachment();
if (attachment.body == null) continue;
attachment.body.setTransform(slot.getBone().getWorldX(), slot.getBone().getWorldY(), slot.getBone().getWorldRotation()
* MathUtils.degRad);
}
I was able to get each attachment and generate the attachments, since the example doesn't work I guess it just need tweaking.

Related

How can I transfer code inside of a symbol in Flash to my document class?

I am pretty new to coding in general so I'll admit my understanding of inheritance is poor. I have this code that works when it's embedded in a symbol in my Fla doc, but I can't figure out how to transfer it to the Main document.
stop();
stage.focus = input_txt;
var outputText:String;
input_txt.visible = true;
input_txt.addEventListener(KeyboardEvent.KEY_DOWN, pressEnter);
function pressEnter(e:KeyboardEvent):void {
if(e.charCode == 13) {
captureText();
this.nextFrame();
}
}
function captureText():void {
outputText=input_txt.text;
}
All that code occurred on frame2 of the office_mc symbol, and then frame 3 has this:
output_txt.text = outputText;
I'm aware that I needed to reference the txt objects as office_mc.input_txt inside the main document since they are embedded. I'm also aware that outputText would need to be a global variable. But no matter how I tried to move things around I kept having an error due to something being null. For a little background information, I'm just trying to have user input displayed in a different area within this symbol.
Could someone explain or give an example of how to execute this code in a document class? Also I'm just totally confused about how to communicate between classes in general so if anyone could point me towards tutorials or example code that could help with that understanding, it'd be greatly appreciated. :)
Don't code in timeline at all (this is a good practice).
You should use only classes which eventually points to objects from the timeline.
Here you have some good tutorials:
How to Use a Document Class
AS3 OOP (good tutorial)

Gestouch works only when mapped to stage

I am trying to use gestouch library in my project and i can't seem to get it to work properly.
This is how i am mapping it:
var tapGesture:TapGesture = new TapGesture(stage);
tapGesture.addEventListener(GestureEvent.GESTURE_RECOGNIZED, onTap);
As you can see it is mapped to the stage and this way it works...
The class where i am using it extends a flash Sprite, and i would like to map the gesture to
this, but when i do, gestouch doesn't seem to work...
I even tried putting a sprite with stage width and height on top of my view and still doesn't work...
Anyone knows what could be the problem?
Also, maybe it is important to note, i am using a ASC2.0, so i had to remove the mario mushroom operator from this part : Gestouch.inputAdapter ||= new NativeInputAdapter(stage);
I (am the author of Gestouch) haven't tested it with ASC 2.0 because it's still in development, but yea, at least it's known that there issues with "mushroom operator" and -inline compiler argument.
So the answer: stick to MXMLC or use sources and find out why it doesn't work.
Also it is better to ask questions on Github. I found this almost by accident — Google reports me of Gestouch mentions =)

Anyone know a list of flash.includes? (as3)

I'm looking for a list of flash.include.whatever.whatever for as3.
If no one knows a list then can someone tell me the flash.include to use for drawing rectangle with the startFill and endFill things? Thanks for any help.
I didn't find anything on either of these googling, and the place I got the code for drawing a rectangle of course didn't have the flash.includes included in the example code... is their a reason so many people do that? Any way I can get around it?
Do you mean you want a list of the packages and classes that come with AS3? That is typically called the documentation and can be found here:
Adobe ActionScript® 3 API Reference
For drawing a Rectangle, you can start at flash.display.Shape. It has a graphics object with the methods .beginFill() and .endFill().
you can using a Graphics.
The Graphics class contains a set of methods that you can use to
create a vector shape. Display objects that support drawing include
Sprite and Shape objects. Each of these classes includes a graphics
property that is a Graphics object. The following are among those
helper functions provided for ease of use: drawRect(),
drawRoundRect(), drawCircle(), and drawEllipse(). You cannot create a
Graphics object directly from ActionScript code. If you call new
Graphics(), an exception is thrown.
The Graphics class is final; it cannot be subclassed.
here is a sample
import flash.display.*;
this.graphics.beginFill(0xff0000);
this.graphics.drawRect(0,0,100,100);
here is a Adobe Tutorial
AS3 all display class list here
You do not necessarily need to default AS3 include. fine compile. But include only the code you can see the hint. perhaps, CS4 after that if you use a specific class will automatically include. or ctrl+space is autocompletion.
As follows by default when you install the flash is because of the SWC path.
As per I know, there is not such a thing like Flash.include. May be you're trying to ask something else or may be i am still unknown about this feature.
If you found any positive thing about this, please let me know, i want to know that new thing.

Code for A Graphical User Interface window

How would someone go about coding a 'window'? I'm starting to make a GUI, and I want to learn how to code one. One that can be skinnable, and one that actually loops and creates itself at runtime. I understand that this might be a bit vague, so I'll add details.
One that actually 'creates' itself. Most GUI tutorials I've looked on depends on an 'image' that just gets added on the screen. I want to be able to use skins in my windows. One where my 'skin' is just a collection of 'borders'. Then when I insert window.create(50,50) where 50,50 is my height, width, It would just create that window, following the skin.
I understand that it probably follows just like when a language draws a rectangle, it just follows a different set of rules (maybe?). However, for all my Google-fu skills I cannot find a tutorial that teaches me this.
Please Help. I didn't include the language I used as you can see, because I believe I just need to know how to create one. Anyway though, I am using Actionscript 3. A tutorial would be just fine, or even A SINGLE CLASS THAT HAS THIS FUNCTIONALITY, I'll just study the code. Or if you know one, maybe a whole book about GUI and programming it :D
Pure As3.0 GUI coding is quite troublesome. I try to Googling, but not come out well. anyway for my case, i generate using a SWC, and Class Mapping and Customizing. but i'm not sure best way. in other way i use a bit101 library. this is gives me want Window, Charts, Componets easily of high abstraction. see the below image.
It can be pretty hard and complicated to do, or very easy, it just depends on how flexible your solution should be. You need firstly to design a structure of your program and approach to the problem.
I like to go from the image of how it should look like from API point of view. I think I would create a GUI element like this:
var wholeGui:MyGUI = new MyGUI();
var window:IGuiElement = new GuiWindow(dataObject, skinObject);
wholeGui.addElement(window);
So what would you need?
1) Object that would manage all GUI elements. Why? Simply because your GUI elements shouldn't be destroyed by themselves if user will click "X" on your little window. The wholeGui object would manage them and listen for any events including those that would destroy them. You may consider creating custom events for interaction between the wholeGui object and your window object if this interaction is going to be complicated.
2) Interface for your GUI objects. Some problem here is that AS3 actually doesn't have interface for Sprite, and you would like to interact with it like with extended Sprite. The workaround here is to have in this interface a declaration like this:
function asSprite():Sprite;
And your implementation in GuiWindow would look like this:
public function asSprite():Sprite {
return this;
}
And your GuiWindow class should extend Sprite of course. Then you would have access to it's Sprite properties and methods by writing for example: window.asSprite.startDrag();
This interface should give you abilities that you need to operate on your GUI element.
3) Class for your GUI element, in this example GuiWindow.
4) Class for your data that would be injected into your element. If you would load data dynamically, and from some location, you would need to deal with the situation when no data can be provided - but that logic would be inside your window.
5) Class for your skin - so you would be able to dynamically create a skin object and use it to create your window in a way you want.
That's just few thoughts to consider.
PS. It may be good idea to fill GuiWindow object with data AFTER creating it, and not in constructor, as you would be able to visualize loading process then.

Taking an intro Flash/AS3 course; problems with MVC pattern

Okay, so I've been busting my hump the last week or so on this project for my OOP/AS3 course and this past Sunday I realized that my approach wasn't going to work so I scrapped the better part of it and started over.
Our assignment is to create an XML based flash menu that demonstrates an understanding of the OOP patterns we've just learned. It was kind of a 'test the waters' project where he gave us a ton of tutorials and information and told us to make our best attempt at making sense of it so I'm certain there are more efficient ways to do what I'm doing, but that's a moot point.
We need to employ at least two patterns in our menu, though at the moment I'm just focusing on MVC so that I can get the mainUI working before I finalize the second part of the UI. It essentially flows like so:
MainUI has 4 menus that slide out.
Each slider has 3 thumbnails on it.
Clicking on any of the thumbnails will move to the next part of the UI. This functionality is currently disabled.
The program runs with 0 compiler errors, but the images are not being placed on the stage correctly and I can't figure out why. All the image paths are being pulled and stored from the XML properly. The main background image is pulled once and is supposed to be only placed once (if statement that uses a count to determine whether to run the placement function or not), but it is being placed 4 times with the sliding menu image. The sliders are being placed in the correct positions (switch statement that iterates through the mainUI function in the View class and creates a separate loader for each one), but the thumbnails are not all showing up. So here is what I'm seeking help with:
The mainPanel image should only be placed once, rather than 4 times with each slider.
The sliders, while being placed correctly, must be tweened in different directions through the as (using TweenMax), but each instance is unidentifiable from the other so right now they all have an eventListener that calls the same tween method. How can I distinguish them in a way that lets me apply a different tween to each (This will likely be a concern with the thumbnail functionality later as I will need to load different XML data based on which thumb is clicked).
I have added what I hope are very informative comments to each script so hopefully people can help. Also included are images of what I want the mainUI to eventually look like and how it's coming out currently.
pastebin with all 3 classes and XML (2 hyperlink limit) - http://pastebin.com/u/crookedparadigm
top image is how the stage is outputting, bottom image is what I'd like to to be - http://imgur.com/a/bOmsS
Last quick note, stage is currently set to 600x480 with a black background. Ideally, to reinforce OOP principles, our professor wants us to avoid using the timeline or library if possible.
Any advice at all will be greatly appreciated! Thanks!
Install FlexPMD This is a very good add on( sometimes hard to install ) It basically is used to show areas of your code that you are not following standards. For example your classes lack the use of "this". And you should avoid passing parameters in constructors. It would be good practice to develop standardized writing skills while you are still new.
Looking at your code I see you are calling buildUI from within a loop.
buildUI is assigning a MainView object to mainUI.
So each time you go through a loop iteration you are reassigning mainUI.
In the end mainUI will only be the last iteration of that loop.
Not sure this is your issue but is an issue.
[EDIT]
Excellent Singleton guide for Flex SDK
Part 1
Part 2
Some Good writing on pure AS3 Singletons.
I would prolly start from scratch as your XML data is miss formatted.
your XML should resemble something like this.
<MainProject>
<MainUI>
<Thumbnail Name="Spring">
<Destination Name="Spring" Price="99" ratingPath="images/SP1/SP1rating.png" />
</Thumbnail>
<Thumbnail Name="Winter">
<Destination Name="Winter" Price="152" ratingPath="images/SP1/SP2rating.png" />
</Thumbnail>
</MainUI>
</MainProject>
Then you should have the following structure on your stage. These movieclips should be empty and already placed inside on your stage with instance name.
Stage
MenuUI MovieClip
ThumbNail1 MovieClip <- feed it thumbnail from the XML
ThumbNail2 MovieClip <- feed it thumbnail from the XML
ThumbNail3 MovieClip <- feed it thumbnail from the XML
ThumbNail4 MovieClip <- feed it thumbnail from the XML
This might be a bit too vague, just tell me if you need more details.
Hope this helps !