How to create a menu in a Qt3d scene - menu

I want to build a game and therefore I would like to create a game menu. This menu should be in front of the scene, but not totally hide it, somehow sticking at the lens of the camera. My first idea was to create planes as buttons and position them at the same position as the nearplane and move it with the camera.
Is there also a easier way to do this?
(I also saw this, but I don't know how to do it without qml)

The way games make HUDs or menus is by (I think) using orthographic projection which makes it unnecessary to have them at the near-plane (and gets rid of some side effects). I didn't find anything nicer than this to describe orthographic projections.
So to implement this you would have two framegraph branches:
Draw your objects as normal
Draw your menu using orthographic projection
The elements of the menu could be planes like you said. You can add QObjectPickers to the planes and then react to the clicks.
I have implemented an example for the opposite thing: I created a framegraph that draws a background image behind the 3D scene. It needs adjusting for rescaling the window but should give you the general idea. You can find the project here.
(This is a related question regarding how to put normal Qt widgets like QPushButton in a Qt3D window.)

Related

Layout management inside Cairo DrawingArea/Context?

I have a window in mono gtk#, which has lot of VBoxes & HBoxes. These boxes contain some buttons, labels, and some other widgets also. Now I need to make this window alone to transparent.
I created one drawingArea by referring zetcode page.
But inside this drawing area I'm not able to do the arrangements of my widgets, one Move function is available, but it is not much use for me. So how do I do widget arrangement neatly inside a drawingArea?

How to load textures from a spritesheet in Godot 3

I've just got started with Godot yesterday, and I'm starting a game. I drew a few spritesheets for it. It seems much more efficient to pack all of the frames of an animation into a single image file, right?
Anyway, in Godot I have an AnimatedSprite, who of course has a SpriteFrames property, or whatever it's called. I want to split my spritesheet up into multiple images so that I can use each image as a separate frame in the animation, but as far as I can see Godot provides no such feature. Is this the case?
I've been searching for an answer on the web for a while now, and I can't find anything relevant.
I'd be very surprised if I can't do this in Godot, since I can do it in just about every other game engine I've seen.
Thanks!
(Just to clarify, I want to (programmatically or otherwise,) split a spritesheet into multiple textures, within Godot.)
Click New SpriteFrames in the Frames property menu of the AnimatedSprite node. Now click on the just created SpriteFrames next to the name of the Frames property. Animation Frames window should appear.
Click this Add frames from a Sprite Sheet button. Select your spite sheet file, set grid sizes and finally select individual frames from that sprite sheet.
(This works for me in Godot v3.2.2)
As it says: "Sprite node that can use multiple textures for animation."
Source: http://docs.godotengine.org/en/3.0/classes/class_animatedsprite.html
What you are searching for is using normal Sprite(2D), and set regions for it if you are using AnimationPlayer at each frame.
Example: https://www.youtube.com/watch?v=IGHcscKpA7Y
If you want to do all programmically, you just have to set the sprite to Sprite(2D), and then:
func _ready():
set_region(true)
set_region_rect(Rect2(positionx,positiony,width,height))
but i guess using AnimationPlayer is better option.
This is not tested because i should be sleeping right now, but it should work.

how to change layers for the same background scene

I am making a menu for my cocos2d game. I would like to know if there is a way I can change layers within the same scene, similar to the pop and replace scene? I want to use this approach to keep the background unchanged as I navigate through the main menu hierarchy. How can I achieve this? I wouldn't mind another approach that would be more effective. Thanks.
As far as I know, there's no specific mechanism; just keep a reference to each layer inside your class, add them to the root scene, and show/hide them in the right moment.

Draw flowchart on webpage as navigation menu

I need to draw a simple "flow chart" that is used to navigation on my site. What I have been doing now is that I've drawn this MSPaint, then I add pixelmaps so that it navigate the user to different pages according to where in the pictures he clicks.
What I also want is that the page the user is on, changes colour (for instance, if user clicks on step 3, he navigates to page 3, and the page 3 changes colour to to green).
What is the best method to implement this? SVG? Canvas? JavaScript? CSS?
All answers that can point me to the right direction is very welcome.
Your first mistake here, I'd say, is that you're using pixelmaps; for something as simple as this, I'd recommend just making it a pure HTML/CSS entity, then giving a .active class or some equivalent to whatever page you're actually on. This is the easiest way of doing things in my books, and it has the benefit of degrading gracefully if the image fails to load for whatever reason.
That said, if you don't want to do it that way and are really attached to the static image for whatever reason, you could have variants of that image where the specific step is highlighted, and display whatever image is appropriate for that page. That would accomplish what you're looking for, but I wouldn't recommend it--it's very heavy in terms of network usage when compared with an HTML solution.
Now, bear in mind you could draw this with canvas, but that seems like overkill in this situation if you're basically just drawing a navbar; if you were drawing a full flowchart already and just wanted to reuse that code, well, that would be a different story; but in this case, with static imagery, just use HTML--it's just faster and easier.

How do I make a circle move on events?

I'm pretty new to javafx so I'm trying to learn here so please be reasonable and don't dis away my question, I really appreciate any help at all, thanks!
I would like to know how I could move an object, let's say this circle on different events, like keypress or mouseclick, mousemove, whatever.
Circle circle = new Circle();
circle.setCenterX(100.0f);
circle.setCenterY(100.0f);
circle.setRadius(50.0f);
Do I need to use that KeyFrame thing I saw on the javafx site tutorial, or how does this work?
I would not have asked this here if I weren't feeling so lost, honestly.
So to make this clear: What is the code for moving objects that I created, by using events?
EDIT: By moving it I mean, press up key and it moves up by a few pixels, transform it maybe, with another key, or click somewhere on the scene and make it move there instantly or travel there with a certain speed. I don't have to redraw it like you need to with html5 canvas, I hope, right?
I don't have to redraw it like you need to with html5 canvas, I hope, right?
Not if you are using a standard JavaFX scene graph as opposed to a JavaFX canvas.
I would like to know how I could move an object, let's say this circle on different events, like keypress or mouseclick, mousemove, whatever
There are three ways to move a Shape:
You can adjust the shape's geometry (e.g. the centerX/centerY properties of a circle).
You can adjust the shape's layout (e.g. it's layoutX/layoutY properties).
You can adjust the shape's translation (e.g. it's translateX/translateY properties).
You can think of the layout as the home position for the object; i.e. where it should normally be in the context of it's parent group. You can think of it's translation transform as a temporary position for an object (often used when the object is being animated).
If you are using a layout pane such as a VBox or TilePane, then the layout pane will handle setting the layout co-ordinates of the child node for you. If you are using a simple Group or a plain Pane or Region, then you are responsible for setting the correct layout values for the child nodes.
To listen for events, set event handlers on Nodes or Scenes.
Here is a small sample app which demonstrates the above. It places the object to be moved inside a Group and modifies the position of the object within a Group in response to various events.

Resources