Im making a game on WP7. I have added a button in it. what i want to do is that whenever i touch the button, the button sprite should change its frame from 0 to 1 (0 being the button-up frame and 1 being the button-pressed frame). i have added the sprite sheet for the button which contains two frames only. the size is also okay.
to summarize, i want to do this:
1) when touch the button
2) button-pressed frame should be drawn and come back to original frame after 1 or 2 sec. (just like it happens in every game with buttons).
Sounds more like a design issue then an implementation issue. Basically, you need an idea getting you started. I'm not too familiar with WP7 specifically, but I'll show you the basic design you could use; with some sudo code you can fill in later.
class Button
{
private Point CellSize;
public Point Position {get; set;}
private Texture2D buttonSheet;
public Button (Texture2D texture, Point CellSize)
{
this.buttonSheet = texture;
this.CellSize = CellSize;
}
public bool isPressed {get; private set;}
public void Update (bool isPressed)
{
this.isPressed = isPressed;
}
public void Draw (SpriteBatch sb)
{
Rectangle Source = new Rectangle (0,0,CellSize.X,CellSize.Y);
if (this.isPressed)
Source = new Rectangle (CellSize.X * 1, CellSize.Y * 1, CellSize.X, CellSize.Y);
sb.Draw (this.buttonSheet, new Rectangle(this.Position.X,this.Position.Y,CellSize.X,CellSize.Y), Source, Color.White);
}
}
And then to use it:
class Game1
{
Button Start = new Button(new Texture2D() /*load and include your texture here*/, new Point (100, 50) /* 100 wide, 50 tall cells */);
public Update (GameTime gt)
{
bool clicked = false /* Put code here to check if the button is pressed */;
Start.Update(clicked);
}
public Draw (SpriteBatch spriteBatch)
{
Start.Draw(spriteBatch);
}
}
(note haven't tested this code)
Hope that helps you get started, feel free to elaborate if you want more info on a specific part.
Max
Related
Just as a preface, I am very new to programming in JavaFX. (We had an introduction to JavaFX in one of my classes last semester, and for the last month or so I've been working on making a simple game in JavaFX.)
An issue I've run into is trying to detect the collision of a Pane within one StackPane with the Pane inside another StackPane. Specifically, I have a "Player" node in the Game class ("Player" extends abstract "Sprite" which extends StackPane) along with some "Asset" nodes ("Asset" being an abstract parent class that like "Sprite" also extends StackPane). Both "Player" and every "Asset" node are comprised of an ImageView and Pane objects that are to be the "boundaries" of the node.
Here's how I'm attempting to track collisions in the Game class, but it's not working:
protected void update() {
// Call playerBoundsHandler in update cycle
for (Asset asset : this.gameArea.getAssets()) {
playerBoundsHandler(asset);
} // for
} // update
private void playerBoundsHandler(Asset asset) {
for (Pane boundary : asset.getAssetBoundaries()) {
if (player.getPlayerStandingAreaBox()
.getBoundsInParent()
.intersects(boundary.getBoundsInParent())) {
// do stuff here
} // if
} // for
} // playerBoundsHandler
I'm guessing there's something wrong with using getBoundsInParent() here since I'm trying to track the intersection of child nodes within two separate nodes, but I have no idea what the solution is. Is there something I need to do with getBoundsInLocal or some other method?
Here's the relevant part of the Player class for clarification's sake:
/**
* Player class constructor.
* Player class extends "Sprite" (abstract class)
* which extends StackPane.
*/
public Player(double xSpawn, double ySpawn) {
// Add Player Standing Box (a Pane situated at the feet of the Player sprite)
this.playerStandingAreaBox = new Pane();
// width, height, etc. set here
this.getChildren().add(playerStandingAreaBox);
this.setAlignment(playerStandingAreaBox, Pos.BOTTOM_CENTER);
} // Player constructor
public Pane getPlayerStandingAreaBox() {
return this.playerStandingAreaBox;
} // getPlayerStandingAreaBox
The Asset child classes follow a design almost identical to the Player class here. In case it's also needed for clarification, here's the "Highway" class:
public class Highway extends Asset {
public Highway(double translateX, double translateY) {
// call super here
setAssetBoundaries();
} // Highway constructor
#Override
setAssetBoundaries() {
Pane boundaryOne = new Pane();
// set boundaryOne settings
this.getChildren().add(boundaryOne);
this.assetBoundaries.add(boundaryOne);
Pane boundaryTwo = new Pane();
// set boundaryTwo settings
this.getChildren().add(boundaryTwo);
this.assetBoundaries.add(boundaryTwo);
} // setAssetBoundaries
/**
* assetBoundaries is an ArrayList<Asset> object also inherited.
* getAssetBoundaries() is inherited from the "Asset" class
* which returns assetBoundaries.
*/
The screenshot below shows my Player sprite (don't judge the awful pixel art! I already know the guy's right arm looks janky and the rifle looks ridiculous!) with his standing box highlighted in red, and the boundaries of a "Highway" Asset highlighted in yellow at both the very top and very bottom. I want to register when the Player's box intersects one of the boxes of the Highway.
Player and Highway
Thanks, James_D. The following change does exactly what I want it to do.
private void playerBoundsHandler(Asset asset) {
for (Pane boundary : asset.getAssetBoundaries()) {
Bounds boundaryBoundsInScene = boundary.localToScene(boundary.getBoundsInLocal());
Bounds playerStandingBoxBoundsInScene = player.getPlayerStandingBoxArea()
.localToScene(player.getPlayerStandingBoxArea().getBoundsInLocal());
if (boundaryBoundsInScene.intersects(playerStandingBoundsInScene)) {
// do stuff here
} // if
} // for
} // playerBoundsHandler
I've got an Editor which is tall enough to accommodate multiple lines of input. The editor is at the bottom of the screen if it matters. Once multiple lines are entered, if you move the cursor up a line, the entire view shifts downward, so the line you just left is now obscured by the keyboard. I'd like it to not do this unless the line the cursor is on is either off screen or close to being off screen. Sort of like how the built in Android message app works. Here's what I mean in pictures.
Default state, everything looks good. We have 3 lines of input
I move the cursor up one line: notice that the entire view has shifted down one line and so "line 3" is now obscured. I don't want this behavior (it among other things hides some UI elements).
This is the Android messaging app. This is the behavior I want: when you move the cursor to that next line, the view doesn't just shift downward. If you have enough lines to scroll past the visible area, Android just shifts the text and not the entire view to accommodate it.
In essence, I just want the contents of the editor to shift (when appropriate) and not the entire window.
I managed to figure it out. Firstly, in MainActivity.cs, after the LoadApplication call, I added this:
Xamarin.Forms.Application.Current.On<Xamarin.Forms.PlatformConfiguration.Android>().UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize);
Using the default or .Pan didn't work at all. Note that just doing this didn't fix the issue. I also had to take the class that's described here and use it. Without that class, things didn't work correctly. Also the "alternative method" described on that page didn't work (which was basically just changing the soft input mode adjust).
In the event that the link I mentioned dies, here's the class. I did slightly modify it so that by default it is not enabled. You just set Disabled = false on it to enable it. Also you call the static method Init to initialize the class.
public class AndroidBug5497WorkaroundForXamarinAndroid
{
private readonly View _childOfContent;
private readonly FrameLayout.LayoutParams _frameLayoutParams;
private int _usableHeightPrevious;
public static AndroidBug5497WorkaroundForXamarinAndroid Instance { get; private set; }
private bool _disabled = true;
public bool Disabled
{
get => _disabled;
set
{
if (_disabled != value)
{
_disabled = value;
if (_disabled)
_childOfContent.ViewTreeObserver.GlobalLayout -= PossiblyResizeChildOfContent;
else
_childOfContent.ViewTreeObserver.GlobalLayout += PossiblyResizeChildOfContent;
}
}
}
public static void Init(Activity activity)
{
if (Instance != null)
return;
Instance = new AndroidBug5497WorkaroundForXamarinAndroid(activity);
}
private AndroidBug5497WorkaroundForXamarinAndroid(Activity activity)
{
FrameLayout content = (FrameLayout)activity.FindViewById(Android.Resource.Id.Content);
_childOfContent = content.GetChildAt(0);
_frameLayoutParams = (FrameLayout.LayoutParams)_childOfContent.LayoutParameters;
}
private void PossiblyResizeChildOfContent(object sender, EventArgs e)
{
int usableHeightNow = ComputeUsableHeight();
if (usableHeightNow != _usableHeightPrevious)
{
var usableHeightSansKeyboard = _childOfContent.RootView.Height;
var heightDifference = usableHeightSansKeyboard - usableHeightNow;
_frameLayoutParams.Height = usableHeightSansKeyboard - heightDifference;
_childOfContent.RequestLayout();
_usableHeightPrevious = usableHeightNow;
}
}
private int ComputeUsableHeight()
{
Rect r = new Rect();
_childOfContent.GetWindowVisibleDisplayFrame(r);
return (r.Bottom - r.Top);
}
How can I prevent column width resizing? I have a table, and I'm wondering if I can simply disable the option to drag to resize width of the columns. Is there any way to do this, or will I have to manually set the max and min width of each column just so that it can't be manipulated by the user? The problem with this is that the text in the title/header of my table is smaller than what's in the row underneath it. Setting the width to the column width forces it smaller, and then you can't see the info in the cell underneath.
Also, if there's a way to disable rearranging the columns, that'd be nice too. I basically want what I have set to not be changed at all. If this can't be done, I might just replace each table with an image of itself, so that it can't be manipulated at all.
Prevent Resizing Columns
From here, we can know that setResizable(boolean) allows you to choose whether the user can resize a column. Setting the max and min width to the same value does prevents the user from resizing the column, but not a preferred method. Also, the user will see the resizing cursor but not the default cursor when attempting to resize the column.
Prevent Reordering Columns
JavaFX 9
For preventing the user from reordering the columns, there isn't a straight-forward solution until JavaFX 9, which introduces setReorderable(boolean), isReorderable(), reorderableProperty methods, and the reorderable field in the TableColumnBase class. Here is a snippet of the source code:
package javafx.scene.control;
//some imports and JavaDoc comments
#IDProperty("id")
public abstract class TableColumnBase<S,T> implements EventTarget, Styleable {
//some code
// --- Reorderable
/**
* A boolean property to toggle on and off the 'reorderability' of this column
* (with drag and drop - reordering by modifying the appropriate <code>columns</code>
* list is always allowed). When this property is true, this column can be reordered by
* users simply by dragging and dropping the columns into their desired positions.
* When this property is false, this ability to drag and drop columns is not available.
*
* #since 9
*/
private BooleanProperty reorderable;
public final BooleanProperty reorderableProperty() {
if (reorderable == null) {
reorderable = new SimpleBooleanProperty(this, "reorderable", true);
}
return reorderable;
}
public final void setReorderable(boolean value) {
reorderableProperty().set(value);
}
public final boolean isReorderable() {
return reorderable == null ? true : reorderable.get();
}
//some code
}
If your application bases on JavaFX 9, then you are lucky. Simply invoke setReorderable(false) on your desired table column and there you go.
JavaFX 8
If your application bases on JavaFX 8 or older versions, you can use com.sun.javafx.scene.control.skin.TableHeaderRow, which has isReordering, setReordering, reorderingProperty methods, and reorderingProperty field. Here is a snippet of the source code:
package com.sun.javafx.scene.control.skin;
//some imports and JavaDoc comments
public class TableHeaderRow extends StackPane {
//some code
private BooleanProperty reorderingProperty = new BooleanPropertyBase() {
#Override protected void invalidated() {
TableColumnHeader r = getReorderingRegion();
if (r != null) {
double dragHeaderHeight = r.getNestedColumnHeader() != null ?
r.getNestedColumnHeader().getHeight() :
getReorderingRegion().getHeight();
dragHeader.resize(dragHeader.getWidth(), dragHeaderHeight);
dragHeader.setTranslateY(getHeight() - dragHeaderHeight);
}
dragHeader.setVisible(isReordering());
}
#Override
public Object getBean() {
return TableHeaderRow.this;
}
#Override
public String getName() {
return "reordering";
}
};
public final void setReordering(boolean value) { reorderingProperty().set(value); }
public final boolean isReordering() { return reorderingProperty.get(); }
public final BooleanProperty reorderingProperty() { return reorderingProperty; }
//some code
}
The methods and fields work the same as the one in TableColumnBase in JavaFX 9, just with different names.
You want to obtain the TableHeaderRow object as a children of the skin of the TableView:
TableView<MyType> table = new TableView<MyType>();
//some code
//DISPLAY THE TABLE OR GETSKIN WILL RETURN NULL
com.sun.javafx.scene.control.skin.TableHeaderRow header = null;
for (Node node : table.getSkin().getChildren())
if (node instanceof com.sun.javafx.scene.control.skin.TableHeaderRow)
header = (com.sun.javafx.scene.control.skin.TableHeaderRow) node;
if (header == null); //Table not rendered
header.setReorderable(false);
You must have the TableView rendered before accessing the skin, because the TableViewSkin obtained from TableView.getSkin() is a visual representation of user interface controls. As the official JavaFx JavaDoc says, Skin is a
Base class for defining the visual representation of user interface
controls by defining a scene graph of nodes to represent the skin. A
user interface control is abstracted behind the Skinnable interface.
Therefore, the Skin will be null if the TableView is not rendered because there is nothing visual to represent.
Note that the second method cannot be used in Java 9 or later due to the modules in Java API block your access towards any sun packages.
EDIT:
In JavaFX 8 or older, there is a method called impl_setReorderable(boolean) which is deprecated, but works flawlessly, pretty much same as setReorderable(boolean) in JavaFX 9.
This is a follow up to my last question:
How can I draw a circle to the screen with PlayN?
For my simple case, I want to programmatically create a single colored circle and move it across a 2-D plain (doesn't need to use box2d lib).
A real-world example would likely involve animating several circles. Two real-world examples for this case (sorry, I had to remove the links -- not enough karma!):
Browsmos for Chrome
Ants AI Challenge
It was suggested in response to my last question that I would want to use the ImmediateLayer class, so I am looking to understand how to properly incorporate this into my game loop.
Here's is my code sample:
public class SimpleCircleAnimation implements Game {
// Surface
private GroupLayer rootLayer;
private ImmediateLayer surface;
private Canvas canvas;
private Circle circle;
private CanvasImage circleImage;
#Override
public void init() {
// create root layer
rootLayer = graphics().rootLayer();
// a simple circle object
int circleX = 0; int circleY = 0;
int circleRadius = 20;
circle = new Circle(circleX, circleY, circleRadius);
// create an immediate layer and add to root layer
ImmediateLayer circleLayer = graphics().createImmediateLayer(new ImmediateLayer.Renderer() {
public void render (Surface surf) {
circleImage = graphics().createImage(circle.radius*2, circle.radius*2);
canvas = circleImage.canvas();
canvas.setFillColor(0xff0000eb);
canvas.fillCircle(circle.radius, circle.radius, circle.radius);
surf.drawImage(circleImage, circle.x, circle.y);
}
});
rootLayer.add(circleLayer);
}
#Override
public void paint(float alpha) {
}
#Override
public void update(float delta) {
// move circle
int newX = circle.x + 4; int newY = circle.y + 4;
circle.setPoint(newX, newY);
}
#Override
public int updateRate() {
return 25;
}
}
This successfully moves the circle diagonally down the screen from left to right. A couple questions:
Is this implemented properly?
In the case of multiple animated circles, is the idea with ImmediateLayer that you would create a circle image for each circle within the Renderer callback? Or would you perhaps create an Immediate Layer for each circle and add those to the root layer?
I would not use ImmediateLayer wiht render (Surface surf) adapter. Here u have, inside the render method creation of an image
circleImage = graphics().createImage(circle.radius*2, circle.radius*2);
just put this in the paint method
surf.drawImage(circleImage, circle.x, circle.y);
using the normal layer and u should be fine
Painting is done in paint method, and do not put calculations there
Update is for calculations, and physics oriented stuff
I discovered a detailed practical example of ImmediateLayer usage in the Cute Game source within the PlayN Samples:
CuteGame.java (code.google.com)
I am writing an info-screen program. I created a full-screen widget and draw contents onto it.
In order to extend the life cycle of the TFT-display device, I want to implement a pixel-shifting feature. With other words, in every X minutes, I shift the screen to left/right/top/down for Y pixels.
My approach is as follows:
I use two layers (two QWidget).
I paint contents on the top layer.
When a pixel-shifting is performed, I just move the top layer for specified offset.
And then fill a background color to the bottom layer.
However, I found a problem:
If I move up the top layer for 10 pixels, the 10-pixel-content goes out of the screen. But when I move this layer down for 10 pixels. The 10-pixel-content will not be updated, it is gone.
How can I keep these 10-pixel-content? Is there any magic widget flag to solve this problem?
UPDATE 1:
The code is written in language D, but it is easy to understand:
class Canvas: QWidget
{
private QPixmap content;
this(QWidget parent)
{
super(parent);
setAttribute(Qt.WA_OpaquePaintEvent, true);
}
public void requestForPaint(QPixmap content, QRegion region)
{
this.content = content;
update(region);
}
protected override void paintEvent(QPaintEvent event)
{
if (this.content !is null)
{
QPainter painter = new QPainter(this);
painter.setClipping(event.region);
painter.fillRect(event.region.boundingRect, new QColor(0, 0, 0));
painter.drawPixmap(event.region.rect, this.content);
this.content = null;
painter.setClipping(false);
}
}
}
class Screen: QWidget
{
private Canvas canvas;
this()
{
super(); // Top-Level widget
setAutoFillBackground(True);
this.canvas = new Canvas(this);
showFullScreen();
}
public void requestForPaint(QPixmap content, QRegion region)
{
this.canvas.requestForPaint(content, region);
}
private updateBackgroundColor(QColor backgroundColor)
{
QPalette newPalette = palette();
newPalette.setColor(backgroundRole(), backgroundColor);
setPalette(newPalette);
}
public shiftPixels(int dx, int dy)
{
this.canvas.move(dx, dy);
updateBackgroundColor(new QColor(0, 0, 0)); // Just a demo background color
}
}
Screen screen = new Screen;
screen.requestForPaint(some_content, some_region);
screen.shiftPixels(0, -10);
screen.shiftPixels(0, 10);
Looking at the code, my first guess is that your region might be wrong. Try repainting the whole widget each time, and see if that solves the missing 10 pixel problem. If it does, then try working out why your region isn't covering the newly exposed portion.
One possibility along those lines: I notice in your Screen::requestForPaint method that you directly call the Canvas::requestForPaint without doing anything with the region. In Qt, the coordinates for anything like that are often assumed to be local, so if you don't account for the current position of the canvas widget, you might get an incorrect region.
Why not setting the position of the widget directly...? Another options might be using QPainter::translate(-1,-1) or something similar.