I want to develop a simple interactive game (like arcanoid). I already have implemented a menu and different views, and now I need to develop the actually game (draw flying ball, some movable platform) and I don't know how to do this. I need something like canvas where I can draw my graphic each frame.
I have tryed to implement this with Canvas and Timer. But it doesn't want update graphic itself, but only when user clicks on screen or similar. Also I saw com.google.gwt.canvas.client.Canvas, but I cannot understand how to use it in Vaadin application.
So my question is next: is it possible to draw some graphic each frame with high framerate in any way? If possible, how can I do this?
P.S. I use the Vaadin 7.3.3.
ADDED LATER:
Here is a link to my educational project with implementation below.
I'll be glad if it helps someone.
ORIGINAL ANSWER:
Well... I found the solution myself. First of all, I have created my own widget - "client side" component (according to this article).
Client side part:
public class GWTMyCanvasWidget extends Composite {
public static final String CLASSNAME = "mycomponent";
private static final int FRAMERATE = 30;
public GWTMyCanvasWidget() {
canvas = Canvas.createIfSupported();
initWidget(canvas);
setStyleName(CLASSNAME);
}
Connector:
#Connect(MyCanvas.class)
public class MyCanvasConnector extends AbstractComponentConnector {
#Override
public Widget getWidget() {
return (GWTMyCanvasWidget) super.getWidget();
}
#Override
protected Widget createWidget() {
return GWT.create(GWTMyCanvasWidget.class);
}
}
Server side part:
public class MyCanvas extends AbstractComponent {
#Override
public MyCanvasState getState() {
return (MyCanvasState) super.getState();
}
}
Then I just add MyCanvas component on my View:
private void createCanvas() {
MyCanvas canvas = new MyCanvas();
addComponent(canvas);
canvas.setSizeFull();
}
And now I can draw anything on Canvas (on client side in GWTMyCanvasWidget) with great performance =). Example:
public class GWTMyCanvasWidget extends Composite {
public static final String CLASSNAME = "mycomponent";
private static final int FRAMERATE = 30;
private Canvas canvas;
private Platform platform;
private int textX;
public GWTMyCanvasWidget() {
canvas = Canvas.createIfSupported();
canvas.addMouseMoveHandler(new MouseMoveHandler() {
#Override
public void onMouseMove(MouseMoveEvent event) {
if (platform != null) {
platform.setCenterX(event.getX());
}
}
});
initWidget(canvas);
Window.addResizeHandler(new ResizeHandler() {
#Override
public void onResize(ResizeEvent resizeEvent) {
resizeCanvas(resizeEvent.getWidth(), resizeEvent.getHeight());
}
});
initGameTimer();
resizeCanvas(Window.getClientWidth(), Window.getClientHeight());
setStyleName(CLASSNAME);
platform = createPlatform();
}
private void resizeCanvas(int width, int height) {
canvas.setWidth(width + "px");
canvas.setCoordinateSpaceWidth(width);
canvas.setHeight(height + "px");
canvas.setCoordinateSpaceHeight(height);
}
private void initGameTimer() {
Timer timer = new Timer() {
#Override
public void run() {
drawCanvas();
}
};
timer.scheduleRepeating(1000 / FRAMERATE);
}
private void drawCanvas() {
canvas.getContext2d().clearRect(0, 0, canvas.getCoordinateSpaceWidth(), canvas.getCoordinateSpaceHeight());
drawPlatform();
}
private Platform createPlatform() {
Platform platform = new Platform();
platform.setY(Window.getClientHeight());
return platform;
}
private void drawPlatform() {
canvas.getContext2d().fillRect(platform.getCenterX() - platform.getWidth() / 2, platform.getY() - 100, platform.getWidth(), platform.getHeight());
}
}
Related
I have a working system where one Custom component can be updated by user clicking button or by timer. But I'm not sure this is the most efficient way and if it is thread safe.
Is there any better way to solve this?
I have component based on Canvas: MyBox
One class that holds the data: MyColorBox
Listening interface: MyColorBoxListener
From the main class:
pane.getChildren().add( new MyBox( myboxdata));
The data can be updated by timers or user clicking by calling:
myboxdata.update();
The user can choice Play, Stop or Next. Play and Stop will control the timer. If the timer is stoppe it will be possible to click Next.
My data class:
import javafx.scene.paint.Color;
public class MyColorBox {
Color color[] = new Color[]{Color.BLUE, Color.RED, Color.GREEN};
Color color_second;
int counter = 0;
MyColorBoxListener listener;
public MyColorBox(MyColorBoxListener listener) {
this.listener = listener;
}
public MyColorBox() {
setListener(null);
}
public void setListener(MyColorBoxListener listener) {
this.listener = listener;
}
public void update() {
if(++counter>=color.length) counter=0;
if(listener!=null)
listener.updated();
}
public Color getCurrentColor() {
return color[counter];
}
}
Listener interface:
public interface BouncingBoxListener {
public void updated();
}
My Component:
public class MyBox extends Canvas implements MyColorBoxListener {
MyColorBox box;
public MyBox( MyColorBox box) {
super(100,100);
this.box = box;
box.setListener(this);
draw();
}
public void draw() {
GraphicsContext gc = this.getGraphicsContext2D();
gc.setStroke( box.getCurrentColor());
gc.setLineWidth(2);
gc.strokeRect(0,0, this.getWidth(), this.getHeight());
}
#Override
public void updated() {
draw();
}
}
I am making an apllication in java swing for practice by using drag and drop components , i am facing a problem, i put inside the JPanel, an JInternal Frame
, it is moveable,
i want to make it un-moveable
,which event is used for it? How can i do it ? i search on the internet but unfortunately unable to find the solution for this.
I have found this on internet but i want to do it with the help of event option in swing.
// Make first internal frame unmovable
JInternalFrame[] frames = frame.desktop.getAllFrames();
JInternalFrame f = frames[0];
BasicInternalFrameUI ui = (BasicInternalFrameUI)f.getUI();
Component north = ui.getNorthPane();
MouseMotionListener[] actions = // there is no option for MouseMotionListener in the event option
(MouseMotionListener[])north.getListeners(MouseMotionListener.class);
for (int i = 0; i < actions.length; i++)
north.removeMouseMotionListener( actions[i] );
DesktopManager is resposible for all operation with internal frames. So you can redefine it using the proxy pattern to make some of your frames non-movable. Here is non-complete example for you (sorry I havn't tested this code, so I'm not sure whether it works).
private static class ProxyDesktopManager implements DesktopManager {
private final DesktopManager delegate;
public ProxyDesktopManager(DesktopManager delegate) {
this.delegate = Objects.requireNonNull(delegate);
}
// Check whether frame is moveable
private boolean checkFrameMovable(JComponent frame) {
if (frame instanceof JInternalFrame) {
// TODO check whether the frame if movable
}
return false;
}
#Override
public void beginDraggingFrame(JComponent f) {
if (checkFrameMovable(f)) {
delegate.beginDraggingFrame(f);
}
}
#Override
public void dragFrame(JComponent f, int newX, int newY) {
if (checkFrameMovable(f)) {
delegate.dragFrame(f, newX, newY);
}
}
#Override
public void endDraggingFrame(JComponent f) {
if (checkFrameMovable(f)) {
delegate.endDraggingFrame(f);
}
}
#Override
public void openFrame(JInternalFrame f) {
delegate.openFrame(f);
}
#Override
public void closeFrame(JInternalFrame f) {
delegate.closeFrame(f);
}
#Override
public void maximizeFrame(JInternalFrame f) {
delegate.maximizeFrame(f);
}
#Override
public void resizeFrame(JComponent f, int newX, int newY, int newWidth, int newHeight) {
delegate.resizeFrame(f, newX, newY, newWidth, newHeight);
}
// IMPORTANT: simply delegate all another methods like openFrame or
// resizeFrame
}
Now you can use this proxy class for your JDesktopPane
JDesktopPane desktop = new JDesktopPane();
desktop.setDesktopManager(new ProxyDesktopManager(desktop.getDesktopManager()));
I'm working on a task-planning AWT applet for my dev team, and I'm running into a problem.
I'm using a screen system, where the main class has a "current screen" variable that it uses to paint other screens. When the applet starts, it loads the "main screen" which has a "Chatroom" button. When you click the button, it should open the chatroom screen.
My problem is that it displays the main screen just fine, but when you click the button everything just goes blank and the chatroom does not show up at all. What am I doing wrong?
Each screen is a subclass of the Screen class, which is a subclass of Container.
Main Class:
public class TPApplet extends Applet
{
private static final long serialVersionUID = 7611084043153150559L;
private static final int WIDTH = 400;
private static final int HEIGHT = 350;
private static final String TITLE = "TaskPlanner v";
private static final double VERSION = 0.01;
private boolean setup = false;
public Screen currentScreen;
public void init()
{
setLayout(null);
setScreen(new MainScreen(this));
}
public void stop()
{
}
public void setScreen(Screen s)
{
if (currentScreen != null)
{
currentScreen.destroy();
remove(currentScreen);
}
currentScreen = s;
if (currentScreen != null)
{
currentScreen.init();
add(currentScreen);
}
}
public void paint(Graphics g)
{
if (!setup)
{
setSize(WIDTH, HEIGHT);
setName(TITLE + VERSION);
currentScreen.setLocation(0, 0);
currentScreen.setSize(WIDTH, HEIGHT);
setup = true;
}
if (currentScreen != null)
{
currentScreen.paint(g);
}
}
}
Main Menu class:
public class MainScreen extends Screen
{
private static final long serialVersionUID = -993648854350389881L;
private TPApplet applet;
private Button todoButton;
private Button chatButton;
private boolean setup = false;
public MainScreen(TPApplet tpApplet)
{
applet = tpApplet;
}
#Override
public void init()
{
setLayout(null);
todoButton = createButton("To-Do List");
chatButton = createButton("Chatroom");
}
#Override
public void destroy()
{
removeAll();
}
#Override
public void paint(Graphics g)
{
if (!setup)
{
todoButton.setLocation(25, 50);
todoButton.setSize(100, 40);
chatButton.setLocation(135, 50);
chatButton.setSize(100, 40);
setup = true;
}
}
#Override
public void actionPerformed(ActionEvent e)
{
if (e.getSource() instanceof Button)
{
Button button = (Button) e.getSource();
if (button.getLabel() == chatButton.getLabel())
{
applet.setScreen(new ChatScreen(applet));
}
}
}
}
Chatroom Class:
public class ChatScreen extends Screen
{
private static final long serialVersionUID = -8774060448361093669L;
private TPApplet applet;
private ScrollPane chatWindow;
private TextField textField;
private Button sendButton;
private boolean setup = false;
public ChatScreen(TPApplet tpApplet)
{
applet = tpApplet;
}
#Override
public void init()
{
setLayout(null);
sendButton = createButton("Send");
chatWindow = new ScrollPane();
textField = new TextField();
add(chatWindow);
add(textField);
}
#Override
public void destroy()
{
removeAll();
}
#Override
public void paint(Graphics g)
{
if (!setup)
{
chatWindow.setLocation(20, 20);
chatWindow.setSize(100, 100);
textField.setLocation(150, 150);
textField.setSize(60, 20);
sendButton.setLocation(220, 150);
sendButton.setSize(40, 20);
setup = true;
}
}
#Override
public void actionPerformed(ActionEvent e)
{
if (e.getSource() instanceof Button)
{
Button button = (Button) e.getSource();
if (button.getLabel() == sendButton.getLabel())
{
String text = textField.getText();
}
}
}
}
Thank you in advance for your help!
I suspect that seen as you've chosen to discard the use of layout managers, when you add a new screen, the screen is being added with a 0x0 size
public void setScreen(Screen s)
{
//...//
if (currentScreen != null)
{
currentScreen.init();
// Look ma, I have no size...
add(currentScreen);
}
}
One of the jobs of a layout manger is to decide how any new components should be laid out.
Try setting the applet's layout manager to something like BorderLayout.
The next problem is that the child screens suffer from the same problem, so even though the screen will be sized (based on the needs of the layout manager), the screens themselves also have no layout manager, so the components you add to them have no size and it will appear that the screen hasn't been updated.
I'd also recommend that you take a look at Andrew's example of CardLayout
You could also check out A Visual Guide to Layout Managers and Using Layout Managers for more details...
You will need to invalidate() the applet in your setScreen method.
The new screen component needs to be laid out again to compute the sizes of its children.
It's a shame this isn't done automatically when adding!
Also, consider doing this using a LayoutManager if possible. Would a CardLayout work for you?
Please have a look at the following code
First, Please note I am a 100% newbie to Java Mobile.
In here, I am making the light on and vibrate on when user click the button. However, I really wanted to create a SOS application which turn the whole screen into white, and go to black, like that, in the thread. I guess I didn't achieve that by this app because even the lights are on, the buttons are still there. I tried to turn the "Form" color to "white" but it seems like JME has no "Color" class.
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
public class Midlet extends MIDlet{
private Form f;
private Display d;
private Command start,stop;
private Thread t;
public Midlet()
{
t = new Thread(new TurnLightOn());
}
public void startApp()
{
f = new Form("Back Light On");
d = Display.getDisplay(this);
d.setCurrent(f);
start = new Command("Turn On",Command.OK,0);
stop = new Command("Turn Off",Command.OK,1);
f.addCommand(start);
f.setCommandListener(new Action());
}
public void pauseApp() {
}
public void destroyApp(boolean unconditional)
{
this.notifyDestroyed();
}
private class Action implements CommandListener
{
public void commandAction(Command c, Displayable dis)
{
f.append("Light is Turnning On");
t.start();
}
}
private class ActionOff implements CommandListener
{
public void commandAction(Command c, Displayable dis)
{
}
}
private class TurnLightOn implements Runnable
{
public void run()
{
f.append("Working");
for(int i=0;i<100;i++)
{
try
{
d.flashBacklight(200);
d.vibrate(200);
Thread.sleep(1000);
}
catch (InterruptedException ex)
{
ex.printStackTrace();
}
}
}
}
}
Use the javax.microedition.lcdui.Canvas instead of Form. This example can get you started
public void startApp()
{
f = new Form("Back Light On");
d = Display.getDisplay(this);
start = new Command("Turn On",Command.OK,0);
stop = new Command("Turn Off",Command.OK,1);
f.addCommand(start);
f.setCommandListener(new Action());
myCanvas = new MyCanvas();
d.setCurrent(myCanvas);
myCanvas.repaint();
}
Now create a canvas and implement paint method like this:
class MyCanvas extends Canvas {
public void paint(Graphics g) {
// create a 20x20 black square in the center
// clear the screen first
g.setColor(0xffffff);
g.fillRect(0, 0, getWidth(), getHeight());
g.setColor(0xffffff); // make sure it is white color
// draw the square, <b>changed to rely on instance variables</b>
<b>g.fillRect(x, y, getWidth(), getHeight());</b>
}
}
does anyone knows how to use the blackberry JDE API to create a screen slide animation similar to Featured Items screen in the Blackberry App World? I am aware that in blackberry 5.0, there are some transition apis to perform that. But I am looking to do it for version 4.6 OS. It has the nice scrolling effect using the scrolling ball in blackberry bold.
Thanks.
As an alternative to the screenshot/Bitmap approach...
In the paint method of your screen you can use Graphics.pushContext(..) to push a clipping region and drawing offset. For best results, you'll want to do the transition in a runnable, and synchronize on the event lock. This will ensure that your screen can be dismissed in the middle of a transition.
Rough example:
class TransitionScreen extends Screen {
private int transitionOffset;
private boolean isTransitionHorizontal;
private ScreenTransition currentTransition;
public TransitionScreen(boolean isTransitionHorizontal) {
this.isTransitionHorizontal = isTransitionHorizontal;
transitionOffset = getTransitionMaximum(); // So the screen starts offset
}
protected void paint(Graphics graphics) {
// use transitionOffset as x or y depending on isTransitionHorizontal
graphics.pushContext(...);
}
protected void onExposed() {
transitionToOffset(0);
}
protected void onObscured() {
int target = getTransitionMaximum();
transitionToOffset(target);
}
private int getTransitionMaximum() {
return isTransitionHorizontal ? Display.getWidth() : Display.getHeight();
}
private void transitionToOffset(int target) {
if (currentTransition != null) {
currentTransition.stop();
}
currentTransition = new ScreenTransition(target);
getApplication().invokeLater(currentTransition);
}
}
class ScreenTransition implements Runnable {
private boolean animating;
private int target;
public ScreenTransitionUpdater(int target) {
this.target = target;
}
public void stop() {
animating = false;
}
public void run() {
while(animating) {
Object eventLock = getApplication().getEventLock();
synchronized(eventLock) {
// Interpolate myOffset to target
// Set animating = false if myOffset = target
invalidate();
}
}
}
}
No need to mark animating as volatile as it is ignored on this platform.
Maybe use a timer to change the coordinate position of the images in the paint method