libgdx polygon sprite batch draw filled polygon - colors

I need to draw polygon filled with color, but i don't know how to create my texture right, for batch to draw it
Here is my code
public class VisualComponent implements Component, Pool.Poolable {
public float[] vertices = new float[1];
public short[] triangles = new short[1];
#Override
public void reset() {
vertices = new float[1];
triangles = new short[1];
}
}
Here i am creating the entity which i want to be drawn
Entity source = engine.createEntity();
TransformComponent transformComponent = engine.createComponent(TransformComponent.class);
VisualComponent visualComponent = engine.createComponent(VisualComponent.class);
float redColorBits = Color.RED.toFloatBits();
visualComponent.vertices = new float[]{
0, 0, redColorBits,
10, 0, redColorBits,
10, 10, redColorBits,
0, 10, redColorBits
};
visualComponent.triangles = new short[]{
0, 1, 2,
0, 2, 3
};
source.add(transformComponent);
source.add(visualComponent);
engine.addEntity(source);
And here is the rendering system's processEntity method
#Override
protected void processEntity(Entity entity, float deltaTime) {
TransformComponent transformComponent = tcm.get(entity);
VisualComponent visualComponent = vcm.get(entity);
batch.draw(new Texture(1, 1, Pixmap.Format.RGBA8888),
visualComponent.vertices, 0, visualComponent.vertices.length,
visualComponent.triangles, 0, visualComponent.triangles.length);
}
Also I need a tip on how to correctly reuse my texture for not always recreating it. Thx

Okay I did it by inheriting from PolygonSpriteBatch and adding a 1x1 white pixel texture for draw function, here is the code which worked fine.
public class TexturedPolygonSpriteBatch extends PolygonSpriteBatch {
private Texture texture;
public TexturedPolygonSpriteBatch() {
super();
initTexture();
}
public void draw(float[] polygonVertices, int verticesOffset, int verticesCount,
short[] polygonTriangles,
int trianglesOffset, int trianglesCount) {
super.draw(texture, polygonVertices, verticesOffset, verticesCount,
polygonTriangles, trianglesOffset, trianglesCount);
}
#Override
public void dispose() {
texture.dispose();
super.dispose();
}
private void initTexture() {
Logger.log(getClass(), "Initializing 1x1 white texture");
Pixmap pixmap = new Pixmap(1, 1, Pixmap.Format.RGBA8888);
pixmap.setColor(Color.WHITE);
pixmap.fill();
texture = new Texture(pixmap);
pixmap.dispose();
}
}
Actually it was important to give a white color to the texture, because white color contains all the colors, if I set red color, only red color could be drawn there, think its some kind-a strange, but the woodoo worked.)

Related

LibGdx: How to set a separate viewport for UI elements?

