use full window canvas and try to use the real size in pixel...

This commit is contained in:
Hannes Janetzek 2013-06-30 08:49:06 +02:00
parent c002b8a3c3
commit 099ab0e817
4 changed files with 537 additions and 183 deletions

View File

@ -1,15 +1,19 @@
package org.oscim.gdx.client;
// -draftCompile -localWorkers 2
import org.oscim.core.Tile;
import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.backends.gwt.GwtApplication;
import com.badlogic.gdx.backends.gwt.GwtApplicationConfiguration;
import com.badlogic.gdx.backends.gwt.GwtGraphics;
public class GwtLauncher extends GwtApplication {
@Override
public GwtApplicationConfiguration getConfig() {
GwtApplicationConfiguration cfg = new GwtApplicationConfiguration(1400, 800);
GwtApplicationConfiguration cfg = new GwtApplicationConfiguration(GwtGraphics.getWindowWidthJSNI(),
GwtGraphics.getWindowHeightJSNI() );
cfg.stencil = true;
cfg.fps = 25;
@ -18,6 +22,10 @@ public class GwtLauncher extends GwtApplication {
@Override
public ApplicationListener getApplicationListener() {
if (GwtGraphics.getDevicePixelRatioJSNI() > 1)
Tile.SIZE = 400;
else
Tile.SIZE = 360;
return new GwtGdxMap();
}

View File

@ -49,13 +49,16 @@ import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.Panel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.TextArea;
import com.google.gwt.user.client.ui.VerticalPanel;
/** Implementation of an {@link Application} based on GWT. Clients have to override {@link #getConfig()} and
* {@link #getApplicationListener()}. Clients can override the default loading screen via
* {@link #getPreloaderCallback()} and implement any loading screen drawing via GWT widgets.
* @author mzechner */
/**
* Implementation of an {@link Application} based on GWT. Clients have to
* override {@link #getConfig()} and {@link #getApplicationListener()}. Clients
* can override the default loading screen via {@link #getPreloaderCallback()}
* and implement any loading screen drawing via GWT widgets.
*
* @author mzechner
*/
public abstract class GwtApplication implements EntryPoint, Application {
private ApplicationListener listener;
private GwtApplicationConfiguration config;
@ -63,7 +66,6 @@ public abstract class GwtApplication implements EntryPoint, Application {
private GwtInput input;
private GwtNet net;
private Panel root = null;
private TextArea log = null;
private int logLevel = LOG_ERROR;
private Array<Runnable> runnables = new Array<Runnable>();
private Array<Runnable> runnablesHelper = new Array<Runnable>();
@ -78,11 +80,9 @@ public abstract class GwtApplication implements EntryPoint, Application {
@Override
public void onModuleLoad() {
consoleLog("onModuleLoad");
this.agentInfo = computeAgentInfo();
this.listener = getApplicationListener();
this.config = getConfig();
this.log = config.log;
if (config.rootPanel != null) {
this.root = config.rootPanel;
@ -152,8 +152,10 @@ public abstract class GwtApplication implements EntryPoint, Application {
root.add(new Label("Sorry, your browser doesn't seem to support WebGL"));
return;
}
lastWidth = graphics.getWidth();
lastHeight = graphics.getHeight();
Gdx.app = this;
//Gdx.audio = new GwtAudio();
Gdx.graphics = graphics;
@ -164,11 +166,15 @@ public abstract class GwtApplication implements EntryPoint, Application {
Gdx.input = this.input;
this.net = new GwtNet();
Gdx.net = this.net;
final double pixelRatio = GwtGraphics.getDevicePixelRatioJSNI();
consoleLog(">>>> " + config.width + "x"+ config.height + " ratio " + pixelRatio);
// tell listener about app creation
try {
listener.create();
listener.resize(graphics.getWidth(), graphics.getHeight());
listener.resize(
(int)(graphics.getWidth()),
(int)(graphics.getHeight()));
} catch (Throwable t) {
error("GwtApplication", "exception: " + t.getMessage(), t);
t.printStackTrace();
@ -181,11 +187,14 @@ public abstract class GwtApplication implements EntryPoint, Application {
public void run() {
try {
graphics.update();
if (Gdx.graphics.getWidth() != lastWidth || Gdx.graphics.getHeight() != lastHeight) {
GwtApplication.this.listener.resize(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
if (Gdx.graphics.getWidth() != lastWidth
|| Gdx.graphics.getHeight() != lastHeight) {
GwtApplication.this.listener.resize(
(int)(Gdx.graphics.getWidth()),
(int)(Gdx.graphics.getHeight()));
lastWidth = graphics.getWidth();
lastHeight = graphics.getHeight();
Gdx.gl.glViewport(0, 0, lastWidth, lastHeight);
//Gdx.gl.glViewport(0, 0, lastWidth, lastHeight);
}
runnablesHelper.addAll(runnables);
runnables.clear();
@ -264,75 +273,47 @@ public abstract class GwtApplication implements EntryPoint, Application {
return Gdx.net;
}
private void checkLogLabel () {
if (log == null) {
log = new TextArea();
log.setSize(graphics.getWidth() + "px", "200px");
log.setReadOnly(true);
root.add(log);
}
}
@Override
public void log(String tag, String message) {
if (logLevel >= LOG_INFO) {
checkLogLabel();
log.setText(log.getText() + "\n" + tag + ": " + message);
log.setCursorPos(log.getText().length() - 1);
System.out.println(tag + ": " + message);
consoleLog(tag + ": " + message);
}
}
@Override
public void log(String tag, String message, Exception exception) {
if (logLevel >= LOG_INFO) {
checkLogLabel();
log.setText(log.getText() + "\n" + tag + ": " + message + "\n" + exception.getMessage() + "\n");
log.setCursorPos(log.getText().length() - 1);
System.out.println(tag + ": " + message + "\n" + exception.getMessage());
System.out.println(getStackTrace(exception));
consoleLog(tag + ": " + message + "\n" + exception.getMessage());
consoleLog(getStackTrace(exception));
}
}
@Override
public void error(String tag, String message) {
if (logLevel >= LOG_ERROR) {
checkLogLabel();
log.setText(log.getText() + "\n" + tag + ": " + message);
log.setCursorPos(log.getText().length() - 1);
System.err.println(tag + ": " + message);
consoleLog(tag + ": " + message);
}
}
@Override
public void error(String tag, String message, Throwable exception) {
if (logLevel >= LOG_ERROR) {
checkLogLabel();
log.setText(log.getText() + "\n" + tag + ": " + message + "\n" + exception.getMessage());
log.setCursorPos(log.getText().length() - 1);
System.err.println(tag + ": " + message + "\n" + exception.getMessage() + "\n");
System.out.println(getStackTrace(exception));
consoleLog(getStackTrace(exception));
}
}
@Override
public void debug(String tag, String message) {
if (logLevel >= LOG_DEBUG) {
checkLogLabel();
log.setText(log.getText() + "\n" + tag + ": " + message + "\n");
log.setCursorPos(log.getText().length() - 1);
System.out.println(tag + ": " + message + "\n");
consoleLog(tag + ": " + message + "\n");
}
}
@Override
public void debug(String tag, String message, Throwable exception) {
if (logLevel >= LOG_DEBUG) {
checkLogLabel();
log.setText(log.getText() + "\n" + tag + ": " + message + "\n" + exception.getMessage() + "\n");
log.setCursorPos(log.getText().length() - 1);
System.out.println(tag + ": " + message + "\n" + exception.getMessage());
System.out.println(getStackTrace(exception));
consoleLog(tag + ": " + message + "\n" + exception.getMessage());
consoleLog(getStackTrace(exception));
}
}
@ -402,8 +383,11 @@ public abstract class GwtApplication implements EntryPoint, Application {
public void exit() {
}
/** Contains precomputed information on the user-agent. Useful for dealing with browser and OS behavioral differences. Kindly
* borrowed from PlayN */
/**
* Contains precomputed information on the user-agent. Useful for dealing
* with browser and OS behavioral differences. Kindly
* borrowed from PlayN
*/
public static AgentInfo agentInfo() {
return agentInfo;
}
@ -485,7 +469,7 @@ public abstract class GwtApplication implements EntryPoint, Application {
}
}
native void consoleLog(String message) /*-{
console.log( "GWT:" + message );
private native void consoleLog(String message) /*-{
console.log(message);
}-*/;
}

View File

@ -0,0 +1,346 @@
/*******************************************************************************
* Copyright 2011 See AUTHORS file.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
******************************************************************************/
package com.badlogic.gdx.backends.gwt;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Graphics;
import com.badlogic.gdx.graphics.GL10;
import com.badlogic.gdx.graphics.GL11;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.GLCommon;
import com.badlogic.gdx.utils.GdxRuntimeException;
import com.google.gwt.canvas.client.Canvas;
import com.google.gwt.dom.client.CanvasElement;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.event.logical.shared.ResizeEvent;
import com.google.gwt.event.logical.shared.ResizeHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Panel;
import com.google.gwt.webgl.client.WebGLContextAttributes;
import com.google.gwt.webgl.client.WebGLRenderingContext;
public class GwtGraphics implements Graphics {
CanvasElement canvas;
WebGLRenderingContext context;
GL20 gl;
String extensions;
float fps = 0;
long lastTimeStamp = System.currentTimeMillis();
float deltaTime = 0;
float time = 0;
int frames;
GwtApplicationConfiguration config;
boolean inFullscreenMode = false;
double pixelRatio;
public GwtGraphics(Panel root, GwtApplicationConfiguration config) {
Canvas canvasWidget = Canvas.createIfSupported();
if (canvasWidget == null)
throw new GdxRuntimeException("Canvas not supported");
canvas = canvasWidget.getCanvasElement();
root.add(canvasWidget);
this.pixelRatio = getDevicePixelRatioJSNI();
canvas.setWidth((int) (config.width * pixelRatio));
canvas.setHeight((int) (config.height * pixelRatio));
canvas.getStyle().setWidth(config.width, Unit.PX);
canvas.getStyle().setHeight(config.height, Unit.PX);
this.config = config;
WebGLContextAttributes attributes = WebGLContextAttributes.create();
attributes.setAntialias(config.antialiasing);
attributes.setStencil(config.stencil);
attributes.setAlpha(false);
attributes.setPremultipliedAlpha(false);
context = WebGLRenderingContext.getContext(canvas, attributes);
context.viewport(0, 0, config.width, config.height);
this.gl = config.useDebugGL ? new GwtGL20Debug(context) : new GwtGL20(context);
Window.addResizeHandler(new ResizeHandler() {
@Override
public void onResize(ResizeEvent event) {
int w = getWindowWidthJSNI();
int h = getWindowHeightJSNI();
canvas.getStyle().setWidth(w, Unit.PX);
canvas.getStyle().setHeight(h, Unit.PX);
Gdx.app.log("onResize", w + "/" + h);
canvas.setWidth((int) (w * pixelRatio));
canvas.setHeight((int) (h * pixelRatio));
}
});
}
public static native double getDevicePixelRatioJSNI() /*-{
return $wnd.devicePixelRatio || 1.0;
}-*/;
public static native int getWindowWidthJSNI() /*-{
return $wnd.innerWidth;
}-*/;
public static native int getWindowHeightJSNI() /*-{
return $wnd.innerHeight;
}-*/;
public WebGLRenderingContext getContext() {
return context;
}
@Override
public boolean isGL11Available() {
return false;
}
@Override
public boolean isGL20Available() {
return true;
}
@Override
public GLCommon getGLCommon() {
return gl;
}
@Override
public GL10 getGL10() {
return null;
}
@Override
public GL11 getGL11() {
return null;
}
@Override
public GL20 getGL20() {
return gl;
}
@Override
public int getWidth() {
return canvas.getWidth();
}
@Override
public int getHeight() {
return canvas.getHeight();
}
@Override
public float getDeltaTime() {
return deltaTime;
}
@Override
public int getFramesPerSecond() {
return (int) fps;
}
@Override
public GraphicsType getType() {
return GraphicsType.WebGL;
}
@Override
public float getPpiX() {
return 96;
}
@Override
public float getPpiY() {
return 96;
}
@Override
public float getPpcX() {
return 96 / 2.54f;
}
@Override
public float getPpcY() {
return 96 / 2.54f;
}
@Override
public boolean supportsDisplayModeChange() {
return true;
}
@Override
public DisplayMode[] getDisplayModes() {
return new DisplayMode[] { new DisplayMode(getScreenWidthJSNI(), getScreenHeightJSNI(), 60,
8) {
} };
}
private native int getScreenWidthJSNI() /*-{
return $wnd.screen.width;
}-*/;
private native int getScreenHeightJSNI() /*-{
return $wnd.screen.height;
}-*/;
private native boolean isFullscreenJSNI() /*-{
if ("webkitIsFullScreen" in $doc) {
return $doc.webkitIsFullScreen;
}
if ("mozFullScreen" in $doc) {
return $doc.mozFullScreen;
}
return false
}-*/;
private void fullscreenChanged() {
if (!isFullscreen()) {
canvas.setWidth(config.width);
canvas.setHeight(config.height);
}
}
private native boolean setFullscreenJSNI(GwtGraphics graphics, CanvasElement element) /*-{
if (element.webkitRequestFullScreen) {
element.width = $wnd.screen.width;
element.height = $wnd.screen.height;
element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
$doc.addEventListener(
"webkitfullscreenchange",
function() {
graphics.@com.badlogic.gdx.backends.gwt.GwtGraphics::fullscreenChanged()();
}, false);
return true;
}
if (element.mozRequestFullScreen) {
element.width = $wnd.screen.width;
element.height = $wnd.screen.height;
element.mozRequestFullScreen();
$doc.addEventListener(
"mozfullscreenchange",
function() {
graphics.@com.badlogic.gdx.backends.gwt.GwtGraphics::fullscreenChanged()();
}, false);
return true;
}
return false;
}-*/;
private native void exitFullscreen() /*-{
if ($doc.webkitExitFullscreen)
$doc.webkitExitFullscreen();
if ($doc.mozExitFullscreen)
$doc.mozExitFullscreen();
}-*/;
@Override
public DisplayMode getDesktopDisplayMode() {
return new DisplayMode(getScreenWidthJSNI(), getScreenHeightJSNI(), 60, 8) {
};
}
@Override
public boolean setDisplayMode(DisplayMode displayMode) {
if (displayMode.width != getScreenWidthJSNI()
&& displayMode.height != getScreenHeightJSNI())
return false;
return setFullscreenJSNI(this, canvas);
}
@Override
public boolean setDisplayMode(int width, int height, boolean fullscreen) {
if (fullscreen) {
if (width != getScreenWidthJSNI() && height != getScreenHeightJSNI())
return false;
return setFullscreenJSNI(this, canvas);
} else {
if (isFullscreenJSNI())
exitFullscreen();
canvas.setWidth(width);
canvas.setHeight(height);
canvas.getStyle().setWidth(width, Unit.PX);
canvas.getStyle().setHeight(height, Unit.PX);
return true;
}
}
@Override
public BufferFormat getBufferFormat() {
return new BufferFormat(8, 8, 8, 0, 16, config.stencil ? 8 : 0, 0, false);
}
@Override
public boolean supportsExtension(String extension) {
if (extensions == null)
extensions = Gdx.gl.glGetString(GL10.GL_EXTENSIONS);
return extensions.contains(extension);
}
public void update() {
long currTimeStamp = System.currentTimeMillis();
deltaTime = (currTimeStamp - lastTimeStamp) / 1000.0f;
lastTimeStamp = currTimeStamp;
time += deltaTime;
frames++;
if (time > 1) {
this.fps = frames;
time = 0;
frames = 0;
}
}
@Override
public void setTitle(String title) {
}
@Override
public void setVSync(boolean vsync) {
}
@Override
public float getDensity() {
return 96.0f / 160;
}
@Override
public void setContinuousRendering(boolean isContinuous) {
}
@Override
public boolean isContinuousRendering() {
return false;
}
@Override
public void requestRendering() {
}
@Override
public float getRawDeltaTime() {
return getDeltaTime();
}
@Override
public boolean isFullscreen() {
return isFullscreenJSNI();
}
}

View File

@ -3,17 +3,31 @@
<head>
<title>vtm-gdx</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- pixel and dpi are way too simple concepts for web devs, lets also have css-pixels! -->
<!-- http://www.html5rocks.com/de/mobile/touch/ -->
<!-- http://www.quirksmode.org/mobile/viewports.html -->
<!-- http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html -->
<!-- devicePixelRatio: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/ -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
canvas {
cursor: default;
outline: none;
position: fixed;
left: 0;
top: 0;
}
</style>
</head>
<body>
<script type="text/javascript" src="js/_tessellate.js"></script>
<script type="text/javascript" src="js/tessellate.js"></script>
<div align="center" id="embed-org.oscim.gdx.GwtDefinition"></div>
<script type="text/javascript" src="org.oscim.gdx.GwtDefinition/org.oscim.gdx.GwtDefinition.nocache.js"></script>
<script type="text/javascript"
src="org.oscim.gdx.GwtDefinition/org.oscim.gdx.GwtDefinition.nocache.js"></script>
</body>
<script>
@ -29,7 +43,9 @@
evt.target.style.cursor = '';
}
document.getElementById('embed-org.oscim.gdx.GwtDefinition').addEventListener('mousedown', handleMouseDown, false);
document.getElementById('embed-org.oscim.gdx.GwtDefinition').addEventListener('mouseup', handleMouseUp, false);
document.getElementById('embed-org.oscim.gdx.GwtDefinition')
.addEventListener('mousedown', handleMouseDown, false);
document.getElementById('embed-org.oscim.gdx.GwtDefinition')
.addEventListener('mouseup', handleMouseUp, false);
</script>
</html>