How to create interactive graphics with Vaadin?
I want to develop a simple interactive game (like arkanoid). I have already implemented menus and different views, and now I need to develop an actual game (draw a flying ball, some kind of moving platform) and I don't know how to do it. I need something like a canvas where I can draw a drawing of each frame.
I tried to implement this with Canvas and a timer. But he himself does not want to update the graphics, but only when the user clicks on the screen or similar. Also I saw com.google.gwt.canvas.client.Canvas but I can't figure out how to use it in Vaadin app.
So my question is this: is there any way to draw each frame at a high frame rate? If possible, how can I do this?
PS I am using Vaadin 7.3.3.
source to share
ADDED LATER:
Here is a link to my educational project with the implementation below. I will be glad if it helps someone.
ORIGINAL ANSWER :
Ok ... I found the solution myself. First of all, I created my own widget - a "client side" component (as per this article ).
Client side:
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:
public class MyCanvas extends AbstractComponent {
@Override
public MyCanvasState getState() {
return (MyCanvasState) super.getState();
}
}
Then I just add the component MyCanvas
to my view:
private void createCanvas() {
MyCanvas canvas = new MyCanvas();
addComponent(canvas);
canvas.setSizeFull();
}
And now I can draw anything on Canvas (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());
}
}
source to share