I'm making a battle card game for an uni project (Hearthstone)
The "minion" cards on board have health and attack, and those are constantly changing, I'm trying to make a compound component that would be a center ImageIcon with two "squares" at the bottom left and right, representing the card's current Health and Attack, and one at the top left, representing its cost, all these as StringProperty
I'm really clueless on how to approach this, maybe a coumpound component isn't even necessary
This is an example of how a hearthstone card looks :
Use a StackPane. Put the image on the bottom, and then an AnchorPane on the top. Put a Text in each of the three cornerns, and bind the textProperty() of each to one of the StringProperties. Something like this:
public class BattleCard extends Application {
private static Label label;
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) {
primaryStage.setTitle("Hello World!");
label = new Label();
label.setText("Waiting...");
StackPane root = new StackPane();
root.getChildren().add(new CardPane());
primaryStage.setScene(new Scene(root, 350, 420));
primaryStage.show();
}
public class CardPane extends StackPane {
public CardPane() {
ImageView cardImage = new ImageView(new Image("http://i.stack.imgur.com/1ljQH.png"));
AnchorPane anchorPane = new AnchorPane();
getChildren().addAll(cardImage, anchorPane);
Text costText = new Text("Cost");
Text healthText = new Text("Health");
Text attackText = new Text("Attack");
AnchorPane.setTopAnchor(costText, 0d);
AnchorPane.setLeftAnchor(costText, 0d);
AnchorPane.setBottomAnchor(healthText, 0d);
AnchorPane.setLeftAnchor(healthText, 0d);
AnchorPane.setBottomAnchor(attackText, 0d);
AnchorPane.setRightAnchor(attackText, 0d);
anchorPane.getChildren().addAll(costText, healthText, attackText);
}
}
}
Related
I have a code written using javafx and java 11. As I showed in the below code snippet, when I move my ImageView to right of the scene, The ImageView disappears.
At first:
and then after moving it using arrow keys with the help of scene event listener:
then:
and finally:
I don't use fxml. Here is my demo which has the problem too.
public class HelloApplication extends Application {
public String fetchResource(String path) {
return Objects.requireNonNull(getClass().getResource(path)).toString();
}
#Override
public void start(Stage stage) throws IOException {
Rectangle r = new Rectangle(100, 100);
ImageView spaceShip = new ImageView(fetchResource("spaceShip.png"));
spaceShip.setFitHeight(100);
spaceShip.setFitWidth(100);
spaceShip.setX(0);
spaceShip.setY(0);
EventHandler<KeyEvent> keyListener = event -> {
if (event.getCode() == KeyCode.RIGHT) {
spaceShip.setX(spaceShip.getX() + 20);
}
};
Group game = new Group(spaceShip);
Scene scene = new Scene(game, 1840, 1080);
scene.setOnKeyPressed(keyListener);
stage.setTitle("Hello!");
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch();
}
}
I should mention that I create a rectangle and check the scenario with that, And there was not any problem. I think there is some problem with ImageView.
I couldn't reproduce the issue with your code, but I could with SceneBuilder. You may get the desired result if you wrap the Group in a Pane (at least it works in SceneBuilder).
Group game = new Group(spaceShip);
Pane pane = new Pane(game);
Scene scene = new Scene(pane, 1840, 1080);
stage.setScene(scene);
stage.show();
I want to set specific tick on my slider.
For exemple:
[---¦---¦-----------¦------O-¦--]
[-----] : The slider
¦ : The tick
O : The cursor
The purpose is to create a timeline where we can see the highlight.
You can compose your own widget to put the ticks up against a slider. The only tricky bit is to make sure that you setPickOnBounds() to false for the slider. Also putting the ticks into a VBox and then setPickOnBounds() to true for the VBox makes it easier to click on the ticks:
public class SliderSample extends Application {
public static void main(String[] args) {
launch(args);
}
private static Image arrowImage = new Image("https://www.shareicon.net/data/12x12/2015/09/01/94166_arrow_512x512.png");
#Override
public void start(Stage primaryStage) {
Scene scene = new Scene(new SliderWithTicks(), 300, 300);
primaryStage.setScene(scene);
primaryStage.show();
}
class SliderWithTicks extends Pane {
private Slider slider = new Slider(0, 100, 30);
SliderWithTicks() {
getChildren().addAll(new Tick(80), new Tick(20), new Tick(30), slider);
slider.minWidthProperty().bind(widthProperty());
slider.setPickOnBounds(false);
}
class Tick extends VBox {
Tick(int value) {
getChildren().add(new ImageView(arrowImage));
setPickOnBounds(true);
setOnMouseClicked(evt -> slider.adjustValue(value));
translateXProperty().bind((slider.widthProperty().subtract(16)).multiply(value / slider.getMax()).add(2));
translateYProperty().set(12);
}
}
}
}
I am building an application that has 2 SubScenes, one for GUI and one for displaying 3D models (in my case OBJ).
For the import of the OBJ file I use the ObjModelImporterJFX library by InteractiveMesh.
Like the title says and as seen in this picture the models start to glitch when they are handled by a SubScene. It seems like some covered parts that should not be visible are rendered like they were. Just for comparison this is how it looks normally, when the models are handled direcly by the scene.
Here is my code:
public class Main extends Application{
#Override
public void start(Stage stage) throws Exception{
Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
PerspectiveCamera camera = new PerspectiveCamera(true);
Group model = loadOBJ("course.obj");
Group course = new Group(model);
BorderPane borderPane = new BorderPane();
Pane pane1 = new Pane(course);
Pane pane2 = new Pane(root);
SubScene subScene1 = new SubScene(pane1, 1000, 720);
subScene1.setCamera(camera);
SubScene subScene2 = new SubScene(pane2,500,500);
borderPane.setLeft(subScene1);
borderPane.setRight(subScene2);
Scene scene = new Scene(borderPane, 1280,720, true);
stage.setScene(scene);
stage.show();
}
private Group loadOBJ(String fileName){
URL url = getClass().getResource(fileName);
Group modelRoot = new Group();
ObjModelImporter importer = new ObjModelImporter();
importer.read(url);
for (MeshView view : importer.getImport()){
modelRoot.getChildren().add(view);
}
return modelRoot;
}
public static void main(String[] args){
launch(args);
}
}
I hope that someone has an idea why this is. Thanks in advance :)
UPDATE: To fix this enable depthBuffer by changing the constructor of the SubScene from
SubScene subScene1 = new SubScene(pane1, 1000, 720);
to
SubScene subScene1 = new SubScene(pane1, 1000, 720, true, null);
In below code, I have a box added in scene. I am printing the mouse event coordinate. Coordinates are fine when I am not clicking on the box but as soon as I click on the box I get some different set of coordinate relative to some different node. I am trying to get the normalized coordinate, relative to scene only, even if I click on the box. I cant use me.getSceneX()/Y() and cant set box as mouse transparent. So how to carry out this transformation. Thanks.
public class PointConversion extends Application
{
private final static Group worldRoot = new Group();
private final PerspectiveCamera camera = new PerspectiveCamera(true);
private final static Scene scene = new Scene(worldRoot, 1100, 800);
public static void main(String[] args)
{
launch(args);
}
#Override
public void start(Stage primaryStage)
{
camera.setNearClip(1.0);
camera.setTranslateZ(-6000);
camera.setFarClip(100000.0);
worldRoot.getChildren().add(camera);
scene.setCamera(camera);
primaryStage.setScene(scene);
primaryStage.show();
scene.setOnMousePressed(me ->
{
Point2D mousePoint = new Point2D(me.getX(), me.getY());
if(!(me.getTarget() instanceof Scene))
{
PickResult pickResult = me.getPickResult();
mousePoint = pickResult.getIntersectedNode().localToScene(mousePoint);
}
System.out.println("me.getSource() : " + me.getTarget() + " mousePoint:" + mousePoint);
});
final PhongMaterial blueMaterial = new PhongMaterial();
blueMaterial.setDiffuseColor(Color.web(Color.CRIMSON.toString(), 0.25));
blueMaterial.setSpecularColor(Color.web(Color.CRIMSON.toString(), 0.25));
Box cubiod = new Box(500, 500, 500);
cubiod.setMaterial(blueMaterial);
worldRoot.getChildren().add(cubiod);
}
}
I've been trying to make my application to switch between scenes. Here is a copy of part of the code. The credits scene simply has a back button which should return me to the main scene.
When I try to click on credits button on main scene it is becoming white a white screen. I believe that there is a better way to solve this problem could you give me some advices ?
public class Application {
public static void main(String[] args) {
javafx.application.Application.launch(GUI.class);
}
}
public class GUI extends Application {
#Override
public void start(Stage primaryStage) {
Scene mainScene, creditsScene = null;
mainScene = getMainScene(primaryStage, creditsScene);
creditsScene = getCreditsScene(primaryStage, mainScene);
primaryStage.setTitle("Test application");
primaryStage.setScene(mainScene);
primaryStage.show();
}
private Scene getMainScene(Stage primaryStage, Scene creditsScene) {
final Button credits = new Button("Credits");
credits.setOnAction((ActionEvent e) -> {
primaryStage.close();
primaryStage.setScene(creditsScene);
primaryStage.show();
});
VBox x = new VBox(50);
x.setAlignment(Pos.CENTER);
x.getChildren().addAll( run, displayInfo,
label1, displayInfo, textField, submitName, credits, exit);
//scene size
Scene scene = new Scene(x, 650, 900);
return scene;
}
private Scene getCreditsScene(Stage primaryStage, Scene main) {
final Button back = new Button("Back");
back.setOnAction((ActionEvent e) -> {
primaryStage.setScene(main);
});
VBox x = new VBox(50);
x.getChildren().addAll(back);
Scene credits = new Scene(x, 650, 900);
return credits;
}
Try to switch order of strings:
mainScene = getMainScene(primaryStage, creditsScene);
creditsScene = getCreditsScene(primaryStage, mainScene);
here you pass to getMainScene null.