public WebGameWindow(Game game)
{
_game = game;
_keys = new List <Keys>();
Keyboard.SetKeys(_keys);
_canvas = document.getElementById("monogamecanvas") as HTMLCanvasElement;
_canvas.tabIndex = 1000;
// Disable selection
_canvas.style.userSelect = "none";
_canvas.style.webkitUserSelect = "none";
_canvas.style.msUserSelect = "none";
// TODO: Move "GL context" creation outside the game window
var possiblecontexts = new[] { "webgl", "experimental-webgl", "webkit-3d", "moz-webgl" };
foreach (var context in possiblecontexts)
{
try
{
WebHelper.gl = _canvas.getContext(context).As <WebGLRenderingContext>();
if (WebHelper.gl != null)
{
break;
}
}
catch { }
}
if (WebHelper.gl == null)
{
var d2d = _canvas.getContext("2d").As <CanvasRenderingContext2D>();
d2d.fillStyle = "#6495ED";
d2d.fillRect(0, 0, _canvas.width, _canvas.height);
d2d.fillStyle = "#000000";
d2d.font = "30px Arial";
d2d.textAlign = "center";
d2d.fillText("This device does not support WebGL :(", _canvas.width / 2, _canvas.height / 2);
throw new Exception("Failed to get WebGL context :|");
}
// Block context menu on the canvas element
_canvas.oncontextmenu += (e) => e.preventDefault();
// Connect events
_canvas.onmousemove += (e) => Canvas_MouseMove(e);
_canvas.onmousedown += (e) => Canvas_MouseDown(e);
_canvas.onmouseup += (e) => Canvas_MouseUp(e);
_canvas.onmousewheel += (e) => Canvas_MouseWheel(e);
_canvas.onkeydown += (e) => Canvas_KeyDown(e);
_canvas.onkeyup += (e) => Canvas_KeyUp(e);
document.addEventListener("webkitfullscreenchange", Document_FullscreenChange);
document.addEventListener("mozfullscreenchange", Document_FullscreenChange);
document.addEventListener("fullscreenchange", Document_FullscreenChange);
document.addEventListener("MSFullscreenChange", Document_FullscreenChange);
}
private void _SpriteFont(HTMLImageElement image, int glyphWidth, int glyphHeight, bool xtrim)
{
HTMLCanvasElement canvas = new HTMLCanvasElement();
canvas.width = (uint)glyphWidth;
canvas.height = (uint)glyphHeight;
CanvasRenderingContext2D context = canvas.getContext(Literals._2d);
for (int i = start; i <= end; i++)
{
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, glyphWidth * (i - start), 0, glyphWidth, glyphHeight, 0, 0, glyphWidth, glyphHeight);
// Make sure loaded image is large enough
// If image is not large enough, generate error glyphs
if (image.width >= glyphWidth * (i - start) + glyphWidth)
{
glyphs[i] = SpriteSheet.AddSpriteFontGlyph(canvas, context, xtrim);
}
else
{
glyphs[i] = SpriteSheet.AddSpriteFontGlyph(canvas, context, false);
}
}
canvas.remove();
loaded = true;
}
public CanvasControl() : base(new HTMLCanvasElement())
{
Canvas = this.Content.As <HTMLCanvasElement>();
Context = Canvas.getContext("2d").As <CanvasRenderingContext2D>();
OnResize = (sender) =>
{
var bounds = (DOMRect)Content.getBoundingClientRect();
Canvas.width = (uint)bounds.width;
Canvas.height = (uint)bounds.height;
Refresh();
};
}
public CanvasControl() : base(new HTMLCanvasElement() { className = "control" })
{
Canvas = this.Content.As <HTMLCanvasElement>();
Context = Canvas.getContext("2d").As <CanvasRenderingContext2D>();
OnResize = (sender) =>
{
ImageData = null;
if (!ClearOnResize)
{
if (Canvas.width > 0 && Canvas.height > 0)
{
ImageData = Context.getImageData(0, 0, Canvas.width, Canvas.height);
}
}
var bounds = (DOMRect)Content.getBoundingClientRect();
if (_width == -1)
{
Canvas.width = (uint)bounds.width;
}
if (_height == -1)
{
Canvas.height = (uint)bounds.height;
}
Refresh();
if (ImageData != null && !ClearOnResize)
{
Context.putImageData(ImageData, 0, 0);
}
};
Canvas.onmousedown = (ev) =>
{
OnMouseDown(this, ev);
};
Canvas.onmousemove = (ev) =>
{
OnMouseMove(this, ev);
};
Canvas.onmouseup = (ev) =>
{
OnMouseUp(this, ev);
};
Canvas.onmousewheel = (ev) =>
{
OnMouseWheel(this, ev);
};
Canvas.ontouchstart = (ev) =>
{
OnTouchStart(this, ev);
};
Canvas.ontouchmove = (ev) =>
{
OnTouchMove(this, ev);
};
Canvas.ontouchend = (ev) =>
{
OnTouchMove(this, ev);
};
}
public Graphics(CanvasControl control)
{
_canvas = control.Canvas;
_context = _canvas.getContext("2d").As <CanvasRenderingContext2D>();
}
public static void Init(string windowTitle, int windowWidth, int windowHeight, bool windowVSync, bool windowFullscreen, bool windowResizable, bool windowBorderless, int msaa)
{
//Input.Init();
Running = true;
//document.addEventListenerFn<MouseEvent>(handleMouseMove);
// Debug
Output.WriteLine($"Platform - HTML5 Initialized");
Output.WriteLine($"Platform - window.navigator.platform: {window.navigator.platform}");
Output.WriteLine($"Platform - window.navigator.userAgent: {window.navigator.userAgent}");
// Window
Window.Init(windowTitle, windowWidth, windowHeight, windowVSync, windowFullscreen, windowResizable, windowBorderless);
// MSAA
if (msaa < 0)
{
throw new ArgumentOutOfRangeException($"msaa out of range, must be >= 0."); //: (0 - {OpenGLBindings.GL.MaxSamples})");
}
// Check WegGL 2.0 Support
bool supportsWebGL2 = false;
WebGLContextAttributes contextAttributes = new WebGLContextAttributes()
{
alpha = true,
premultipliedAlpha = false,
depth = true,
stencil = true,
antialias = msaa > 0,
preserveDrawingBuffer = true,
failIfMajorPerformanceCaveat = false
};
if (!document.location.search.ToLower().Contains("forcewebgl1=true"))
{
try
{
string[] contextIDs = new string[] {
"webgl2",
"experimental-webgl2"
};
foreach (string contextID in contextIDs)
{
try
{
WebGL2Context = Canvas.getContext(contextID, contextAttributes).As <Retyped.webgl2.WebGL2RenderingContext>();
}
catch { }
if (WebGL2Context != null)
{
supportsWebGL2 = true;
GraphicsBackend = GraphicsBackend.WebGL2;
Output.WriteLine("WebGL 2.0 Supported");
break;
}
}
}
catch { }
}
// Check WegGL 1.0 Support
bool supportsWebGL = false;
if (!supportsWebGL2)
{
Output.WriteLine("WebGL 2.0 is not supported, falling back to WebGL 1.0");
try
{
string[] contextIDs = new string[] {
"webgl",
"experimental-webgl"
};
foreach (string contextID in contextIDs)
{
try
{
WebGLContext = Canvas.getContext(contextID, contextAttributes).As <WebGLRenderingContext>();
}
catch { }
if (WebGLContext != null)
{
supportsWebGL = true;
GraphicsBackend = GraphicsBackend.WebGL;
Output.WriteLine("WebGL 1.0 Supported");
break;
}
}
}
catch { }
}
if (!supportsWebGL2 && !supportsWebGL)
{
Output.WriteLine("WebGL 1.0 not supported");
Canvas.parentElement.replaceChild(new HTMLParagraphElement {
innerHTML = "<b>Either the browser doesn't support WebGL or it is disabled.<br>Please follow the instructions at: <a href=\"https://get.webgl.org/\" > get.webgl.org</a>.</b>"
}, Canvas);
}
}