I was making a level table in libgdx using scroll pane. here there are different tables with specific level on a particular scroll pane. Is there any way to preset a particular table to be the first one I see, becuase it would be stupid if I have more than 50 level and I have to scroll through all of them to go to a particular level at end.
A brief details about my tables and scrollpane.
I have a arraylist of table called as column table, which is used as to store different level details in different columns. then this column table is added to another table which is called as levleTable.
The level table is added to scrollpane which is added to main table.
public void setScrollPane() {
scrollPane = new ScrollPane(levelTable, getScrollPaneStyle());
// scrollPane = new ScrollPane(levelTable, skin);
//scrollPane.setFlickScroll(true);
scrollPane.setFadeScrollBars(false);
scrollPane.setScrollingDisabled(false, true);
scrollPane.setScrollX(300);
scrollPane.updateVisualScroll();
//scrollPane.setSmoothScrolling(true);
mainTable.add(scrollPane).expand();
}
and in constructor`
mainTable = new Table();
mainTable.setFillParent(true);
levelTable = new Table();
setScrollPane();
columnTable = new ArrayList<Table>();
levelSelectionButton = new ArrayList<TextButton>();
makeLevelMenu();
//adding main table to stage
stage.addActor(mainTable);`
For the the better idea (when using mechanism like this) i to scroll the scrollPane automatically to the current object (which could be the table with your next level for example).
You can easily achieve it using:
scrollPane.setScrollY(y);
where the y should be
y = (total height of scroll Pane content) - ( (desired element Y position inside scrollPane) - (element height) )
I mean that if your scrollPane content has 100px height and there are 5 elements every with 20px height then scrolling to the third is:
y = 100 - (3 * 20px - 20px) = 100 - 40px = 60px
The same will work if your scrollPane is arranged horizontally - you just need to use scrollPane.setScrollX(x) and calculates all width instead of heights
UPDATE: before using setScrollX / setScrollY you have to call .layout() method on the scrollPane
The example:
#Override
public void show()
{
//creating stage and viewport
viewport = new FillViewport(1280, 800);
stage = new Stage(viewport);
Gdx.input.setInputProcessor(stage);
//creating levelTable
Table levelTable = new Table();
levelTable.setSize(2000, 500);
//filling levelTable with fake actors (it can be labels of your levels numbers)
for(int i = 0; i < 100; i++)
{
Actor a = new Actor();
a.setSize(80, 200);
//set debug to see the outline
a.debug();
levelTable.add(a).pad(150, 10, 150, 10);
}
//set debug to see the outline
levelTable.debug();
//defining scroll
ScrollPane scrollPane = new ScrollPane(levelTable, skin);
scrollPane.setSize(800, 600); //your custom size
scrollPane.setPosition(50, 50); //your custom position
scrollPane.setFadeScrollBars(false);
scrollPane.setScrollingDisabled(false, true);
//important!! you have to call it before setScrollX
scrollPane.layout(); //that's the thing!
//the number of column you want to go to
int numberOfColumn = 10;
//now move to column no numberOfColumn
scrollPane.setScrollX( levelTable.getWidth() - ( levelTable.getColumns() - numberOfColumn - 1 ) * 100 ); //100, because column width is 100 - actor = 80 + 2 * 10 pad
//set debug to see the outline
scrollPane.debug();
this.stage.addActor(scrollPane);
}
Related
I don't know how to describe this problem but I will try to be clear enought. I am doing an actionscript exercise where I have a DisplayObjetct Container defined as Sprite, and what I want is to add ramdomizely circles with a random radio length between 50 and 100.
The Container called "gameZoneContainer_sp" has been added to the displaylist in the Main class, and everytime the user change the size of the stage the container set its new values of width and height.
Here is the code of what i am saying:
private function refreshScreen(ev:Event= null ):void{
// Remember: we can know stage dimensions accessing to:
// stage.stageWidth
// stage.stageHeight
//CONSTANTS DEFINITION OF MARGIN
const margen:Number=25;
//LOCAL VARIABLES DEFINITION
var cercleWidth:Number, cercleHeight:Number;
var invaderWidth:Number, invaderHeight:Number;
var containerWidth:Number, containerHeight:Number;
var logoWidth:Number, logoHeight:Number;
//STORING DIMENSIONS
cercleWidth=addCercle_bt.width;
cercleHeight=addCercle_bt.height;
invaderWidth=addInvader_bt.width;
invaderHeight=addInvader_bt.height;
containerWidth=gameZoneContainer_sp.width;
containerHeight=gameZoneContainer_sp.height;
logoWidth=logoUOC_sp.width;
logoHeight=logoUOC_sp.height;
//SET HORIZONTAL POSITION OF THE ELEMENTS
addCercle_bt.x=(stage.stageWidth/2)+margen;
addInvader_bt.x=(stage.stageWidth/2)-(invaderWidth+margen);
gameZoneContainer_sp.x=margen;
logoUOC_sp.x=stage.stageWidth-(logoWidth+margen);
//SET VERTICAL POSITION OF THE ELEMENTS
addCercle_bt.y=stage.stageHeight - (cercleHeight+margen);
addInvader_bt.y=stage.stageHeight-(invaderHeight+margen);
gameZoneContainer_sp.y=logoHeight+margen*2;
logoUOC_sp.y=margen;
//SET DIMENSIONS OF CONTAINER gameZoneContainer_sp
gameZoneContainer_sp.width=stage.stageWidth-(margen*2);
gameZoneContainer_sp.height=stage.stageHeight-(margen*4)-invaderHeight-logoHeight;
}
/* THIS METHOD ADD A CIRCLE TO THE CONTAINER gameZoneContainer_sp */
private function addCercle(ev:MouseEvent):void {
// Create new instance of Cercle
// and add it to gameZoneContainer_sp
//CONSTANT DEFINITIONS
const minRadio:Number=50, maxRadio:Number=100;
//LOCAL VARIABLES DEFINITIONS OF RADIO, COLOR AND CIRCLE
//THE RADIO CHOOSE A RANDOM VALUE BETWEEN 50 AND 100
var radio:Number=minRadio+(maxRadio-minRadio)*Math.random();
var color:uint=Math.random() * 0xFFFFFF;
var cercle:Cercle=new Cercle(color,radio);
//
var minPosX:Number=radio;
var maxPosX:Number=gameZoneContainer_sp.width/2;
var minPosY:Number=radio;
var maxPosY:Number=gameZoneContainer_sp.height-(minPosY);
// SET POSITION OF THE CIRCULE INSIDE THE CONTAINER
cercle.x= minPosX + (maxPosX-(2*minPosX))*Math.random();
cercle.y= minPosY + (maxPosY-(2*minPosY))*Math.random();
cercle.drawCercle();
gameZoneContainer_sp.addChild(cercle);
refreshScreen(ev);
//TRACING RESULTS...
trace ("Added cercle!");
trace ("alto del contenedor: "+gameZoneContainer_sp.height);
trace ("Posicion x: "+cercle.x);
trace ("radio: "+radio);
}
//DEFINITION OF THE CIRCLE CLASS
public class Cercle extends Sprite {
private var _color:uint;
private var _radio:Number;
public function Cercle(color:uint,radio:Number){
super();
/* THE CLASS ACCEPT HEX VALUES.*/
_color= color;
_radio=radio;
init();
}
public function init():void{
drawCercle ();
}
//METHOD TO DRAW A CIRCLE
public function drawCercle():void{
var circle:Shape=new Shape();
circle.graphics.beginFill(_color,1);
circle.graphics.drawCircle(0,0,_radio);
addChild(circle);
}
}
Here is my problem:
When I add a circle it seems to be fine until I change the dimensions of the windows (the scene). Everytime I update the dimensions, the event execute the method refreshScreen from the main class which update the dimensions and positions of all elements in scene, but after that if i add a new circle, it change the container, and that is wrong because what I want is to add the circle IN the container.
Hope is not too long. Please any help would be great!
Thank you in advance!!
************ HERE GOES THE SOLUTION ********************
//METHOD TO ADD A CIRCLE TO THE CONTAINER
private function addCercle(ev:MouseEvent):void {
// Create new instance of Cercle
// and add it to gameZoneContainer_sp
const minRadio:Number=50, maxRadio:Number=100;
var radio:Number=minRadio+(maxRadio-minRadio)*Math.random();
var color:uint=Math.random() * 0xFFFFFF;
// CHANGES///////
// gameZoneContainer_sp IS 400X400 ORIGINALLY AND WE WANT TO PUT AN INSTANCE OF CIRCLE OBJETCT
// cercle.x WILL PLACE IN minPosX = radio y maxPosy = 400 - radio
// TAKING INTO ACCOUNT THAT ITS RADIO IS cercle.width/2
// cercle.x WILL PLACE IN minPosX = cercle.width/2 y maxPosy = 400 - cercle.width/2
// (SAME FOR y)
var cercle:Cercle=new Cercle(color,radio);
// Cercle scale correction
//cercle.width= radio/(gameZoneContainer_sp.width/400);
//cercle.height= radio/(gameZoneContainer_sp.height/400);
// Cercle positionning
cercle.x = cercle.width/2 + ((400-cercle.width)*Math.random());
cercle.y = cercle.height/2 + ((400-cercle.height)*Math.random());
// PROPORTION CORRECTIONS
//cercle.width = (2*radio)*gameZoneContainer_sp.width/400;
//I ADD IT TO THE CONTAINER
gameZoneContainer_sp.addChild(cercle);
trace ("Added cercle!");
trace ("alto del contenedor: "+gameZoneContainer_sp.height);
trace ("Posicion x: "+cercle.x);
trace ("radio: "+radio);
}
This is what I think is going on. You basically have 2 problems.
You're adding circles using math meant to adjust for the position of the game window, but you don't need that if you are adding it to the game window container. This is resulting in circles that are being added too far to the right.
Something about your Air setup is making the screen contents scale to show all the contents resulting in everything shrinking. (If we fix the first problem, this one will become inconsequential).
So instead of:
cercle.x = minPosX ...etc
do:
cercle.x = Math.Random()*gameZoneContainer_sp.width;
Do likewise for the y value.
You see, the local origin point of an objects container will be that objects (0,0) point locally. So the top left corner of this game container will be the cercle's (0,0) point and therefore there is no need to adjust it to the right by the amount that you do using minPosX. This is assuming you have not made your game container offset from the default somehow (i.e. When you created the rectangle, you did so using (0,0,width,height) and not something like (xOffset,yOffset,width,height)).
I want to move a sprite (which happens to be a Rectangle) from any position of the screen and make it stop at exactly the touched position of the screen. Now, I can stop my sprite already, but not at the exact touched position. I cannot find a good way of doing this without sacrificing either accuracy or risking the sprite to not stop at all.
Naturally - the problem arises because the current position is Float, so that Vector will never (or extremely rarely) have the exact same coordinates as the touch point (which is an int).
In the code below, I stop my sprite by simply checking the distance between the current position and the target position (i.e. the touched position Vector3), like so if (touch.dst(currentPsition.x, currentPosition.y, 0) < 4).
For example, if the sprite is at position (5,5) and I touch the screen at (100,100), it will stop at like (98.5352,96.8283).
My question is, how do I stop the sprite at exactly the touch position, without having to approximate?
void updateMotion() {
if (moveT) {
movement.set(velocity).scl(Gdx.graphics.getDeltaTime());
this.setPosition(currentPosition.add(movement));
if (touch.dst(currentPosition.x, currentPosition.y, 0) < 4)
moveT = false;
}
}
public void setMoveToTouchPosition(boolean moveT) {
this.moveT = moveT;
this.touch = new Vector3(Gdx.input.getX(), Gdx.input.getY(), 0);
GameScreen.getCamera().unproject(touch);
currentPosition = new Vector2(this.x, this.y);
direction.set(new Vector2(touch.x, touch.y)).sub(currentPosition).nor();
velocity = new Vector2(direction).scl(speed);
}
Of course sprite can't move smoothly to touch position and then stop in exactly the same position because of many reasons. Just change this
if (touch.dst(currentPosition.x, currentPosition.y, 0) < 4)
moveT = false;
to this
if (touch.dst(currentPosition.x, currentPosition.y, 0) < 2) {
currentPosition.x = touch.x;
currentPosition.y = touch.y;
moveT = false;
}
A quick yet acceptable solution to this could be the use of the Rectangle class. Considering you make a Rectangle surrounding the moving entity and constantly update it's bounds based on its current location, it's texture width, and it's texture height. You could stop it when it overlaps with the "target position". If you do this you guarantee yourself that it will stop exactly at that position. For example:
Texture entityTexture = new Texture("assets/image.png");
Rectangle entityBounds = new Rectangle();
entityBounds.set((currentPosition.x, currentPosition.y, entityTexture .getWidth(), entityTexture .getHeight()));
Rectangle targetBounds = new Rectangle();
targetBounds.set((targetPosition.x, targetPosition.y, 1, 1)); // make width and height 1 by 1 for max accuracy
public void update(){
// update bounds based on new position
entityBounds.set((currentPosition.x, currentPosition.y, entityTexture.getWidth(), entityTexture.getHeight()));
targetBounds.set((targetPosition.x, targetPosition.y, 1, 1));
if(entityBounds.overlaps(targetBounds)){
// do something
}
}
I want to have a scene where an image which is 5000 pixels high is moving up 5 pixels each frame-refresh. When the image is all up, I'd like to see the top of the image connected to the bottom of the image. This should be done untill the level is 'done'. How can I 'loop' such an Image?
You can create a copy of that image which you keep hidden/above and the trick is to update the position and loop accordingly so when one image goes bellow the screen it goes back on top and repeats.
Here's a basic snippet to illustrate the idea using the DisplayObject class and the scrollRect property:
//ignore this, you have your content already
var dummyContent:BitmapData = new BitmapData(100,100,false);
dummyContent.perlinNoise(10,10,8,12,true,true);
//important stuff starts here
var container:Sprite = addChild(new Sprite()) as Sprite;//make a container
container.scrollRect = new Rectangle(0,0,dummyContent.width,dummyContent.height);//set a scrollRect/'mask'
var part1:DisplayObject = container.addChild(new Bitmap(dummyContent));//add two copies
var part2:DisplayObject = container.addChild(new Bitmap(dummyContent));//of the same content
part2.y -= part2.height;//set the 2nd at the top of the 1st
addEventListener(Event.ENTER_FRAME,update);
function update(e:Event):void{
//move both
part1.y += 5;
part2.y += 5;
//check if any reach the bottom so they can be moved back up
if(part1.y >= part1.height) part1.y = -part1.height;
if(part2.y >= part2.height) part2.y = -part2.height;
//the above can also be nicely placed in a loop if you plan on using more seamless looping clips/images
}
Obviously you will have different content, but the principle is the same.
If you're working with images, you can simply use BitmapData's copyPixels method:
var s:int = 5;//scroll speed
//make some content
var w:int = 100;
var h:int = 100;
var dummyContent:BitmapData = new BitmapData(w,h,false);
dummyContent.perlinNoise(10,10,8,12,true,true);
//prepare for stiching
var renderPos:Point = new Point();//position to render the current image to
var prenderPos:Point = new Point();//position to render the previous image (the 'hidden' copy above)
var render:BitmapData = new BitmapData(w,h,false);//create a bitmap data instance to render updated pixels int
addChild(new Bitmap(render));//and add it to the stage
addEventListener(Event.ENTER_FRAME,update);
function update(e:Event):void{
renderPos.y = (renderPos.y+s)%h;//update the scroll position for the 1st part, % is used to loop back to 0 when the position gets to the content height
prenderPos.y = renderPos.y - h;//update the scroll position for the 2nd part (above)
render.lock();//freeze pixel updates
render.copyPixels(dummyContent,dummyContent.rect,renderPos);//copy pixels from the scroll position to the bottom
render.copyPixels(dummyContent,dummyContent.rect,prenderPos);//copy pixels from the top to the scroll position
render.unlock();//unfreeze/update ALL THE PIXELS
}
You can try to use a Rectangle object which changes height (height-scrollPosition) so you potentially access less pixels each time or you can manually work out single for loops using BitmapData's getVector method, but that's something to look into if performance is actually an issue for such a simple task and it's worth checking what's faster ( copy full bitmap rect vs copy partial bitmap rect vs manually copy values using vector )
Be warned, Flash cannot load an image greater than 16,769,025 pixels (or 4095x4095). The height of 5000 pixels will work as long as the width is not greater than 3353.
That said, I'd loop the image by keeping two copies of the image onstage, move both at the same time with a parent object, and reset to origin once your loop point is met.
Consider the following stage setup:
Stage ¬
0: MainTimeline:MovieClip ¬
0: Container:MovieClip ¬
0: img1:Bitmap
1: img2:Bitmap
Now moving container up, you'd just need to check that the looping second image reaches the origin point of the first image.
function onEnterFrame(e:Event):void {
Container.y = Container.y - 5;
if (Container.y < -5000) {
Container.y = -5;
}
}
I have an array of sprites:
for (i = 0; i < 3; i++) {
var newLine:Sprite = new Sprite();
newLine.graphics.beginFill(0xFFFFFF);
newLine.graphics.drawRect((uiSizeX * (.25 + .25 * i)) + (doorSizeX - lineLengths[0][i]) / 2, uiSizeY * .5, lineLengths[0][i], lineHeight);
newLine.name = "lines" + i;
lines.push(newLine);
}
I later add each to a background Sprite:
for (i = 0; i < 3; i++) {
uiContainer.addChild(doors[i]);
uiContainer.addChild(lines[i]);
}
And later wish to change the width of the rectangles contained in each. When I set the width property using the array reference:
lines[i].width = lineLengths[trialNumber][i];
The rectangle moves towards the center of the stage and uiContainer. Trying to set the x value results in even stranger behavior. I've gathered from answers to other questions that this is because the sprite is empty, which is confusing since it seems like it should have a rectangle in it. How do I access or change the properties of the rectangle or make it so the sprite is not empty?
Never try to directly change the width or height of a sprite, unless you really really have to, because it leads to all sorts of unexpected behavior.
If you want to resize the sprite, then redraw the rectangle:
var sprite = lines[i];
sprite.graphics.beginFill(0xFFFFFF);
sprite.graphics.drawRect(newWidth, newHeight);
Also don't forget to call endFill:
sprite.graphics.endFill();
You should probably wrap all this logic into a separate class so that you can redraw your sprites more easily. Even better, create a class that extends Sprite and that contains all the logic to redraw/resize.
Hey guys hoping someone can help here. I am cropping a bitmap image into tiles using the following function:
function crop( _x:Number, _y:Number, _width:Number, _height:Number, callingScope:MovieClip, displayObject:DisplayObject = null, pixelSnapping:Boolean = false):Bitmap
{
var cropArea:Rectangle = new Rectangle( 0, 0, _width, _height );
var croppedBitmap:Bitmap;
if(pixelSnapping == true)
{
croppedBitmap = new Bitmap( new BitmapData( _width, _height ), PixelSnapping.ALWAYS, true );
}
else
{
croppedBitmap = new Bitmap( new BitmapData( _width, _height ), PixelSnapping.NEVER, true );
}
croppedBitmap.bitmapData.draw( (displayObject!=null) ? displayObject : callingScope.stage, new Matrix(1, 0, 0, 1, -_x, -_y) , null, null, cropArea, true );
return croppedBitmap;
}
The width and height being passed in is a non integer value, for instance 18.75. When the new BitmapData is created it always rounds down the value to an integer, since the arguments for BitmapData are typed as such. In the case of my needs here, the width and height will not likely ever be integers. Is there a way to create these bitmap pieces of another image at the exact width and height I need or can a new bitmapData only be created with integer values for height and width?
Thanks for any insight.
EDIT: I realize you can't have a fraction of a pixel, but... What I am trying to achieve is dividing an image into tiles. I want the amount of tiles to be variable, say 4 rows by 4 columns, or 6 rows by 8 columns. the division of an image into X number of parts results in widths and heights in most cases to be non integar values like 18.75 for example. The goal is to divide an image up into tiles, and have that image appear, assembled seamlessly, above the source image, where I would then manipulate the individual tiles for various purposes (puzzle game, tiled animation to new scene, etc). I need the image, when assembled from all the tile pieces, to be an exact copy of the original image, with no lines between tiles, or white edges anywhere, and I need this to happen with non integer widths and heights for the bitmapData pieces that comprise the tiles. Does that makes sense? O_o
A BitmapData can only be created with integer values for the dimensions.
And to be honest, I'm trying to think what a BitmapData object with floating number values for dimensions would be like, but my brain starts to scream in pain: DOES NOT MAKE SENSE!
My brain's a bit melodramatic sometimes.
-- EDIT --
Answer to your edited question:
2 options:
1/ Just copy the original full bitmap data as many times as you have tiles and then use masks on bitmap objects to show the appropriate parts of the tiles
2/make sure no fractional widths or heights are generated by the slicing. For instance if you got an image of width 213 you want to split in 2 rows and 2 columns, then set the width of the left tiles to 106 and the width of the right tiles to 107
Maybe there are other options, but those two seem to me to be the easiest with most chance of success.
If you need to create tiles with preferred size you can use something like that:
private function CreateTilesBySize( bigImage:Bitmap, preferredTileWidth:int, preferredTileHeight:int ):Tiles
{
var result:Tiles = new Tiles();
var y:int = 0;
while ( y < bigImage.height ) {
result.NewRow();
const tileHeight:int = Math.min( preferredTileHeight, bigImage.height - y );
var x:int = 0;
while ( x < bigImage.width ) {
const tileWidth:int = Math.min( preferredTileWidth, bigImage.width - x );
const tile:Bitmap = Crop( x, y, tileWidth, tileHeight, bigImage );
result.AddTile( tile );
x += tileWidth;
}
y += tileHeight;
}
return result;
}
If you need to create exact amount of rows and calls. Then you can use:
private function CreateTilesByNum( bigImage:Bitmap, cols:int, rows:int ):Tiles
{
const preferredTileWidth:int = Math.ceil( bigImage.width / cols );
const preferredTileHeight:int = Math.ceil( bigImage.height / rows );
return CreateTilesBySize( bigImage, preferredTileWidth, preferredTileHeight );
}
But remember that tiles will have diferent sizes (last tiles in a row and last tiles in a column)