I'm trying to code a simple maze with a character that moves using a Joystick (touchpad). I used a Fit viewport to maintain the aspect ration of my maze while keeping it at the center of the screen;
However, I find that that the joystick is also added beside the maze. sample of what it looks like currently
I want the joystick to be of the far bottom-left of the screen. I tried doing this using a different viewport for UI elements (including the joystick), but then the whole maze just gets distorted.
Here is part of my BaseScreen class, an extension I made to reuse in other games as well:
public abstract class BaseScreen implements Screen, InputProcessor {
public BaseScreen(){
gameWorldHeight = 1024;
gameWorldWidth = 1024;
cam = new OrthographicCamera(gameWorldWidth, gameWorldHeight);
port = new FitViewport(cam.viewportWidth, cam.viewportHeight, cam);
port.apply();
cam.update();
mainStage = new Stage(port);
uiStage = new Stage(port);
uiTable = new Table();
uiTable.setFillParent(true);
uiStage.addActor(uiTable);
initialize();
}
public abstract void initialize();
public void render(float dt) {
mainStage.getCamera().update();
uiStage.getCamera().update();
uiStage.act(dt);
mainStage.act(dt);
update(dt);
mainStage.draw();
uiStage.draw();
}
public abstract void update(float dt);
public void resize(int width, int height) {
mainStage.getViewport().update(width,height, true);
uiStage.getViewport().update(width,height,false);
}
}
Here is also a part of my gameScreen class, where I actually code all the core mechanics of the game
public class gameScreen extends BaseScreen {
#Override
public void initialize() {
//..
uiTable.pad(10);
uiTable.add().expandX().expandY();
uiTable.row();
uiTable.add(ball.touchpad).left();
uiTable.add().expandX();
}
}
and in case you were wondering, here is what ball.touchpad is
public class Ball extends BaseActor {
public Touchpad touchpad;
public Touchpad.TouchpadStyle touchpadStyle;
public Skin touchpadSkin;
public Drawable touchBackground;
public Drawable touchKnob;
public Ball (float x, float y, Stage s) {
//..
//Create a touchpad skin
touchpadSkin = new Skin();
//Set background image
touchpadSkin.add("touchBackground", new Texture("touchBackground.png"));
//Set knob image
touchpadSkin.add("touchKnob", new Texture("touchKnob.png"));
//Create TouchPad Style
touchpadStyle = new Touchpad.TouchpadStyle();
//Create Drawable's from TouchPad skin
touchBackground = touchpadSkin.getDrawable("touchBackground");
touchKnob = touchpadSkin.getDrawable("touchKnob");
//Apply the Drawables to the TouchPad Style
touchpadStyle.background = touchBackground;
touchpadStyle.knob = touchKnob;
//Create new TouchPad with the created style
touchpad = new Touchpad(10, touchpadStyle);
//setBounds(x,y,width,height)
touchpad.setBounds(15, 15, 200, 200);
}
So how can i add this touchpad on the bottom left of the screen?

UI Component [JavaFX Group] loses its position while the window is resized ... occurs only after scrolling horizontally

Please go through the image below.
In the above image you can find that horizontal scrolling is not started.
Now visit the After Scroll image of the same contents...
Now in the second image you can see that horizontal scrolling is done ...
JFXPanel contents are scroll horizontally... Which was perfect...
Now the third image will describe the problem....
It is liitle bit stretched to see as it is maximized...
You can see that the JFXPanel contents have changed their original position...
Moreover the contents must start with X_DisplaceMent = 0.0 [X-Cordinate], which was done automatically in the first two images...
All the contents are nodes like [Rectangle,Line etc.. ], after that all are placed in Group node...
And this Group node is set in the ScrollPane through
js.setContent(Group node);
Each component is placed with given x,y cordiante value .. then how did this happen while doing the maximized ?
Please help me to find the root cause ...
Thanks in advance...
Here are some facts that cause the problem.
- Start Position of Scene : 0.0
- Start Position of Group in Scene : 49.5
- Width of the root : 364.5
- Start Position of Scene : 0.0
- Start Position of Group in Scene : 63.5
- Width of the root : 364.5
- Start Position of Scene : 0.0
- Start Position of Group in Scene : 83.5
- Width of the root : 364.5
Whenever we drag the window horizontally Group is moving in the scene... That should not happen... how to avoid this ...
Ok... Here is the MCVE.....
There is a Frame. which contain SplitPane having vertical split.
The SplitPane will show the contents of two JFxPanels.
Both fxpanels are having rectangle on same x cordinate but Y cordinate is different.
And both the fxPanels are horizontal scroll sync. Not bi-directional. When you scroll lower panel horizonatally, the upper panel will get scrolled due to horizontal sync.
Here is the code for fxPanel 1...
public class FxPanel1 extends JFXPanel
{
private ScrollPane scroll ;
public ScrollPane getJs() {
return scroll;
}
public void setJs(ScrollPane js) {
this.scroll = js;
}
private boolean initFX(JFXPanel fxPanel) {
Scene scene = createScene();
fxPanel.setScene(scene);
return true;
//craneAssignmentChartView.setFxPanel(fxPanel);
}
private Scene createScene() {
Group root = new Group();
Rectangle rect = new Rectangle(10.0, 20.0, 800, 40);
rect.setFill(javafx.scene.paint.Color.TRANSPARENT);
rect.setStroke(javafx.scene.paint.Color.RED);
AnchorPane anchor = new AnchorPane();
anchor.getChildren().add(rect);
GridPane grid = new GridPane();
grid.setHgap(0);
grid.setVgap(0);
grid.setPadding(new Insets(0, 0, 0, 0));
grid.add(anchor, 1, 0);
root.getChildren().add(grid);
ScrollPane scroll = new ScrollPane();
scroll.setHbarPolicy(ScrollBarPolicy.ALWAYS);
scroll.setVbarPolicy(ScrollBarPolicy.AS_NEEDED);
scroll.setContent(root);
setJs(scroll);
return new Scene(scroll, javafx.scene.paint.Color.WHITE);
}
private void createUI(final JFXPanel fxPanel)
{
Platform.runLater(new Runnable() {
#Override
public void run()
{
initFX(fxPanel);
}
});
}
public FxPanel1( JFXPanel fxPanel)
{
createUI(fxPanel);
}
}
Now the code for second fxPanel looks like ...
public class FxPanel2 extends JFXPanel
{
private ScrollPane scroll ;
public ScrollPane getJs() {
return scroll;
}
public void setJs(ScrollPane js) {
this.scroll = js;
}
private boolean initFX(JFXPanel fxPanel) {
Scene scene = createScene();
fxPanel.setScene(scene);
return true;
//craneAssignmentChartView.setFxPanel(fxPanel);
}
private Scene createScene() {
Group root = new Group();
Rectangle rect = new Rectangle(10.0, 180.0, 800, 40);
rect.setFill(javafx.scene.paint.Color.TRANSPARENT);
rect.setStroke(javafx.scene.paint.Color.RED);
AnchorPane anchor = new AnchorPane();
anchor.getChildren().add(rect);
GridPane grid = new GridPane();
grid.setHgap(0);
grid.setVgap(0);
grid.setPadding(new Insets(0, 0, 0, 0));
grid.add(anchor, 1, 0);
root.getChildren().add(grid);
ScrollPane scroll = new ScrollPane();
scroll.setHbarPolicy(ScrollBarPolicy.ALWAYS);
scroll.setVbarPolicy(ScrollBarPolicy.NEVER);
scroll.setContent(root);
setJs(scroll);
return new Scene(scroll, javafx.scene.paint.Color.WHITE);
}
private void createUI(final JFXPanel fxPanel)
{
Platform.runLater(new Runnable() {
#Override
public void run()
{
initFX(fxPanel);
}
});
}
public FxPanel2( JFXPanel fxPanel)
{
createUI(fxPanel);
}
}
The main class looks like ....
public class DemoToCheckUIAlignment extends JFrame
{
public static void main(String[] args)
{
final DemoToCheckUIAlignment demo = new DemoToCheckUIAlignment();
SwingUtilities.invokeLater(new Runnable() {
#Override
public void run() {
JFXPanel panel1 = new JFXPanel();
FxPanel1 fxObj1 = new FxPanel1(panel1);
JFXPanel panel2 = new JFXPanel();
FxPanel2 fxObj2 = new FxPanel2(panel2);
DemoToCheckUIAlignment frame = new DemoToCheckUIAlignment();
frame.setSize(800, 500);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JSplitPane chartSplitPane = new JSplitPane();
chartSplitPane.setOrientation(JSplitPane.VERTICAL_SPLIT);
chartSplitPane.setDividerLocation(200);
chartSplitPane.setDividerSize(2);
chartSplitPane.setTopComponent(panel1);
chartSplitPane.setBottomComponent(panel2);
demo.provideScrollSyncBetweenFXPanels(fxObj1.getJs(), fxObj2.getJs());
frame.getContentPane().add(chartSplitPane);
//frame.getContentPane().add(panel2);
frame.setVisible(true);
}
});
}
public static void provideScrollSyncBetweenFXPanels(final ScrollPane upperSP, final ScrollPane lowerSP)
{
lowerSP.hvalueProperty().addListener(new ChangeListener<Number>()
{
public void changed(ObservableValue<? extends Number> ov,
Number old_val, Number new_val)
{
upperSP.hvalueProperty().set(new_val.doubleValue());
}
});
}
}
Now to check the problem follow the simple steps...
Ofcorse run the program...
Scroll the bottom Panel ....that is FxPanel2...
And maximized the window .... The x - position for the inner contents is changed now...
which does not happen with Swing....
Here are the screen shots where the problem reproduce for the attached MCVE....Please go through the images....
You may use setFitToWidth of the ScrollPane Object to match a particular dimension. For more details you may refer to the link http://docs.oracle.com/javafx/2/ui_controls/scrollpane.htm at down the page, Resizing Components in the Scroll Pane, you may find more on the solution

How to create a circular bufferedimage rather than creating a rectangular one in Java using Graphics

I need to create a bufferedimage
(circular type) but I am able to create only rectangular type. Then I want to create a oval inside the bufferedimage with some configurations and finally i want to draw a rectangular icon inside the circular shape which should be inserted on the circular shape and not on the rectangular bufferedimage.
Now i am able to do the following
BufferedImage img = "SomeImage.png";
BufferedImage bfImage = new BufferedImage(200,200,BufferedImage.TYPE_INT_ARGB);
Graphics2D graphics = bfImage.createGraphics();
graphics.fillOval(0, 0, 200, 200);
graphics.drawImage(img, 0, 0, null);
(This creates a circular oval inside the bfImage object)
Now i need to draw "img" which is rectangular in shape of say 100*100 size.
This i can draw using
When i am doing this my final image is getting drawn in the Rectangular BfImage, which i dont want.I want the image "img" to be drawn in the circular oval and it should not come outside the boundaries of the circular oval shape.
In short instead of drawing my final image on the rectangular bfImage can i have a circular bfImage on which i can directly draw my image.
Any logic to do this in Java2D using graphics.
I've never encountered a "circular image" in the sense of a two dimensional array that is not in rectangular form. If all you are concerned about is that the pixels outside the circle are not visible, just set the alpha to 0 for those pixels. An easy way to do this is to fill the entire rectangular image with ARGB(0,0,0,0) first and then draw whatever else you want.
Also, not that if you intent to persist this buffer as an image file, you must make sure that you export/save to a format like PNG or TIFF that supports transparency.
As #justinzane says, you can't have a truly circular image. All BufferedImages will be rectangular.
But: You can achieve the effect you are after, by using the AlphaComposite class, and the rule AlphaComposite.SrcIn. I've added a fully running example, plus a screen shot below, the compose method is the important part.
public class AlphaCompositeTest {
private static BufferedImage compose(final BufferedImage source, int w, int h) {
BufferedImage destination = new BufferedImage(w, h, BufferedImage.TYPE_INT_ARGB);
Graphics2D graphics = destination.createGraphics();
try {
graphics.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
graphics.setColor(Color.BLACK); // The color here doesn't really matter
graphics.fillOval(0, 0, destination.getWidth(), destination.getHeight());
if (source != null) {
graphics.setComposite(AlphaComposite.SrcIn); // Only paint inside the oval from now on
graphics.drawImage(source, 0, 0, null);
}
}
finally {
graphics.dispose();
}
return destination;
}
public static void main(String[] args) throws IOException {
final BufferedImage original = ImageIO.read(new File("lena.png"));
final BufferedImage template = compose(null, original.getWidth(), original.getHeight());
final BufferedImage composed = compose(original, original.getWidth(), original.getHeight());
SwingUtilities.invokeLater(new Runnable() {
#Override public void run() {
JFrame frame = new JFrame();
frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
JPanel panel = new JPanel(new BorderLayout(10, 10));
panel.add(new JLabel("+", new ImageIcon(template), SwingConstants.LEFT), BorderLayout.WEST);
panel.add(new JLabel("=", new ImageIcon(original), SwingConstants.LEFT), BorderLayout.CENTER);
panel.add(new JLabel(new ImageIcon(composed)), BorderLayout.EAST);
frame.add(new JScrollPane(panel));
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
});
}
}
See for example the Compositing tutorial for more info and examples.

AndEngine, attaching 2 of the same entity affecting collision

I am creating a game similar to Glider PRO. In the game, you control a paper airplane and you use air vents to keep you from falling on the floor. When the airplane collides with the air vent, (using collidesWith method) it pushes the airplane up. Now here is the problem, when I attach 2 air vents to the scene, only the first attached air vent works. The second one doesn't seem to collide with the airplane. I use the onManagedUpdate method in each air vent to check for the collision. This is my first time coding with AndEngine so any help on this will be greatly appreciated.
Here is the AirVent code:
public class AirVent extends Rectangle
{
private Sprite sprite;
private Glider glider;
public AirVent(float pX, float pY, float pWidth, float pHeight,
VertexBufferObjectManager pVertexBufferObjectManager,
ITextureRegion pITextureRegion)
{
super(pX, pY, pWidth, pHeight, pVertexBufferObjectManager);
sprite = new Sprite(0, 0, pITextureRegion, pVertexBufferObjectManager);
sprite.setSize(pWidth, pWidth / 2);
sprite.setPosition((pWidth / 2) - (sprite.getWidth() / 2), pHeight
- sprite.getHeight());
this.attachChild(sprite);
this.setAlpha(0);
}
public Sprite getSprite()
{
return sprite;
}
public void checkCollision()
{
if (glider.collidesWith(this))
{
glider.setGravity(glider.getConstantGravity() * -1f);
}
else
{
glider.setGravity(glider.getConstantGravity());
}
}
public void applyGliderInteraction(Glider glider)
{
this.glider = glider;
}
#Override
public void onManagedUpdate(float secondsElapsed)
{
this.checkCollision();
super.onManagedUpdate(secondsElapsed);
}
}
And the MainActivity code part:
#Override
protected Scene onCreateScene()
{
// TODO Auto-generated method stub
// 1 - Create new scene
final Scene scene = new Scene();
Sprite backgroundSprite = new Sprite(0, 0, this.mBackground, getVertexBufferObjectManager());
scene.attachChild(backgroundSprite);
roomChanger = new RoomChanger(0, 0, screenWidth, screenHeight, getVertexBufferObjectManager(), scene);
// 2 - Create the player
player1 = new Glider(339, 174, this.mPlayerGlider1, getVertexBufferObjectManager())
{
#Override
public void onManagedUpdate(float secondsElapsed)
{
if (player1.getLife() == 0)
{
// Execute your actions.
finish();
}
super.onManagedUpdate(secondsElapsed);
}
};
scene.attachChild(player1);
airVent = new AirVent(200, 100, 100, 400, getVertexBufferObjectManager(), this.mAirVent);
airVent.applyGliderInteraction(player1);
airVent2 = new AirVent(500, 100, 100, 400, getVertexBufferObjectManager(), this.mAirVent);
airVent2.applyGliderInteraction(player1);
scene.attachChild(airVent);
scene.attachChild(airVent2);
createControllers();
return scene;
}
I found the problem. The checkCollison() method works, but when I add a second AirVent, the if/else statements battle each other. Removing the else statement from the checkCollision() method fixed the issue but right now, that is not the way I want my game to behave.

How to draw a horizontal line at the SOUTH position of the BorderLayout of a Container?

I have a Container whose Layout is BorderLayout. I want to draw a horizontal line at the SOUTH position because this Container is drawn repeatedly so I want to delimit each by the horizontal line.
Here is the code:
tList = new List(tModel);
tList.setListCellRenderer(new CTable(listclient));
public class CTable extends Container implements ListCellRenderer {
private Label pic = new Label("");
private Container cnt;
private Label name = new Label("");
private Label credit = new Label("");
private ligneHorizontal ligne;
private Font fontLibelle = (MenuPrincipalForm.r).getFont("FontTextFieldBold");
private Label focus = new Label("");
public CTable(Vector valeur)
{
setLayout(new BorderLayout());
addComponent(BorderLayout.WEST, pic);
cnt = new Container(new BoxLayout(BoxLayout.Y_AXIS));
name.getStyle().setBgTransparency(0);
name.getStyle().setFont(fontLibelle);
credit.getStyle().setBgTransparency(0);
cnt.addComponent(name);
cnt.addComponent(credit);
ligne = new ligneHorizontal(100);
cnt.addComponent(ligne);
addComponent(BorderLayout.CENTER, cnt);
focus.getStyle().setBgTransparency(100);
}
public Component getListCellRendererComponent(List list, Object value, int index, boolean isSelected)
{
if ("-".equalsIgnoreCase(String.valueOf(value)))
{
name.setText(" - ");
credit.setText("Encours : - Impayés : -");
pic.setIcon(null);
}
else
{
if (index%2 == 0)
this.setUIID("evenRowsCell");
else
this.setUIID("oddRowsCell");
name.setText("123456789012 - Rasolofomanana Marc");
credit.setText("Crédits : 15.000 (Ar) Impayés : 10.000 (Ar)");
pic.setIcon(null);
}
return this;
}
public Component getListFocusComponent(List list)
{
return focus;
}
}
public class ligneHorizontal extends Label {
public ligneHorizontal(int l)
{
String t = "";
do
{
t.concat(new String("-"));
}
while(t.length()<l);
this.setText(t);
this.setPreferredH(5);
this.getStyle().setBgColor(0);
}
}
And also I want to know how to coloriate even rows and odd rows of the List because I tried but the color is not get until I click on the cell.
Ok , I found the solution : I derived BackgroundPainter where in the public void paint(Graphics g,Rectangle rect) method I draw the line ( g.drawLine(rect.getX(), rect.getY()+h-1, rect.getX()+w, rect.getY()+h-1); ).
So when I want to draw a line in the container then I write myContainer.getStyle().setBgPainter(new derivedClassName(myContainer));
add Label with preferred height 5, with black bg color between containers

Resources