diff --git a/lib/kotludens/com/persesgames/game/Game.kt b/lib/kotludens/com/persesgames/game/Game.kt index c65d346..89bfc47 100644 --- a/lib/kotludens/com/persesgames/game/Game.kt +++ b/lib/kotludens/com/persesgames/game/Game.kt @@ -1,6 +1,5 @@ package com.persesgames.game -import com.persesgames.math.Matrix4 import com.persesgames.texture.Textures import org.khronos.webgl.WebGLRenderingContext import org.w3c.dom.CanvasRenderingContext2D @@ -13,160 +12,6 @@ * Created by rnentjes on 19-4-16. */ -class DefaultScreen: Screen() { - override fun update(time: Float, delta: Float) { - } - - override fun render() { - // show loading message? - Game.gl().clearColor(1f, 1f, 0f, 1f) - Game.gl().clear(WebGLRenderingContext.COLOR_BUFFER_BIT) - } -} - -enum class ViewType { - PROJECTION, - WIDTH, - HEIGHT, - ABSOLUTE -} - -class View( - var windowWidth: Int = 2000, - var windowHeight: Int =1000, - var width: Float = 1024f, - var height: Float = 1024f, - var angle: Float = 60f, - var near: Float = -0.1f, - var far: Float = -100f, - var minAspectRatio: Float = 1f, - var maxAspectRatio: Float = 1f, - var viewType: ViewType = ViewType.WIDTH) { - var vMatrix = Matrix4() - var aspectRatio = 1f - - init { - updateView() - } - - fun updateView() { - aspectRatio = windowWidth / windowHeight.toFloat() - - if (aspectRatio < minAspectRatio) { - - } - - if (aspectRatio > maxAspectRatio) { - - } - - when(viewType) { - ViewType.ABSOLUTE -> { - vMatrix.setOrthographicProjection(0f, width, 0f, height, near, far) - } - ViewType.WIDTH -> { - height = width / aspectRatio - - vMatrix.setOrthographicProjection(-width / 2, width / 2, -height / 2, height / 2, near, far) - } - ViewType.HEIGHT -> { - width = height * aspectRatio - - vMatrix.setOrthographicProjection(-width / 2, width / 2, -height / 2, height / 2, near, far) - } - ViewType.PROJECTION -> { - vMatrix.setPerspectiveProjection(angle, aspectRatio, near, far); - } - else -> { - throw IllegalStateException("ViewType $viewType not implemented!") - } - } - - println("width: $width, height: $height") - } - - fun screenToGameCoordX(screenX: Float): Float { - var result = screenX - - when(viewType) { - ViewType.ABSOLUTE -> { - // nop - } - ViewType.WIDTH -> { - result = (screenX / windowWidth * width) - width / 2 - } - ViewType.HEIGHT -> { - result = (screenX / windowWidth * width) - width / 2 - } - ViewType.PROJECTION -> { - // uhm - } - else -> { - throw IllegalStateException("ViewType $viewType not implemented!") - } - } - - return result - } - - fun screenToGameCoordY(screenY: Float): Float { - var result = screenY - - when(viewType) { - ViewType.ABSOLUTE -> { - // nop - } - ViewType.WIDTH -> { - result = (screenY / windowHeight * height) - height / 2 - } - ViewType.HEIGHT -> { - result = (screenY / windowHeight * height) - height / 2 - } - ViewType.PROJECTION -> { - // uhm - } - else -> { - throw IllegalStateException("ViewType $viewType not implemented!") - } - } - - return result - } - - fun setToWidth(width: Float) { - this.width = width - this.viewType = ViewType.WIDTH - - updateView() - } - - fun setToHeight(height: Float) { - this.height = height - this.viewType = ViewType.HEIGHT - - updateView() - } - - fun setProjection(angle: Float) { - this.angle = angle - this.viewType = ViewType.PROJECTION - - updateView() - } - - fun setNear(near: Float) { - this.near = near - - updateView() - } - - fun setFar(far: Float) { - this.far = far - - updateView() - } -} - class HTMLElements { var container: HTMLElement var webgl: WebGLRenderingContext @@ -178,7 +23,7 @@ val webGlCanvas = document.createElement("canvas") as HTMLCanvasElement val canvas = document.createElement("canvas") as HTMLCanvasElement - container.setAttribute("style", "position: relative;") + container.setAttribute("style", "position: absolute; left: 0px; top: 0px;") webGlCanvas.setAttribute("style", "position: absolute; left: 0px; top: 0px;" ) canvas.setAttribute("style", "position: absolute; left: 0px; top: 0px; z-index: 10; width: 1000px; height: 500px;" ) @@ -228,10 +73,6 @@ textCanvas.width = view.width.toInt() textCanvas.height = view.height.toInt() -// -// html.canvas2d.fillStyle = "green" -// html.canvas2d.font = "bold 36pt Arial" -// html.canvas2d.fillText("Hello World!", 10.0, 40.0) gl().viewport(0, 0, view.width.toInt(), view.height.toInt()) canvas.setAttribute("style", "position: absolute; left: 0px; top: 0px; z-index: 5; width: ${view.windowWidth}px; height: ${view.windowHeight}px;" ) diff --git a/lib/kotludens/com/persesgames/game/Game.kt b/lib/kotludens/com/persesgames/game/Game.kt index c65d346..89bfc47 100644 --- a/lib/kotludens/com/persesgames/game/Game.kt +++ b/lib/kotludens/com/persesgames/game/Game.kt @@ -1,6 +1,5 @@ package com.persesgames.game -import com.persesgames.math.Matrix4 import com.persesgames.texture.Textures import org.khronos.webgl.WebGLRenderingContext import org.w3c.dom.CanvasRenderingContext2D @@ -13,160 +12,6 @@ * Created by rnentjes on 19-4-16. */ -class DefaultScreen: Screen() { - override fun update(time: Float, delta: Float) { - } - - override fun render() { - // show loading message? - Game.gl().clearColor(1f, 1f, 0f, 1f) - Game.gl().clear(WebGLRenderingContext.COLOR_BUFFER_BIT) - } -} - -enum class ViewType { - PROJECTION, - WIDTH, - HEIGHT, - ABSOLUTE -} - -class View( - var windowWidth: Int = 2000, - var windowHeight: Int =1000, - var width: Float = 1024f, - var height: Float = 1024f, - var angle: Float = 60f, - var near: Float = -0.1f, - var far: Float = -100f, - var minAspectRatio: Float = 1f, - var maxAspectRatio: Float = 1f, - var viewType: ViewType = ViewType.WIDTH) { - var vMatrix = Matrix4() - var aspectRatio = 1f - - init { - updateView() - } - - fun updateView() { - aspectRatio = windowWidth / windowHeight.toFloat() - - if (aspectRatio < minAspectRatio) { - - } - - if (aspectRatio > maxAspectRatio) { - - } - - when(viewType) { - ViewType.ABSOLUTE -> { - vMatrix.setOrthographicProjection(0f, width, 0f, height, near, far) - } - ViewType.WIDTH -> { - height = width / aspectRatio - - vMatrix.setOrthographicProjection(-width / 2, width / 2, -height / 2, height / 2, near, far) - } - ViewType.HEIGHT -> { - width = height * aspectRatio - - vMatrix.setOrthographicProjection(-width / 2, width / 2, -height / 2, height / 2, near, far) - } - ViewType.PROJECTION -> { - vMatrix.setPerspectiveProjection(angle, aspectRatio, near, far); - } - else -> { - throw IllegalStateException("ViewType $viewType not implemented!") - } - } - - println("width: $width, height: $height") - } - - fun screenToGameCoordX(screenX: Float): Float { - var result = screenX - - when(viewType) { - ViewType.ABSOLUTE -> { - // nop - } - ViewType.WIDTH -> { - result = (screenX / windowWidth * width) - width / 2 - } - ViewType.HEIGHT -> { - result = (screenX / windowWidth * width) - width / 2 - } - ViewType.PROJECTION -> { - // uhm - } - else -> { - throw IllegalStateException("ViewType $viewType not implemented!") - } - } - - return result - } - - fun screenToGameCoordY(screenY: Float): Float { - var result = screenY - - when(viewType) { - ViewType.ABSOLUTE -> { - // nop - } - ViewType.WIDTH -> { - result = (screenY / windowHeight * height) - height / 2 - } - ViewType.HEIGHT -> { - result = (screenY / windowHeight * height) - height / 2 - } - ViewType.PROJECTION -> { - // uhm - } - else -> { - throw IllegalStateException("ViewType $viewType not implemented!") - } - } - - return result - } - - fun setToWidth(width: Float) { - this.width = width - this.viewType = ViewType.WIDTH - - updateView() - } - - fun setToHeight(height: Float) { - this.height = height - this.viewType = ViewType.HEIGHT - - updateView() - } - - fun setProjection(angle: Float) { - this.angle = angle - this.viewType = ViewType.PROJECTION - - updateView() - } - - fun setNear(near: Float) { - this.near = near - - updateView() - } - - fun setFar(far: Float) { - this.far = far - - updateView() - } -} - class HTMLElements { var container: HTMLElement var webgl: WebGLRenderingContext @@ -178,7 +23,7 @@ val webGlCanvas = document.createElement("canvas") as HTMLCanvasElement val canvas = document.createElement("canvas") as HTMLCanvasElement - container.setAttribute("style", "position: relative;") + container.setAttribute("style", "position: absolute; left: 0px; top: 0px;") webGlCanvas.setAttribute("style", "position: absolute; left: 0px; top: 0px;" ) canvas.setAttribute("style", "position: absolute; left: 0px; top: 0px; z-index: 10; width: 1000px; height: 500px;" ) @@ -228,10 +73,6 @@ textCanvas.width = view.width.toInt() textCanvas.height = view.height.toInt() -// -// html.canvas2d.fillStyle = "green" -// html.canvas2d.font = "bold 36pt Arial" -// html.canvas2d.fillText("Hello World!", 10.0, 40.0) gl().viewport(0, 0, view.width.toInt(), view.height.toInt()) canvas.setAttribute("style", "position: absolute; left: 0px; top: 0px; z-index: 5; width: ${view.windowWidth}px; height: ${view.windowHeight}px;" ) diff --git a/lib/kotludens/com/persesgames/game/Screen.kt b/lib/kotludens/com/persesgames/game/Screen.kt index 42ddeca..6fb558e 100644 --- a/lib/kotludens/com/persesgames/game/Screen.kt +++ b/lib/kotludens/com/persesgames/game/Screen.kt @@ -1,8 +1,11 @@ package com.persesgames.game +import org.khronos.webgl.WebGLRenderingContext + /** * Created by rnentjes on 19-4-16. */ + abstract class Screen { open fun loadResources() { @@ -18,3 +21,15 @@ abstract fun render() } + + +class DefaultScreen: Screen() { + override fun update(time: Float, delta: Float) { + } + + override fun render() { + // show loading message? + Game.gl().clearColor(1f, 1f, 0f, 1f) + Game.gl().clear(WebGLRenderingContext.COLOR_BUFFER_BIT) + } +} \ No newline at end of file diff --git a/lib/kotludens/com/persesgames/game/Game.kt b/lib/kotludens/com/persesgames/game/Game.kt index c65d346..89bfc47 100644 --- a/lib/kotludens/com/persesgames/game/Game.kt +++ b/lib/kotludens/com/persesgames/game/Game.kt @@ -1,6 +1,5 @@ package com.persesgames.game -import com.persesgames.math.Matrix4 import com.persesgames.texture.Textures import org.khronos.webgl.WebGLRenderingContext import org.w3c.dom.CanvasRenderingContext2D @@ -13,160 +12,6 @@ * Created by rnentjes on 19-4-16. */ -class DefaultScreen: Screen() { - override fun update(time: Float, delta: Float) { - } - - override fun render() { - // show loading message? - Game.gl().clearColor(1f, 1f, 0f, 1f) - Game.gl().clear(WebGLRenderingContext.COLOR_BUFFER_BIT) - } -} - -enum class ViewType { - PROJECTION, - WIDTH, - HEIGHT, - ABSOLUTE -} - -class View( - var windowWidth: Int = 2000, - var windowHeight: Int =1000, - var width: Float = 1024f, - var height: Float = 1024f, - var angle: Float = 60f, - var near: Float = -0.1f, - var far: Float = -100f, - var minAspectRatio: Float = 1f, - var maxAspectRatio: Float = 1f, - var viewType: ViewType = ViewType.WIDTH) { - var vMatrix = Matrix4() - var aspectRatio = 1f - - init { - updateView() - } - - fun updateView() { - aspectRatio = windowWidth / windowHeight.toFloat() - - if (aspectRatio < minAspectRatio) { - - } - - if (aspectRatio > maxAspectRatio) { - - } - - when(viewType) { - ViewType.ABSOLUTE -> { - vMatrix.setOrthographicProjection(0f, width, 0f, height, near, far) - } - ViewType.WIDTH -> { - height = width / aspectRatio - - vMatrix.setOrthographicProjection(-width / 2, width / 2, -height / 2, height / 2, near, far) - } - ViewType.HEIGHT -> { - width = height * aspectRatio - - vMatrix.setOrthographicProjection(-width / 2, width / 2, -height / 2, height / 2, near, far) - } - ViewType.PROJECTION -> { - vMatrix.setPerspectiveProjection(angle, aspectRatio, near, far); - } - else -> { - throw IllegalStateException("ViewType $viewType not implemented!") - } - } - - println("width: $width, height: $height") - } - - fun screenToGameCoordX(screenX: Float): Float { - var result = screenX - - when(viewType) { - ViewType.ABSOLUTE -> { - // nop - } - ViewType.WIDTH -> { - result = (screenX / windowWidth * width) - width / 2 - } - ViewType.HEIGHT -> { - result = (screenX / windowWidth * width) - width / 2 - } - ViewType.PROJECTION -> { - // uhm - } - else -> { - throw IllegalStateException("ViewType $viewType not implemented!") - } - } - - return result - } - - fun screenToGameCoordY(screenY: Float): Float { - var result = screenY - - when(viewType) { - ViewType.ABSOLUTE -> { - // nop - } - ViewType.WIDTH -> { - result = (screenY / windowHeight * height) - height / 2 - } - ViewType.HEIGHT -> { - result = (screenY / windowHeight * height) - height / 2 - } - ViewType.PROJECTION -> { - // uhm - } - else -> { - throw IllegalStateException("ViewType $viewType not implemented!") - } - } - - return result - } - - fun setToWidth(width: Float) { - this.width = width - this.viewType = ViewType.WIDTH - - updateView() - } - - fun setToHeight(height: Float) { - this.height = height - this.viewType = ViewType.HEIGHT - - updateView() - } - - fun setProjection(angle: Float) { - this.angle = angle - this.viewType = ViewType.PROJECTION - - updateView() - } - - fun setNear(near: Float) { - this.near = near - - updateView() - } - - fun setFar(far: Float) { - this.far = far - - updateView() - } -} - class HTMLElements { var container: HTMLElement var webgl: WebGLRenderingContext @@ -178,7 +23,7 @@ val webGlCanvas = document.createElement("canvas") as HTMLCanvasElement val canvas = document.createElement("canvas") as HTMLCanvasElement - container.setAttribute("style", "position: relative;") + container.setAttribute("style", "position: absolute; left: 0px; top: 0px;") webGlCanvas.setAttribute("style", "position: absolute; left: 0px; top: 0px;" ) canvas.setAttribute("style", "position: absolute; left: 0px; top: 0px; z-index: 10; width: 1000px; height: 500px;" ) @@ -228,10 +73,6 @@ textCanvas.width = view.width.toInt() textCanvas.height = view.height.toInt() -// -// html.canvas2d.fillStyle = "green" -// html.canvas2d.font = "bold 36pt Arial" -// html.canvas2d.fillText("Hello World!", 10.0, 40.0) gl().viewport(0, 0, view.width.toInt(), view.height.toInt()) canvas.setAttribute("style", "position: absolute; left: 0px; top: 0px; z-index: 5; width: ${view.windowWidth}px; height: ${view.windowHeight}px;" ) diff --git a/lib/kotludens/com/persesgames/game/Screen.kt b/lib/kotludens/com/persesgames/game/Screen.kt index 42ddeca..6fb558e 100644 --- a/lib/kotludens/com/persesgames/game/Screen.kt +++ b/lib/kotludens/com/persesgames/game/Screen.kt @@ -1,8 +1,11 @@ package com.persesgames.game +import org.khronos.webgl.WebGLRenderingContext + /** * Created by rnentjes on 19-4-16. */ + abstract class Screen { open fun loadResources() { @@ -18,3 +21,15 @@ abstract fun render() } + + +class DefaultScreen: Screen() { + override fun update(time: Float, delta: Float) { + } + + override fun render() { + // show loading message? + Game.gl().clearColor(1f, 1f, 0f, 1f) + Game.gl().clear(WebGLRenderingContext.COLOR_BUFFER_BIT) + } +} \ No newline at end of file diff --git a/lib/kotludens/com/persesgames/game/View.kt b/lib/kotludens/com/persesgames/game/View.kt new file mode 100644 index 0000000..357b8b8 --- /dev/null +++ b/lib/kotludens/com/persesgames/game/View.kt @@ -0,0 +1,196 @@ +package com.persesgames.game + +import com.persesgames.math.Matrix4 + +enum class ViewType { + PROJECTION, + WIDTH, + HEIGHT, + ABSOLUTE +} + +class View( + var windowWidth: Int = 2000, + var windowHeight: Int =1000, + var width: Float = 1024f, + var height: Float = 1024f, + var angle: Float = 60f, + var near: Float = -0.1f, + var far: Float = -100f, + var minAspectRatio: Float = 1f, + var maxAspectRatio: Float = 1f, + var viewType: ViewType = ViewType.WIDTH) { + var vMatrix = Matrix4() + var aspectRatio = 1f + + init { + updateView() + } + + fun updateView() { + aspectRatio = windowWidth / windowHeight.toFloat() + + if (aspectRatio < minAspectRatio) { + + } + + if (aspectRatio > maxAspectRatio) { + + } + + when(viewType) { + ViewType.ABSOLUTE -> { + vMatrix.setOrthographicProjection(0f, width, 0f, height, near, far) + } + ViewType.WIDTH -> { + height = width / aspectRatio + + vMatrix.setOrthographicProjection(-width / 2, width / 2, -height / 2, height / 2, near, far) + } + ViewType.HEIGHT -> { + width = height * aspectRatio + + vMatrix.setOrthographicProjection(-width / 2, width / 2, -height / 2, height / 2, near, far) + } + ViewType.PROJECTION -> { + vMatrix.setPerspectiveProjection(angle, aspectRatio, near, far); + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + println("width: $width, height: $height") + } + + fun screenToGameCoordX(screenX: Float): Float { + var result = screenX + + when(viewType) { + ViewType.ABSOLUTE -> { + // nop + } + ViewType.WIDTH -> { + result = (screenX / windowWidth * width) - width / 2 + } + ViewType.HEIGHT -> { + result = (screenX / windowWidth * width) - width / 2 + } + ViewType.PROJECTION -> { + // uhm + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + return result + } + + fun screenToGameCoordY(screenY: Float): Float { + var result = screenY + + when(viewType) { + ViewType.ABSOLUTE -> { + // nop + } + ViewType.WIDTH -> { + result = - ( (screenY / windowHeight * height) - height / 2 ) + } + ViewType.HEIGHT -> { + result = - ( (screenY / windowHeight * height) - height / 2 ) + } + ViewType.PROJECTION -> { + // uhm + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + return result + } + + fun gameToScreenCoordX(gameX: Float): Float { + var result = gameX + val normalizedX = gameX + (width / 2) + + when(viewType) { + ViewType.ABSOLUTE -> { + // nop + } + ViewType.WIDTH -> { + result = (windowWidth / width * normalizedX) + } + ViewType.HEIGHT -> { + result = (windowWidth / width * normalizedX) + } + ViewType.PROJECTION -> { + // uhm + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + return result + } + + fun gameToScreenCoordY(gameY: Float): Float { + var result = gameY + val normalizedY = gameY + (height / 2) + + when(viewType) { + ViewType.ABSOLUTE -> { + // nop + } + ViewType.WIDTH -> { + result = windowHeight - (windowHeight / height * normalizedY) + } + ViewType.HEIGHT -> { + result = windowHeight - (windowHeight / height * normalizedY) + } + ViewType.PROJECTION -> { + // uhm + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + return result + } + + fun setToWidth(width: Float) { + this.width = width + this.viewType = ViewType.WIDTH + + updateView() + } + + fun setToHeight(height: Float) { + this.height = height + this.viewType = ViewType.HEIGHT + + updateView() + } + + fun setProjection(angle: Float) { + this.angle = angle + this.viewType = ViewType.PROJECTION + + updateView() + } + + fun setNear(near: Float) { + this.near = near + + updateView() + } + + fun setFar(far: Float) { + this.far = far + + updateView() + } +} \ No newline at end of file diff --git a/lib/kotludens/com/persesgames/game/Game.kt b/lib/kotludens/com/persesgames/game/Game.kt index c65d346..89bfc47 100644 --- a/lib/kotludens/com/persesgames/game/Game.kt +++ b/lib/kotludens/com/persesgames/game/Game.kt @@ -1,6 +1,5 @@ package com.persesgames.game -import com.persesgames.math.Matrix4 import com.persesgames.texture.Textures import org.khronos.webgl.WebGLRenderingContext import org.w3c.dom.CanvasRenderingContext2D @@ -13,160 +12,6 @@ * Created by rnentjes on 19-4-16. */ -class DefaultScreen: Screen() { - override fun update(time: Float, delta: Float) { - } - - override fun render() { - // show loading message? - Game.gl().clearColor(1f, 1f, 0f, 1f) - Game.gl().clear(WebGLRenderingContext.COLOR_BUFFER_BIT) - } -} - -enum class ViewType { - PROJECTION, - WIDTH, - HEIGHT, - ABSOLUTE -} - -class View( - var windowWidth: Int = 2000, - var windowHeight: Int =1000, - var width: Float = 1024f, - var height: Float = 1024f, - var angle: Float = 60f, - var near: Float = -0.1f, - var far: Float = -100f, - var minAspectRatio: Float = 1f, - var maxAspectRatio: Float = 1f, - var viewType: ViewType = ViewType.WIDTH) { - var vMatrix = Matrix4() - var aspectRatio = 1f - - init { - updateView() - } - - fun updateView() { - aspectRatio = windowWidth / windowHeight.toFloat() - - if (aspectRatio < minAspectRatio) { - - } - - if (aspectRatio > maxAspectRatio) { - - } - - when(viewType) { - ViewType.ABSOLUTE -> { - vMatrix.setOrthographicProjection(0f, width, 0f, height, near, far) - } - ViewType.WIDTH -> { - height = width / aspectRatio - - vMatrix.setOrthographicProjection(-width / 2, width / 2, -height / 2, height / 2, near, far) - } - ViewType.HEIGHT -> { - width = height * aspectRatio - - vMatrix.setOrthographicProjection(-width / 2, width / 2, -height / 2, height / 2, near, far) - } - ViewType.PROJECTION -> { - vMatrix.setPerspectiveProjection(angle, aspectRatio, near, far); - } - else -> { - throw IllegalStateException("ViewType $viewType not implemented!") - } - } - - println("width: $width, height: $height") - } - - fun screenToGameCoordX(screenX: Float): Float { - var result = screenX - - when(viewType) { - ViewType.ABSOLUTE -> { - // nop - } - ViewType.WIDTH -> { - result = (screenX / windowWidth * width) - width / 2 - } - ViewType.HEIGHT -> { - result = (screenX / windowWidth * width) - width / 2 - } - ViewType.PROJECTION -> { - // uhm - } - else -> { - throw IllegalStateException("ViewType $viewType not implemented!") - } - } - - return result - } - - fun screenToGameCoordY(screenY: Float): Float { - var result = screenY - - when(viewType) { - ViewType.ABSOLUTE -> { - // nop - } - ViewType.WIDTH -> { - result = (screenY / windowHeight * height) - height / 2 - } - ViewType.HEIGHT -> { - result = (screenY / windowHeight * height) - height / 2 - } - ViewType.PROJECTION -> { - // uhm - } - else -> { - throw IllegalStateException("ViewType $viewType not implemented!") - } - } - - return result - } - - fun setToWidth(width: Float) { - this.width = width - this.viewType = ViewType.WIDTH - - updateView() - } - - fun setToHeight(height: Float) { - this.height = height - this.viewType = ViewType.HEIGHT - - updateView() - } - - fun setProjection(angle: Float) { - this.angle = angle - this.viewType = ViewType.PROJECTION - - updateView() - } - - fun setNear(near: Float) { - this.near = near - - updateView() - } - - fun setFar(far: Float) { - this.far = far - - updateView() - } -} - class HTMLElements { var container: HTMLElement var webgl: WebGLRenderingContext @@ -178,7 +23,7 @@ val webGlCanvas = document.createElement("canvas") as HTMLCanvasElement val canvas = document.createElement("canvas") as HTMLCanvasElement - container.setAttribute("style", "position: relative;") + container.setAttribute("style", "position: absolute; left: 0px; top: 0px;") webGlCanvas.setAttribute("style", "position: absolute; left: 0px; top: 0px;" ) canvas.setAttribute("style", "position: absolute; left: 0px; top: 0px; z-index: 10; width: 1000px; height: 500px;" ) @@ -228,10 +73,6 @@ textCanvas.width = view.width.toInt() textCanvas.height = view.height.toInt() -// -// html.canvas2d.fillStyle = "green" -// html.canvas2d.font = "bold 36pt Arial" -// html.canvas2d.fillText("Hello World!", 10.0, 40.0) gl().viewport(0, 0, view.width.toInt(), view.height.toInt()) canvas.setAttribute("style", "position: absolute; left: 0px; top: 0px; z-index: 5; width: ${view.windowWidth}px; height: ${view.windowHeight}px;" ) diff --git a/lib/kotludens/com/persesgames/game/Screen.kt b/lib/kotludens/com/persesgames/game/Screen.kt index 42ddeca..6fb558e 100644 --- a/lib/kotludens/com/persesgames/game/Screen.kt +++ b/lib/kotludens/com/persesgames/game/Screen.kt @@ -1,8 +1,11 @@ package com.persesgames.game +import org.khronos.webgl.WebGLRenderingContext + /** * Created by rnentjes on 19-4-16. */ + abstract class Screen { open fun loadResources() { @@ -18,3 +21,15 @@ abstract fun render() } + + +class DefaultScreen: Screen() { + override fun update(time: Float, delta: Float) { + } + + override fun render() { + // show loading message? + Game.gl().clearColor(1f, 1f, 0f, 1f) + Game.gl().clear(WebGLRenderingContext.COLOR_BUFFER_BIT) + } +} \ No newline at end of file diff --git a/lib/kotludens/com/persesgames/game/View.kt b/lib/kotludens/com/persesgames/game/View.kt new file mode 100644 index 0000000..357b8b8 --- /dev/null +++ b/lib/kotludens/com/persesgames/game/View.kt @@ -0,0 +1,196 @@ +package com.persesgames.game + +import com.persesgames.math.Matrix4 + +enum class ViewType { + PROJECTION, + WIDTH, + HEIGHT, + ABSOLUTE +} + +class View( + var windowWidth: Int = 2000, + var windowHeight: Int =1000, + var width: Float = 1024f, + var height: Float = 1024f, + var angle: Float = 60f, + var near: Float = -0.1f, + var far: Float = -100f, + var minAspectRatio: Float = 1f, + var maxAspectRatio: Float = 1f, + var viewType: ViewType = ViewType.WIDTH) { + var vMatrix = Matrix4() + var aspectRatio = 1f + + init { + updateView() + } + + fun updateView() { + aspectRatio = windowWidth / windowHeight.toFloat() + + if (aspectRatio < minAspectRatio) { + + } + + if (aspectRatio > maxAspectRatio) { + + } + + when(viewType) { + ViewType.ABSOLUTE -> { + vMatrix.setOrthographicProjection(0f, width, 0f, height, near, far) + } + ViewType.WIDTH -> { + height = width / aspectRatio + + vMatrix.setOrthographicProjection(-width / 2, width / 2, -height / 2, height / 2, near, far) + } + ViewType.HEIGHT -> { + width = height * aspectRatio + + vMatrix.setOrthographicProjection(-width / 2, width / 2, -height / 2, height / 2, near, far) + } + ViewType.PROJECTION -> { + vMatrix.setPerspectiveProjection(angle, aspectRatio, near, far); + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + println("width: $width, height: $height") + } + + fun screenToGameCoordX(screenX: Float): Float { + var result = screenX + + when(viewType) { + ViewType.ABSOLUTE -> { + // nop + } + ViewType.WIDTH -> { + result = (screenX / windowWidth * width) - width / 2 + } + ViewType.HEIGHT -> { + result = (screenX / windowWidth * width) - width / 2 + } + ViewType.PROJECTION -> { + // uhm + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + return result + } + + fun screenToGameCoordY(screenY: Float): Float { + var result = screenY + + when(viewType) { + ViewType.ABSOLUTE -> { + // nop + } + ViewType.WIDTH -> { + result = - ( (screenY / windowHeight * height) - height / 2 ) + } + ViewType.HEIGHT -> { + result = - ( (screenY / windowHeight * height) - height / 2 ) + } + ViewType.PROJECTION -> { + // uhm + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + return result + } + + fun gameToScreenCoordX(gameX: Float): Float { + var result = gameX + val normalizedX = gameX + (width / 2) + + when(viewType) { + ViewType.ABSOLUTE -> { + // nop + } + ViewType.WIDTH -> { + result = (windowWidth / width * normalizedX) + } + ViewType.HEIGHT -> { + result = (windowWidth / width * normalizedX) + } + ViewType.PROJECTION -> { + // uhm + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + return result + } + + fun gameToScreenCoordY(gameY: Float): Float { + var result = gameY + val normalizedY = gameY + (height / 2) + + when(viewType) { + ViewType.ABSOLUTE -> { + // nop + } + ViewType.WIDTH -> { + result = windowHeight - (windowHeight / height * normalizedY) + } + ViewType.HEIGHT -> { + result = windowHeight - (windowHeight / height * normalizedY) + } + ViewType.PROJECTION -> { + // uhm + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + return result + } + + fun setToWidth(width: Float) { + this.width = width + this.viewType = ViewType.WIDTH + + updateView() + } + + fun setToHeight(height: Float) { + this.height = height + this.viewType = ViewType.HEIGHT + + updateView() + } + + fun setProjection(angle: Float) { + this.angle = angle + this.viewType = ViewType.PROJECTION + + updateView() + } + + fun setNear(near: Float) { + this.near = near + + updateView() + } + + fun setFar(far: Float) { + this.far = far + + updateView() + } +} \ No newline at end of file diff --git a/lib/kotludens/com/persesgames/sound/Music.kt b/lib/kotludens/com/persesgames/sound/Music.kt index 7e1879b..88a531d 100644 --- a/lib/kotludens/com/persesgames/sound/Music.kt +++ b/lib/kotludens/com/persesgames/sound/Music.kt @@ -22,7 +22,7 @@ return audio; } - fun play(url: String, volume: Double = 0.75, looping: Boolean = false) { + fun play(url: String, volume: Double = 0.75, looping: Boolean = false): HTMLAudioElement { val audio = document.createElement("audio") as HTMLAudioElement audio.src = url @@ -39,6 +39,8 @@ playing.remove(audio) } }) + + return audio } fun stopAll() { diff --git a/lib/kotludens/com/persesgames/game/Game.kt b/lib/kotludens/com/persesgames/game/Game.kt index c65d346..89bfc47 100644 --- a/lib/kotludens/com/persesgames/game/Game.kt +++ b/lib/kotludens/com/persesgames/game/Game.kt @@ -1,6 +1,5 @@ package com.persesgames.game -import com.persesgames.math.Matrix4 import com.persesgames.texture.Textures import org.khronos.webgl.WebGLRenderingContext import org.w3c.dom.CanvasRenderingContext2D @@ -13,160 +12,6 @@ * Created by rnentjes on 19-4-16. */ -class DefaultScreen: Screen() { - override fun update(time: Float, delta: Float) { - } - - override fun render() { - // show loading message? - Game.gl().clearColor(1f, 1f, 0f, 1f) - Game.gl().clear(WebGLRenderingContext.COLOR_BUFFER_BIT) - } -} - -enum class ViewType { - PROJECTION, - WIDTH, - HEIGHT, - ABSOLUTE -} - -class View( - var windowWidth: Int = 2000, - var windowHeight: Int =1000, - var width: Float = 1024f, - var height: Float = 1024f, - var angle: Float = 60f, - var near: Float = -0.1f, - var far: Float = -100f, - var minAspectRatio: Float = 1f, - var maxAspectRatio: Float = 1f, - var viewType: ViewType = ViewType.WIDTH) { - var vMatrix = Matrix4() - var aspectRatio = 1f - - init { - updateView() - } - - fun updateView() { - aspectRatio = windowWidth / windowHeight.toFloat() - - if (aspectRatio < minAspectRatio) { - - } - - if (aspectRatio > maxAspectRatio) { - - } - - when(viewType) { - ViewType.ABSOLUTE -> { - vMatrix.setOrthographicProjection(0f, width, 0f, height, near, far) - } - ViewType.WIDTH -> { - height = width / aspectRatio - - vMatrix.setOrthographicProjection(-width / 2, width / 2, -height / 2, height / 2, near, far) - } - ViewType.HEIGHT -> { - width = height * aspectRatio - - vMatrix.setOrthographicProjection(-width / 2, width / 2, -height / 2, height / 2, near, far) - } - ViewType.PROJECTION -> { - vMatrix.setPerspectiveProjection(angle, aspectRatio, near, far); - } - else -> { - throw IllegalStateException("ViewType $viewType not implemented!") - } - } - - println("width: $width, height: $height") - } - - fun screenToGameCoordX(screenX: Float): Float { - var result = screenX - - when(viewType) { - ViewType.ABSOLUTE -> { - // nop - } - ViewType.WIDTH -> { - result = (screenX / windowWidth * width) - width / 2 - } - ViewType.HEIGHT -> { - result = (screenX / windowWidth * width) - width / 2 - } - ViewType.PROJECTION -> { - // uhm - } - else -> { - throw IllegalStateException("ViewType $viewType not implemented!") - } - } - - return result - } - - fun screenToGameCoordY(screenY: Float): Float { - var result = screenY - - when(viewType) { - ViewType.ABSOLUTE -> { - // nop - } - ViewType.WIDTH -> { - result = (screenY / windowHeight * height) - height / 2 - } - ViewType.HEIGHT -> { - result = (screenY / windowHeight * height) - height / 2 - } - ViewType.PROJECTION -> { - // uhm - } - else -> { - throw IllegalStateException("ViewType $viewType not implemented!") - } - } - - return result - } - - fun setToWidth(width: Float) { - this.width = width - this.viewType = ViewType.WIDTH - - updateView() - } - - fun setToHeight(height: Float) { - this.height = height - this.viewType = ViewType.HEIGHT - - updateView() - } - - fun setProjection(angle: Float) { - this.angle = angle - this.viewType = ViewType.PROJECTION - - updateView() - } - - fun setNear(near: Float) { - this.near = near - - updateView() - } - - fun setFar(far: Float) { - this.far = far - - updateView() - } -} - class HTMLElements { var container: HTMLElement var webgl: WebGLRenderingContext @@ -178,7 +23,7 @@ val webGlCanvas = document.createElement("canvas") as HTMLCanvasElement val canvas = document.createElement("canvas") as HTMLCanvasElement - container.setAttribute("style", "position: relative;") + container.setAttribute("style", "position: absolute; left: 0px; top: 0px;") webGlCanvas.setAttribute("style", "position: absolute; left: 0px; top: 0px;" ) canvas.setAttribute("style", "position: absolute; left: 0px; top: 0px; z-index: 10; width: 1000px; height: 500px;" ) @@ -228,10 +73,6 @@ textCanvas.width = view.width.toInt() textCanvas.height = view.height.toInt() -// -// html.canvas2d.fillStyle = "green" -// html.canvas2d.font = "bold 36pt Arial" -// html.canvas2d.fillText("Hello World!", 10.0, 40.0) gl().viewport(0, 0, view.width.toInt(), view.height.toInt()) canvas.setAttribute("style", "position: absolute; left: 0px; top: 0px; z-index: 5; width: ${view.windowWidth}px; height: ${view.windowHeight}px;" ) diff --git a/lib/kotludens/com/persesgames/game/Screen.kt b/lib/kotludens/com/persesgames/game/Screen.kt index 42ddeca..6fb558e 100644 --- a/lib/kotludens/com/persesgames/game/Screen.kt +++ b/lib/kotludens/com/persesgames/game/Screen.kt @@ -1,8 +1,11 @@ package com.persesgames.game +import org.khronos.webgl.WebGLRenderingContext + /** * Created by rnentjes on 19-4-16. */ + abstract class Screen { open fun loadResources() { @@ -18,3 +21,15 @@ abstract fun render() } + + +class DefaultScreen: Screen() { + override fun update(time: Float, delta: Float) { + } + + override fun render() { + // show loading message? + Game.gl().clearColor(1f, 1f, 0f, 1f) + Game.gl().clear(WebGLRenderingContext.COLOR_BUFFER_BIT) + } +} \ No newline at end of file diff --git a/lib/kotludens/com/persesgames/game/View.kt b/lib/kotludens/com/persesgames/game/View.kt new file mode 100644 index 0000000..357b8b8 --- /dev/null +++ b/lib/kotludens/com/persesgames/game/View.kt @@ -0,0 +1,196 @@ +package com.persesgames.game + +import com.persesgames.math.Matrix4 + +enum class ViewType { + PROJECTION, + WIDTH, + HEIGHT, + ABSOLUTE +} + +class View( + var windowWidth: Int = 2000, + var windowHeight: Int =1000, + var width: Float = 1024f, + var height: Float = 1024f, + var angle: Float = 60f, + var near: Float = -0.1f, + var far: Float = -100f, + var minAspectRatio: Float = 1f, + var maxAspectRatio: Float = 1f, + var viewType: ViewType = ViewType.WIDTH) { + var vMatrix = Matrix4() + var aspectRatio = 1f + + init { + updateView() + } + + fun updateView() { + aspectRatio = windowWidth / windowHeight.toFloat() + + if (aspectRatio < minAspectRatio) { + + } + + if (aspectRatio > maxAspectRatio) { + + } + + when(viewType) { + ViewType.ABSOLUTE -> { + vMatrix.setOrthographicProjection(0f, width, 0f, height, near, far) + } + ViewType.WIDTH -> { + height = width / aspectRatio + + vMatrix.setOrthographicProjection(-width / 2, width / 2, -height / 2, height / 2, near, far) + } + ViewType.HEIGHT -> { + width = height * aspectRatio + + vMatrix.setOrthographicProjection(-width / 2, width / 2, -height / 2, height / 2, near, far) + } + ViewType.PROJECTION -> { + vMatrix.setPerspectiveProjection(angle, aspectRatio, near, far); + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + println("width: $width, height: $height") + } + + fun screenToGameCoordX(screenX: Float): Float { + var result = screenX + + when(viewType) { + ViewType.ABSOLUTE -> { + // nop + } + ViewType.WIDTH -> { + result = (screenX / windowWidth * width) - width / 2 + } + ViewType.HEIGHT -> { + result = (screenX / windowWidth * width) - width / 2 + } + ViewType.PROJECTION -> { + // uhm + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + return result + } + + fun screenToGameCoordY(screenY: Float): Float { + var result = screenY + + when(viewType) { + ViewType.ABSOLUTE -> { + // nop + } + ViewType.WIDTH -> { + result = - ( (screenY / windowHeight * height) - height / 2 ) + } + ViewType.HEIGHT -> { + result = - ( (screenY / windowHeight * height) - height / 2 ) + } + ViewType.PROJECTION -> { + // uhm + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + return result + } + + fun gameToScreenCoordX(gameX: Float): Float { + var result = gameX + val normalizedX = gameX + (width / 2) + + when(viewType) { + ViewType.ABSOLUTE -> { + // nop + } + ViewType.WIDTH -> { + result = (windowWidth / width * normalizedX) + } + ViewType.HEIGHT -> { + result = (windowWidth / width * normalizedX) + } + ViewType.PROJECTION -> { + // uhm + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + return result + } + + fun gameToScreenCoordY(gameY: Float): Float { + var result = gameY + val normalizedY = gameY + (height / 2) + + when(viewType) { + ViewType.ABSOLUTE -> { + // nop + } + ViewType.WIDTH -> { + result = windowHeight - (windowHeight / height * normalizedY) + } + ViewType.HEIGHT -> { + result = windowHeight - (windowHeight / height * normalizedY) + } + ViewType.PROJECTION -> { + // uhm + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + return result + } + + fun setToWidth(width: Float) { + this.width = width + this.viewType = ViewType.WIDTH + + updateView() + } + + fun setToHeight(height: Float) { + this.height = height + this.viewType = ViewType.HEIGHT + + updateView() + } + + fun setProjection(angle: Float) { + this.angle = angle + this.viewType = ViewType.PROJECTION + + updateView() + } + + fun setNear(near: Float) { + this.near = near + + updateView() + } + + fun setFar(far: Float) { + this.far = far + + updateView() + } +} \ No newline at end of file diff --git a/lib/kotludens/com/persesgames/sound/Music.kt b/lib/kotludens/com/persesgames/sound/Music.kt index 7e1879b..88a531d 100644 --- a/lib/kotludens/com/persesgames/sound/Music.kt +++ b/lib/kotludens/com/persesgames/sound/Music.kt @@ -22,7 +22,7 @@ return audio; } - fun play(url: String, volume: Double = 0.75, looping: Boolean = false) { + fun play(url: String, volume: Double = 0.75, looping: Boolean = false): HTMLAudioElement { val audio = document.createElement("audio") as HTMLAudioElement audio.src = url @@ -39,6 +39,8 @@ playing.remove(audio) } }) + + return audio } fun stopAll() { diff --git a/lib/kotludens/com/persesgames/text/Texts.kt b/lib/kotludens/com/persesgames/text/Texts.kt index 5263af4..d3200a9 100644 --- a/lib/kotludens/com/persesgames/text/Texts.kt +++ b/lib/kotludens/com/persesgames/text/Texts.kt @@ -13,4 +13,14 @@ Game.html.canvas2d.font = font Game.html.canvas2d.fillText(message, x.toDouble(), y.toDouble()) } -} \ No newline at end of file + + fun drawLeftTop(left: Float, top: Float, message: String, font: String = "bold 24pt Arial", fillStyle: String = "white") { + drawText( + Game.view.gameToScreenCoordX(-Game.view.width / 2f + left), + Game.view.gameToScreenCoordY(Game.view.height / 2f - top), + message, + font, + fillStyle + ) + } +} diff --git a/lib/kotludens/com/persesgames/game/Game.kt b/lib/kotludens/com/persesgames/game/Game.kt index c65d346..89bfc47 100644 --- a/lib/kotludens/com/persesgames/game/Game.kt +++ b/lib/kotludens/com/persesgames/game/Game.kt @@ -1,6 +1,5 @@ package com.persesgames.game -import com.persesgames.math.Matrix4 import com.persesgames.texture.Textures import org.khronos.webgl.WebGLRenderingContext import org.w3c.dom.CanvasRenderingContext2D @@ -13,160 +12,6 @@ * Created by rnentjes on 19-4-16. */ -class DefaultScreen: Screen() { - override fun update(time: Float, delta: Float) { - } - - override fun render() { - // show loading message? - Game.gl().clearColor(1f, 1f, 0f, 1f) - Game.gl().clear(WebGLRenderingContext.COLOR_BUFFER_BIT) - } -} - -enum class ViewType { - PROJECTION, - WIDTH, - HEIGHT, - ABSOLUTE -} - -class View( - var windowWidth: Int = 2000, - var windowHeight: Int =1000, - var width: Float = 1024f, - var height: Float = 1024f, - var angle: Float = 60f, - var near: Float = -0.1f, - var far: Float = -100f, - var minAspectRatio: Float = 1f, - var maxAspectRatio: Float = 1f, - var viewType: ViewType = ViewType.WIDTH) { - var vMatrix = Matrix4() - var aspectRatio = 1f - - init { - updateView() - } - - fun updateView() { - aspectRatio = windowWidth / windowHeight.toFloat() - - if (aspectRatio < minAspectRatio) { - - } - - if (aspectRatio > maxAspectRatio) { - - } - - when(viewType) { - ViewType.ABSOLUTE -> { - vMatrix.setOrthographicProjection(0f, width, 0f, height, near, far) - } - ViewType.WIDTH -> { - height = width / aspectRatio - - vMatrix.setOrthographicProjection(-width / 2, width / 2, -height / 2, height / 2, near, far) - } - ViewType.HEIGHT -> { - width = height * aspectRatio - - vMatrix.setOrthographicProjection(-width / 2, width / 2, -height / 2, height / 2, near, far) - } - ViewType.PROJECTION -> { - vMatrix.setPerspectiveProjection(angle, aspectRatio, near, far); - } - else -> { - throw IllegalStateException("ViewType $viewType not implemented!") - } - } - - println("width: $width, height: $height") - } - - fun screenToGameCoordX(screenX: Float): Float { - var result = screenX - - when(viewType) { - ViewType.ABSOLUTE -> { - // nop - } - ViewType.WIDTH -> { - result = (screenX / windowWidth * width) - width / 2 - } - ViewType.HEIGHT -> { - result = (screenX / windowWidth * width) - width / 2 - } - ViewType.PROJECTION -> { - // uhm - } - else -> { - throw IllegalStateException("ViewType $viewType not implemented!") - } - } - - return result - } - - fun screenToGameCoordY(screenY: Float): Float { - var result = screenY - - when(viewType) { - ViewType.ABSOLUTE -> { - // nop - } - ViewType.WIDTH -> { - result = (screenY / windowHeight * height) - height / 2 - } - ViewType.HEIGHT -> { - result = (screenY / windowHeight * height) - height / 2 - } - ViewType.PROJECTION -> { - // uhm - } - else -> { - throw IllegalStateException("ViewType $viewType not implemented!") - } - } - - return result - } - - fun setToWidth(width: Float) { - this.width = width - this.viewType = ViewType.WIDTH - - updateView() - } - - fun setToHeight(height: Float) { - this.height = height - this.viewType = ViewType.HEIGHT - - updateView() - } - - fun setProjection(angle: Float) { - this.angle = angle - this.viewType = ViewType.PROJECTION - - updateView() - } - - fun setNear(near: Float) { - this.near = near - - updateView() - } - - fun setFar(far: Float) { - this.far = far - - updateView() - } -} - class HTMLElements { var container: HTMLElement var webgl: WebGLRenderingContext @@ -178,7 +23,7 @@ val webGlCanvas = document.createElement("canvas") as HTMLCanvasElement val canvas = document.createElement("canvas") as HTMLCanvasElement - container.setAttribute("style", "position: relative;") + container.setAttribute("style", "position: absolute; left: 0px; top: 0px;") webGlCanvas.setAttribute("style", "position: absolute; left: 0px; top: 0px;" ) canvas.setAttribute("style", "position: absolute; left: 0px; top: 0px; z-index: 10; width: 1000px; height: 500px;" ) @@ -228,10 +73,6 @@ textCanvas.width = view.width.toInt() textCanvas.height = view.height.toInt() -// -// html.canvas2d.fillStyle = "green" -// html.canvas2d.font = "bold 36pt Arial" -// html.canvas2d.fillText("Hello World!", 10.0, 40.0) gl().viewport(0, 0, view.width.toInt(), view.height.toInt()) canvas.setAttribute("style", "position: absolute; left: 0px; top: 0px; z-index: 5; width: ${view.windowWidth}px; height: ${view.windowHeight}px;" ) diff --git a/lib/kotludens/com/persesgames/game/Screen.kt b/lib/kotludens/com/persesgames/game/Screen.kt index 42ddeca..6fb558e 100644 --- a/lib/kotludens/com/persesgames/game/Screen.kt +++ b/lib/kotludens/com/persesgames/game/Screen.kt @@ -1,8 +1,11 @@ package com.persesgames.game +import org.khronos.webgl.WebGLRenderingContext + /** * Created by rnentjes on 19-4-16. */ + abstract class Screen { open fun loadResources() { @@ -18,3 +21,15 @@ abstract fun render() } + + +class DefaultScreen: Screen() { + override fun update(time: Float, delta: Float) { + } + + override fun render() { + // show loading message? + Game.gl().clearColor(1f, 1f, 0f, 1f) + Game.gl().clear(WebGLRenderingContext.COLOR_BUFFER_BIT) + } +} \ No newline at end of file diff --git a/lib/kotludens/com/persesgames/game/View.kt b/lib/kotludens/com/persesgames/game/View.kt new file mode 100644 index 0000000..357b8b8 --- /dev/null +++ b/lib/kotludens/com/persesgames/game/View.kt @@ -0,0 +1,196 @@ +package com.persesgames.game + +import com.persesgames.math.Matrix4 + +enum class ViewType { + PROJECTION, + WIDTH, + HEIGHT, + ABSOLUTE +} + +class View( + var windowWidth: Int = 2000, + var windowHeight: Int =1000, + var width: Float = 1024f, + var height: Float = 1024f, + var angle: Float = 60f, + var near: Float = -0.1f, + var far: Float = -100f, + var minAspectRatio: Float = 1f, + var maxAspectRatio: Float = 1f, + var viewType: ViewType = ViewType.WIDTH) { + var vMatrix = Matrix4() + var aspectRatio = 1f + + init { + updateView() + } + + fun updateView() { + aspectRatio = windowWidth / windowHeight.toFloat() + + if (aspectRatio < minAspectRatio) { + + } + + if (aspectRatio > maxAspectRatio) { + + } + + when(viewType) { + ViewType.ABSOLUTE -> { + vMatrix.setOrthographicProjection(0f, width, 0f, height, near, far) + } + ViewType.WIDTH -> { + height = width / aspectRatio + + vMatrix.setOrthographicProjection(-width / 2, width / 2, -height / 2, height / 2, near, far) + } + ViewType.HEIGHT -> { + width = height * aspectRatio + + vMatrix.setOrthographicProjection(-width / 2, width / 2, -height / 2, height / 2, near, far) + } + ViewType.PROJECTION -> { + vMatrix.setPerspectiveProjection(angle, aspectRatio, near, far); + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + println("width: $width, height: $height") + } + + fun screenToGameCoordX(screenX: Float): Float { + var result = screenX + + when(viewType) { + ViewType.ABSOLUTE -> { + // nop + } + ViewType.WIDTH -> { + result = (screenX / windowWidth * width) - width / 2 + } + ViewType.HEIGHT -> { + result = (screenX / windowWidth * width) - width / 2 + } + ViewType.PROJECTION -> { + // uhm + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + return result + } + + fun screenToGameCoordY(screenY: Float): Float { + var result = screenY + + when(viewType) { + ViewType.ABSOLUTE -> { + // nop + } + ViewType.WIDTH -> { + result = - ( (screenY / windowHeight * height) - height / 2 ) + } + ViewType.HEIGHT -> { + result = - ( (screenY / windowHeight * height) - height / 2 ) + } + ViewType.PROJECTION -> { + // uhm + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + return result + } + + fun gameToScreenCoordX(gameX: Float): Float { + var result = gameX + val normalizedX = gameX + (width / 2) + + when(viewType) { + ViewType.ABSOLUTE -> { + // nop + } + ViewType.WIDTH -> { + result = (windowWidth / width * normalizedX) + } + ViewType.HEIGHT -> { + result = (windowWidth / width * normalizedX) + } + ViewType.PROJECTION -> { + // uhm + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + return result + } + + fun gameToScreenCoordY(gameY: Float): Float { + var result = gameY + val normalizedY = gameY + (height / 2) + + when(viewType) { + ViewType.ABSOLUTE -> { + // nop + } + ViewType.WIDTH -> { + result = windowHeight - (windowHeight / height * normalizedY) + } + ViewType.HEIGHT -> { + result = windowHeight - (windowHeight / height * normalizedY) + } + ViewType.PROJECTION -> { + // uhm + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + return result + } + + fun setToWidth(width: Float) { + this.width = width + this.viewType = ViewType.WIDTH + + updateView() + } + + fun setToHeight(height: Float) { + this.height = height + this.viewType = ViewType.HEIGHT + + updateView() + } + + fun setProjection(angle: Float) { + this.angle = angle + this.viewType = ViewType.PROJECTION + + updateView() + } + + fun setNear(near: Float) { + this.near = near + + updateView() + } + + fun setFar(far: Float) { + this.far = far + + updateView() + } +} \ No newline at end of file diff --git a/lib/kotludens/com/persesgames/sound/Music.kt b/lib/kotludens/com/persesgames/sound/Music.kt index 7e1879b..88a531d 100644 --- a/lib/kotludens/com/persesgames/sound/Music.kt +++ b/lib/kotludens/com/persesgames/sound/Music.kt @@ -22,7 +22,7 @@ return audio; } - fun play(url: String, volume: Double = 0.75, looping: Boolean = false) { + fun play(url: String, volume: Double = 0.75, looping: Boolean = false): HTMLAudioElement { val audio = document.createElement("audio") as HTMLAudioElement audio.src = url @@ -39,6 +39,8 @@ playing.remove(audio) } }) + + return audio } fun stopAll() { diff --git a/lib/kotludens/com/persesgames/text/Texts.kt b/lib/kotludens/com/persesgames/text/Texts.kt index 5263af4..d3200a9 100644 --- a/lib/kotludens/com/persesgames/text/Texts.kt +++ b/lib/kotludens/com/persesgames/text/Texts.kt @@ -13,4 +13,14 @@ Game.html.canvas2d.font = font Game.html.canvas2d.fillText(message, x.toDouble(), y.toDouble()) } -} \ No newline at end of file + + fun drawLeftTop(left: Float, top: Float, message: String, font: String = "bold 24pt Arial", fillStyle: String = "white") { + drawText( + Game.view.gameToScreenCoordX(-Game.view.width / 2f + left), + Game.view.gameToScreenCoordY(Game.view.height / 2f - top), + message, + font, + fillStyle + ) + } +} diff --git a/src/com/persesgames/Test.kt b/src/com/persesgames/Test.kt deleted file mode 100644 index 5f99768..0000000 --- a/src/com/persesgames/Test.kt +++ /dev/null @@ -1,190 +0,0 @@ -package com.persesgames - -import com.persesgames.math.Matrix4 -import com.persesgames.shader.ShaderProgram -import com.persesgames.shader.VertextAttributeInfo -import com.persesgames.texture.Textures -import org.khronos.webgl.Float32Array -import org.khronos.webgl.WebGLRenderingContext -import kotlin.browser.window - -/** - * User: rnentjes - * Date: 17-4-16 - * Time: 13:17 - */ - -private val vertexShaderSource = """ - attribute vec2 a_position; - attribute vec3 a_color; - - uniform mat4 u_projectionView; - - varying vec3 v_color; - varying vec2 v_textCoord; - - void main(void) { - v_color = a_color; - v_textCoord = a_position.xy; - - gl_Position = u_projectionView * vec4(a_position, -1, 1.0); - } -""" - -private val fragmentShaderSource = """ - precision mediump float; - - uniform sampler2D u_sampler; - - varying vec3 v_color; - varying vec2 v_textCoord; - - void main(void) { - gl_FragColor = texture2D(u_sampler, v_textCoord) * vec4(v_color, 1.0); - } -""" - -class Test(val webgl: WebGLRenderingContext) { - var red: Float = 1f - var green: Float = 1f; - var blue: Float = 0f; - var rotX: Float = 0f; - var rotY: Float = 0f; - var rotZ: Float = 0f; - var z = -1f; - - var mMatrix = Matrix4() - var vMatrix = Matrix4() - var pMatrix = Matrix4() - var program: ShaderProgram - var triangle: Float32Array - - init { - var vainfo = arrayOf( - VertextAttributeInfo("a_position", 2), - VertextAttributeInfo("a_color", 3) - ) - - program = ShaderProgram(webgl, WebGLRenderingContext.TRIANGLES, vertexShaderSource, fragmentShaderSource, vainfo, {a,b -> }) - triangle = Float32Array(arrayOf( - 0f, 0f, 1f, 0f, 0f, - 1f, 0f, 0f, 1f, 0f, - 1f, 1f, 0f, 0f, 1f, - - 1f, 1f, 0f, 0f, 1f, - 0f, 1f, 1f, 1f, 0f, - 0f, 0f, 1f, 0f, 0f - )) - - Textures.load("SHIP", "images/ship2.png") - } - - fun update(time: Double) { - if (!Textures.ready()) { - return - } - - red = Math.abs(Math.sin(time*0.5)).toFloat() - green = Math.abs(Math.cos(time*0.3)).toFloat() - blue = Math.abs(Math.cos(time*0.7)).toFloat() - - rotX = time.toFloat() / 5f - rotY = time.toFloat() / 3f - z = -2f + Math.sin(time).toFloat() * 1f - //rotZ = time.toFloat() - } - - fun render() { - resize() - - if (!Textures.ready()) { - return - } - - webgl.clearColor(red, green, blue, 0.9f) - webgl.clear(WebGLRenderingContext.COLOR_BUFFER_BIT) - - webgl.enable(WebGLRenderingContext.BLEND); - webgl.blendFunc(WebGLRenderingContext.SRC_ALPHA, WebGLRenderingContext.ONE_MINUS_SRC_ALPHA); //ONE_MINUS_DST_ALPHA); - - mMatrix.setToIdentity() - mMatrix.translate(-0.5f, -0.5f,0f); - mMatrix.scale(2f, 2f, 1f) - mMatrix.rotateX(rotX); - mMatrix.rotateY(rotY); - mMatrix.rotateZ(rotX + rotY); - mMatrix.translate(0f, 0f, z); - //triangle.set(8, red) - //triangle.set(8, green) - //triangle.set(14, blue) - - pMatrix.setPerspectiveProjection(60f, (window.innerWidth/window.innerHeight).toFloat(), 0.1f, 100f) -// pMatrix.mul(vMatrix) -// pMatrix.mul(mMatrix) - mMatrix.mul(vMatrix); - mMatrix.mul(pMatrix); -/* - program.begin() - - Textures.get("SHIP").bind() - - program.setUniform1i("u_sampler", 0) - program.setUniformMatrix4fv("u_projectionView", mMatrix.getFloat32Array()) - //program.queueVertices(triangle) - program.end()*/ - } - - fun resize() { - var canvas = webgl.canvas - // Check if the canvas is not the same size. - if (canvas.width != window.innerWidth.toInt() || - canvas.height != window.innerHeight.toInt()) { - - // Make the canvas the same size - canvas.width = window.innerWidth.toInt() - canvas.height = window.innerHeight.toInt() - - webgl.viewport(0, 0, canvas.width, canvas.height) - } - } - -} - -/* -var game: Test? = null -var start: Int = Date().getTime() -var time: Int = Date().getTime() -fun loop() { - var testInstance = game - if (testInstance != null) { - time = Date().getTime() - testInstance.update((time - start) / 1000.0) - testInstance.render() - } - - window.requestAnimationFrame { - loop() - } -} - -fun main(args: Array) { - println("Hello!") - - var canvas = document.createElement("canvas") as HTMLCanvasElement - document.body!!.appendChild(canvas) - var webgl = canvas.getContext("webgl") as WebGLRenderingContext - - canvas.on("resize", true, { - canvas.width = window.innerWidth.toInt(); - canvas.height = window.innerHeight.toInt(); - - webgl.viewport(0, 0, canvas.width, canvas.height) - }) - - Textures.load(webgl, "SHIP", "images/ship2.png") - - game = Test(webgl) - - loop() -} -*/ diff --git a/lib/kotludens/com/persesgames/game/Game.kt b/lib/kotludens/com/persesgames/game/Game.kt index c65d346..89bfc47 100644 --- a/lib/kotludens/com/persesgames/game/Game.kt +++ b/lib/kotludens/com/persesgames/game/Game.kt @@ -1,6 +1,5 @@ package com.persesgames.game -import com.persesgames.math.Matrix4 import com.persesgames.texture.Textures import org.khronos.webgl.WebGLRenderingContext import org.w3c.dom.CanvasRenderingContext2D @@ -13,160 +12,6 @@ * Created by rnentjes on 19-4-16. */ -class DefaultScreen: Screen() { - override fun update(time: Float, delta: Float) { - } - - override fun render() { - // show loading message? - Game.gl().clearColor(1f, 1f, 0f, 1f) - Game.gl().clear(WebGLRenderingContext.COLOR_BUFFER_BIT) - } -} - -enum class ViewType { - PROJECTION, - WIDTH, - HEIGHT, - ABSOLUTE -} - -class View( - var windowWidth: Int = 2000, - var windowHeight: Int =1000, - var width: Float = 1024f, - var height: Float = 1024f, - var angle: Float = 60f, - var near: Float = -0.1f, - var far: Float = -100f, - var minAspectRatio: Float = 1f, - var maxAspectRatio: Float = 1f, - var viewType: ViewType = ViewType.WIDTH) { - var vMatrix = Matrix4() - var aspectRatio = 1f - - init { - updateView() - } - - fun updateView() { - aspectRatio = windowWidth / windowHeight.toFloat() - - if (aspectRatio < minAspectRatio) { - - } - - if (aspectRatio > maxAspectRatio) { - - } - - when(viewType) { - ViewType.ABSOLUTE -> { - vMatrix.setOrthographicProjection(0f, width, 0f, height, near, far) - } - ViewType.WIDTH -> { - height = width / aspectRatio - - vMatrix.setOrthographicProjection(-width / 2, width / 2, -height / 2, height / 2, near, far) - } - ViewType.HEIGHT -> { - width = height * aspectRatio - - vMatrix.setOrthographicProjection(-width / 2, width / 2, -height / 2, height / 2, near, far) - } - ViewType.PROJECTION -> { - vMatrix.setPerspectiveProjection(angle, aspectRatio, near, far); - } - else -> { - throw IllegalStateException("ViewType $viewType not implemented!") - } - } - - println("width: $width, height: $height") - } - - fun screenToGameCoordX(screenX: Float): Float { - var result = screenX - - when(viewType) { - ViewType.ABSOLUTE -> { - // nop - } - ViewType.WIDTH -> { - result = (screenX / windowWidth * width) - width / 2 - } - ViewType.HEIGHT -> { - result = (screenX / windowWidth * width) - width / 2 - } - ViewType.PROJECTION -> { - // uhm - } - else -> { - throw IllegalStateException("ViewType $viewType not implemented!") - } - } - - return result - } - - fun screenToGameCoordY(screenY: Float): Float { - var result = screenY - - when(viewType) { - ViewType.ABSOLUTE -> { - // nop - } - ViewType.WIDTH -> { - result = (screenY / windowHeight * height) - height / 2 - } - ViewType.HEIGHT -> { - result = (screenY / windowHeight * height) - height / 2 - } - ViewType.PROJECTION -> { - // uhm - } - else -> { - throw IllegalStateException("ViewType $viewType not implemented!") - } - } - - return result - } - - fun setToWidth(width: Float) { - this.width = width - this.viewType = ViewType.WIDTH - - updateView() - } - - fun setToHeight(height: Float) { - this.height = height - this.viewType = ViewType.HEIGHT - - updateView() - } - - fun setProjection(angle: Float) { - this.angle = angle - this.viewType = ViewType.PROJECTION - - updateView() - } - - fun setNear(near: Float) { - this.near = near - - updateView() - } - - fun setFar(far: Float) { - this.far = far - - updateView() - } -} - class HTMLElements { var container: HTMLElement var webgl: WebGLRenderingContext @@ -178,7 +23,7 @@ val webGlCanvas = document.createElement("canvas") as HTMLCanvasElement val canvas = document.createElement("canvas") as HTMLCanvasElement - container.setAttribute("style", "position: relative;") + container.setAttribute("style", "position: absolute; left: 0px; top: 0px;") webGlCanvas.setAttribute("style", "position: absolute; left: 0px; top: 0px;" ) canvas.setAttribute("style", "position: absolute; left: 0px; top: 0px; z-index: 10; width: 1000px; height: 500px;" ) @@ -228,10 +73,6 @@ textCanvas.width = view.width.toInt() textCanvas.height = view.height.toInt() -// -// html.canvas2d.fillStyle = "green" -// html.canvas2d.font = "bold 36pt Arial" -// html.canvas2d.fillText("Hello World!", 10.0, 40.0) gl().viewport(0, 0, view.width.toInt(), view.height.toInt()) canvas.setAttribute("style", "position: absolute; left: 0px; top: 0px; z-index: 5; width: ${view.windowWidth}px; height: ${view.windowHeight}px;" ) diff --git a/lib/kotludens/com/persesgames/game/Screen.kt b/lib/kotludens/com/persesgames/game/Screen.kt index 42ddeca..6fb558e 100644 --- a/lib/kotludens/com/persesgames/game/Screen.kt +++ b/lib/kotludens/com/persesgames/game/Screen.kt @@ -1,8 +1,11 @@ package com.persesgames.game +import org.khronos.webgl.WebGLRenderingContext + /** * Created by rnentjes on 19-4-16. */ + abstract class Screen { open fun loadResources() { @@ -18,3 +21,15 @@ abstract fun render() } + + +class DefaultScreen: Screen() { + override fun update(time: Float, delta: Float) { + } + + override fun render() { + // show loading message? + Game.gl().clearColor(1f, 1f, 0f, 1f) + Game.gl().clear(WebGLRenderingContext.COLOR_BUFFER_BIT) + } +} \ No newline at end of file diff --git a/lib/kotludens/com/persesgames/game/View.kt b/lib/kotludens/com/persesgames/game/View.kt new file mode 100644 index 0000000..357b8b8 --- /dev/null +++ b/lib/kotludens/com/persesgames/game/View.kt @@ -0,0 +1,196 @@ +package com.persesgames.game + +import com.persesgames.math.Matrix4 + +enum class ViewType { + PROJECTION, + WIDTH, + HEIGHT, + ABSOLUTE +} + +class View( + var windowWidth: Int = 2000, + var windowHeight: Int =1000, + var width: Float = 1024f, + var height: Float = 1024f, + var angle: Float = 60f, + var near: Float = -0.1f, + var far: Float = -100f, + var minAspectRatio: Float = 1f, + var maxAspectRatio: Float = 1f, + var viewType: ViewType = ViewType.WIDTH) { + var vMatrix = Matrix4() + var aspectRatio = 1f + + init { + updateView() + } + + fun updateView() { + aspectRatio = windowWidth / windowHeight.toFloat() + + if (aspectRatio < minAspectRatio) { + + } + + if (aspectRatio > maxAspectRatio) { + + } + + when(viewType) { + ViewType.ABSOLUTE -> { + vMatrix.setOrthographicProjection(0f, width, 0f, height, near, far) + } + ViewType.WIDTH -> { + height = width / aspectRatio + + vMatrix.setOrthographicProjection(-width / 2, width / 2, -height / 2, height / 2, near, far) + } + ViewType.HEIGHT -> { + width = height * aspectRatio + + vMatrix.setOrthographicProjection(-width / 2, width / 2, -height / 2, height / 2, near, far) + } + ViewType.PROJECTION -> { + vMatrix.setPerspectiveProjection(angle, aspectRatio, near, far); + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + println("width: $width, height: $height") + } + + fun screenToGameCoordX(screenX: Float): Float { + var result = screenX + + when(viewType) { + ViewType.ABSOLUTE -> { + // nop + } + ViewType.WIDTH -> { + result = (screenX / windowWidth * width) - width / 2 + } + ViewType.HEIGHT -> { + result = (screenX / windowWidth * width) - width / 2 + } + ViewType.PROJECTION -> { + // uhm + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + return result + } + + fun screenToGameCoordY(screenY: Float): Float { + var result = screenY + + when(viewType) { + ViewType.ABSOLUTE -> { + // nop + } + ViewType.WIDTH -> { + result = - ( (screenY / windowHeight * height) - height / 2 ) + } + ViewType.HEIGHT -> { + result = - ( (screenY / windowHeight * height) - height / 2 ) + } + ViewType.PROJECTION -> { + // uhm + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + return result + } + + fun gameToScreenCoordX(gameX: Float): Float { + var result = gameX + val normalizedX = gameX + (width / 2) + + when(viewType) { + ViewType.ABSOLUTE -> { + // nop + } + ViewType.WIDTH -> { + result = (windowWidth / width * normalizedX) + } + ViewType.HEIGHT -> { + result = (windowWidth / width * normalizedX) + } + ViewType.PROJECTION -> { + // uhm + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + return result + } + + fun gameToScreenCoordY(gameY: Float): Float { + var result = gameY + val normalizedY = gameY + (height / 2) + + when(viewType) { + ViewType.ABSOLUTE -> { + // nop + } + ViewType.WIDTH -> { + result = windowHeight - (windowHeight / height * normalizedY) + } + ViewType.HEIGHT -> { + result = windowHeight - (windowHeight / height * normalizedY) + } + ViewType.PROJECTION -> { + // uhm + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + return result + } + + fun setToWidth(width: Float) { + this.width = width + this.viewType = ViewType.WIDTH + + updateView() + } + + fun setToHeight(height: Float) { + this.height = height + this.viewType = ViewType.HEIGHT + + updateView() + } + + fun setProjection(angle: Float) { + this.angle = angle + this.viewType = ViewType.PROJECTION + + updateView() + } + + fun setNear(near: Float) { + this.near = near + + updateView() + } + + fun setFar(far: Float) { + this.far = far + + updateView() + } +} \ No newline at end of file diff --git a/lib/kotludens/com/persesgames/sound/Music.kt b/lib/kotludens/com/persesgames/sound/Music.kt index 7e1879b..88a531d 100644 --- a/lib/kotludens/com/persesgames/sound/Music.kt +++ b/lib/kotludens/com/persesgames/sound/Music.kt @@ -22,7 +22,7 @@ return audio; } - fun play(url: String, volume: Double = 0.75, looping: Boolean = false) { + fun play(url: String, volume: Double = 0.75, looping: Boolean = false): HTMLAudioElement { val audio = document.createElement("audio") as HTMLAudioElement audio.src = url @@ -39,6 +39,8 @@ playing.remove(audio) } }) + + return audio } fun stopAll() { diff --git a/lib/kotludens/com/persesgames/text/Texts.kt b/lib/kotludens/com/persesgames/text/Texts.kt index 5263af4..d3200a9 100644 --- a/lib/kotludens/com/persesgames/text/Texts.kt +++ b/lib/kotludens/com/persesgames/text/Texts.kt @@ -13,4 +13,14 @@ Game.html.canvas2d.font = font Game.html.canvas2d.fillText(message, x.toDouble(), y.toDouble()) } -} \ No newline at end of file + + fun drawLeftTop(left: Float, top: Float, message: String, font: String = "bold 24pt Arial", fillStyle: String = "white") { + drawText( + Game.view.gameToScreenCoordX(-Game.view.width / 2f + left), + Game.view.gameToScreenCoordY(Game.view.height / 2f - top), + message, + font, + fillStyle + ) + } +} diff --git a/src/com/persesgames/Test.kt b/src/com/persesgames/Test.kt deleted file mode 100644 index 5f99768..0000000 --- a/src/com/persesgames/Test.kt +++ /dev/null @@ -1,190 +0,0 @@ -package com.persesgames - -import com.persesgames.math.Matrix4 -import com.persesgames.shader.ShaderProgram -import com.persesgames.shader.VertextAttributeInfo -import com.persesgames.texture.Textures -import org.khronos.webgl.Float32Array -import org.khronos.webgl.WebGLRenderingContext -import kotlin.browser.window - -/** - * User: rnentjes - * Date: 17-4-16 - * Time: 13:17 - */ - -private val vertexShaderSource = """ - attribute vec2 a_position; - attribute vec3 a_color; - - uniform mat4 u_projectionView; - - varying vec3 v_color; - varying vec2 v_textCoord; - - void main(void) { - v_color = a_color; - v_textCoord = a_position.xy; - - gl_Position = u_projectionView * vec4(a_position, -1, 1.0); - } -""" - -private val fragmentShaderSource = """ - precision mediump float; - - uniform sampler2D u_sampler; - - varying vec3 v_color; - varying vec2 v_textCoord; - - void main(void) { - gl_FragColor = texture2D(u_sampler, v_textCoord) * vec4(v_color, 1.0); - } -""" - -class Test(val webgl: WebGLRenderingContext) { - var red: Float = 1f - var green: Float = 1f; - var blue: Float = 0f; - var rotX: Float = 0f; - var rotY: Float = 0f; - var rotZ: Float = 0f; - var z = -1f; - - var mMatrix = Matrix4() - var vMatrix = Matrix4() - var pMatrix = Matrix4() - var program: ShaderProgram - var triangle: Float32Array - - init { - var vainfo = arrayOf( - VertextAttributeInfo("a_position", 2), - VertextAttributeInfo("a_color", 3) - ) - - program = ShaderProgram(webgl, WebGLRenderingContext.TRIANGLES, vertexShaderSource, fragmentShaderSource, vainfo, {a,b -> }) - triangle = Float32Array(arrayOf( - 0f, 0f, 1f, 0f, 0f, - 1f, 0f, 0f, 1f, 0f, - 1f, 1f, 0f, 0f, 1f, - - 1f, 1f, 0f, 0f, 1f, - 0f, 1f, 1f, 1f, 0f, - 0f, 0f, 1f, 0f, 0f - )) - - Textures.load("SHIP", "images/ship2.png") - } - - fun update(time: Double) { - if (!Textures.ready()) { - return - } - - red = Math.abs(Math.sin(time*0.5)).toFloat() - green = Math.abs(Math.cos(time*0.3)).toFloat() - blue = Math.abs(Math.cos(time*0.7)).toFloat() - - rotX = time.toFloat() / 5f - rotY = time.toFloat() / 3f - z = -2f + Math.sin(time).toFloat() * 1f - //rotZ = time.toFloat() - } - - fun render() { - resize() - - if (!Textures.ready()) { - return - } - - webgl.clearColor(red, green, blue, 0.9f) - webgl.clear(WebGLRenderingContext.COLOR_BUFFER_BIT) - - webgl.enable(WebGLRenderingContext.BLEND); - webgl.blendFunc(WebGLRenderingContext.SRC_ALPHA, WebGLRenderingContext.ONE_MINUS_SRC_ALPHA); //ONE_MINUS_DST_ALPHA); - - mMatrix.setToIdentity() - mMatrix.translate(-0.5f, -0.5f,0f); - mMatrix.scale(2f, 2f, 1f) - mMatrix.rotateX(rotX); - mMatrix.rotateY(rotY); - mMatrix.rotateZ(rotX + rotY); - mMatrix.translate(0f, 0f, z); - //triangle.set(8, red) - //triangle.set(8, green) - //triangle.set(14, blue) - - pMatrix.setPerspectiveProjection(60f, (window.innerWidth/window.innerHeight).toFloat(), 0.1f, 100f) -// pMatrix.mul(vMatrix) -// pMatrix.mul(mMatrix) - mMatrix.mul(vMatrix); - mMatrix.mul(pMatrix); -/* - program.begin() - - Textures.get("SHIP").bind() - - program.setUniform1i("u_sampler", 0) - program.setUniformMatrix4fv("u_projectionView", mMatrix.getFloat32Array()) - //program.queueVertices(triangle) - program.end()*/ - } - - fun resize() { - var canvas = webgl.canvas - // Check if the canvas is not the same size. - if (canvas.width != window.innerWidth.toInt() || - canvas.height != window.innerHeight.toInt()) { - - // Make the canvas the same size - canvas.width = window.innerWidth.toInt() - canvas.height = window.innerHeight.toInt() - - webgl.viewport(0, 0, canvas.width, canvas.height) - } - } - -} - -/* -var game: Test? = null -var start: Int = Date().getTime() -var time: Int = Date().getTime() -fun loop() { - var testInstance = game - if (testInstance != null) { - time = Date().getTime() - testInstance.update((time - start) / 1000.0) - testInstance.render() - } - - window.requestAnimationFrame { - loop() - } -} - -fun main(args: Array) { - println("Hello!") - - var canvas = document.createElement("canvas") as HTMLCanvasElement - document.body!!.appendChild(canvas) - var webgl = canvas.getContext("webgl") as WebGLRenderingContext - - canvas.on("resize", true, { - canvas.width = window.innerWidth.toInt(); - canvas.height = window.innerHeight.toInt(); - - webgl.viewport(0, 0, canvas.width, canvas.height) - }) - - Textures.load(webgl, "SHIP", "images/ship2.png") - - game = Test(webgl) - - loop() -} -*/ diff --git a/src/com/persesgames/shooter/Shooter.kt b/src/com/persesgames/shooter/Shooter.kt index 7b10d7a..995e23f 100644 --- a/src/com/persesgames/shooter/Shooter.kt +++ b/src/com/persesgames/shooter/Shooter.kt @@ -3,7 +3,6 @@ import com.persesgames.game.Game import com.persesgames.game.Screen import com.persesgames.input.EmptyInputProcessor -import com.persesgames.input.InputProcessor import com.persesgames.input.KeyCode import com.persesgames.input.Keys import com.persesgames.sound.Music @@ -12,6 +11,9 @@ import com.persesgames.sprite.SpriteBatch import com.persesgames.text.Texts import com.persesgames.texture.Textures +import org.w3c.dom.HTMLAudioElement +import org.w3c.dom.HTMLInputElement +import kotlin.browser.document /** * Created by rnentjes on 19-4-16. @@ -31,7 +33,29 @@ } } +var music: HTMLAudioElement? = null +var showFPS: Boolean = true + class WelcomeScreen: Screen() { + + override fun loadResources() { + music = Music.play("music/DST-TechnoBasic.ogg", 1.0, looping = true) + + Keys.setInputProcessor(GameInputProcessor()) + } + + override fun update(time: Float, delta: Float) { + } + + override fun render() { + + if (showFPS) { + Texts.drawText(20f, 100f, "Hello! FPS ${Game.fps}", font = "bold 72pt Arial") + } + } +} + +class GameScreen: Screen() { var sprites = SpriteBatch() var x = 0f var y = 0f @@ -41,8 +65,6 @@ Textures.load("SHIP", "images/ship2.png") Sounds.load("EXPLOSION", "sounds/Explosion7.ogg") - Music.play("music/DST-TechnoBasic.ogg", 1.0, looping = true) - Keys.setInputProcessor(GameInputProcessor()) } @@ -70,33 +92,50 @@ } override fun render() { + for (index in 0..100) { val x = Math.random() * 2000f - 1000f val y = Math.random() * 2000f - 1000f - sprites.draw(sprite, x.toFloat(), y.toFloat()); + sprites.draw(sprite, x.toFloat(), y.toFloat()) } sprites.draw(sprite, x, y); sprites.render() + Texts.drawText(150f, 400f, "Playing teh Game!", font = "bold 72pt Arial") - Texts.drawText(20f, 80f, "Hello! FPS ${Game.fps}", font = "bold 72pt Arial") - } -} - -class GameScreen: Screen() { - - override fun update(time: Float, delta: Float) { - } - - override fun render() { + if (showFPS) { + Texts.drawText(20f, 100f, "Hello! FPS ${Game.fps}", font = "bold 72pt Arial") + } } } fun main(args: Array) { - Game.view.setToWidth(2000f); + Game.view.setToWidth(2000f) Game.start(WelcomeScreen()) } + +fun changeMusic(it: HTMLInputElement) { + val mus = music + + if (mus != null) { + if (it.checked) { + mus.volume = 1.0 + } else { + mus.volume = 0.0 + } + } +} + +fun showFPS(it: HTMLInputElement) { + showFPS = it.checked +} + +fun playGame() { + document.getElementById("menu")?.setAttribute("style", "display: none;") + + Game.setScreen(GameScreen()) +} diff --git a/lib/kotludens/com/persesgames/game/Game.kt b/lib/kotludens/com/persesgames/game/Game.kt index c65d346..89bfc47 100644 --- a/lib/kotludens/com/persesgames/game/Game.kt +++ b/lib/kotludens/com/persesgames/game/Game.kt @@ -1,6 +1,5 @@ package com.persesgames.game -import com.persesgames.math.Matrix4 import com.persesgames.texture.Textures import org.khronos.webgl.WebGLRenderingContext import org.w3c.dom.CanvasRenderingContext2D @@ -13,160 +12,6 @@ * Created by rnentjes on 19-4-16. */ -class DefaultScreen: Screen() { - override fun update(time: Float, delta: Float) { - } - - override fun render() { - // show loading message? - Game.gl().clearColor(1f, 1f, 0f, 1f) - Game.gl().clear(WebGLRenderingContext.COLOR_BUFFER_BIT) - } -} - -enum class ViewType { - PROJECTION, - WIDTH, - HEIGHT, - ABSOLUTE -} - -class View( - var windowWidth: Int = 2000, - var windowHeight: Int =1000, - var width: Float = 1024f, - var height: Float = 1024f, - var angle: Float = 60f, - var near: Float = -0.1f, - var far: Float = -100f, - var minAspectRatio: Float = 1f, - var maxAspectRatio: Float = 1f, - var viewType: ViewType = ViewType.WIDTH) { - var vMatrix = Matrix4() - var aspectRatio = 1f - - init { - updateView() - } - - fun updateView() { - aspectRatio = windowWidth / windowHeight.toFloat() - - if (aspectRatio < minAspectRatio) { - - } - - if (aspectRatio > maxAspectRatio) { - - } - - when(viewType) { - ViewType.ABSOLUTE -> { - vMatrix.setOrthographicProjection(0f, width, 0f, height, near, far) - } - ViewType.WIDTH -> { - height = width / aspectRatio - - vMatrix.setOrthographicProjection(-width / 2, width / 2, -height / 2, height / 2, near, far) - } - ViewType.HEIGHT -> { - width = height * aspectRatio - - vMatrix.setOrthographicProjection(-width / 2, width / 2, -height / 2, height / 2, near, far) - } - ViewType.PROJECTION -> { - vMatrix.setPerspectiveProjection(angle, aspectRatio, near, far); - } - else -> { - throw IllegalStateException("ViewType $viewType not implemented!") - } - } - - println("width: $width, height: $height") - } - - fun screenToGameCoordX(screenX: Float): Float { - var result = screenX - - when(viewType) { - ViewType.ABSOLUTE -> { - // nop - } - ViewType.WIDTH -> { - result = (screenX / windowWidth * width) - width / 2 - } - ViewType.HEIGHT -> { - result = (screenX / windowWidth * width) - width / 2 - } - ViewType.PROJECTION -> { - // uhm - } - else -> { - throw IllegalStateException("ViewType $viewType not implemented!") - } - } - - return result - } - - fun screenToGameCoordY(screenY: Float): Float { - var result = screenY - - when(viewType) { - ViewType.ABSOLUTE -> { - // nop - } - ViewType.WIDTH -> { - result = (screenY / windowHeight * height) - height / 2 - } - ViewType.HEIGHT -> { - result = (screenY / windowHeight * height) - height / 2 - } - ViewType.PROJECTION -> { - // uhm - } - else -> { - throw IllegalStateException("ViewType $viewType not implemented!") - } - } - - return result - } - - fun setToWidth(width: Float) { - this.width = width - this.viewType = ViewType.WIDTH - - updateView() - } - - fun setToHeight(height: Float) { - this.height = height - this.viewType = ViewType.HEIGHT - - updateView() - } - - fun setProjection(angle: Float) { - this.angle = angle - this.viewType = ViewType.PROJECTION - - updateView() - } - - fun setNear(near: Float) { - this.near = near - - updateView() - } - - fun setFar(far: Float) { - this.far = far - - updateView() - } -} - class HTMLElements { var container: HTMLElement var webgl: WebGLRenderingContext @@ -178,7 +23,7 @@ val webGlCanvas = document.createElement("canvas") as HTMLCanvasElement val canvas = document.createElement("canvas") as HTMLCanvasElement - container.setAttribute("style", "position: relative;") + container.setAttribute("style", "position: absolute; left: 0px; top: 0px;") webGlCanvas.setAttribute("style", "position: absolute; left: 0px; top: 0px;" ) canvas.setAttribute("style", "position: absolute; left: 0px; top: 0px; z-index: 10; width: 1000px; height: 500px;" ) @@ -228,10 +73,6 @@ textCanvas.width = view.width.toInt() textCanvas.height = view.height.toInt() -// -// html.canvas2d.fillStyle = "green" -// html.canvas2d.font = "bold 36pt Arial" -// html.canvas2d.fillText("Hello World!", 10.0, 40.0) gl().viewport(0, 0, view.width.toInt(), view.height.toInt()) canvas.setAttribute("style", "position: absolute; left: 0px; top: 0px; z-index: 5; width: ${view.windowWidth}px; height: ${view.windowHeight}px;" ) diff --git a/lib/kotludens/com/persesgames/game/Screen.kt b/lib/kotludens/com/persesgames/game/Screen.kt index 42ddeca..6fb558e 100644 --- a/lib/kotludens/com/persesgames/game/Screen.kt +++ b/lib/kotludens/com/persesgames/game/Screen.kt @@ -1,8 +1,11 @@ package com.persesgames.game +import org.khronos.webgl.WebGLRenderingContext + /** * Created by rnentjes on 19-4-16. */ + abstract class Screen { open fun loadResources() { @@ -18,3 +21,15 @@ abstract fun render() } + + +class DefaultScreen: Screen() { + override fun update(time: Float, delta: Float) { + } + + override fun render() { + // show loading message? + Game.gl().clearColor(1f, 1f, 0f, 1f) + Game.gl().clear(WebGLRenderingContext.COLOR_BUFFER_BIT) + } +} \ No newline at end of file diff --git a/lib/kotludens/com/persesgames/game/View.kt b/lib/kotludens/com/persesgames/game/View.kt new file mode 100644 index 0000000..357b8b8 --- /dev/null +++ b/lib/kotludens/com/persesgames/game/View.kt @@ -0,0 +1,196 @@ +package com.persesgames.game + +import com.persesgames.math.Matrix4 + +enum class ViewType { + PROJECTION, + WIDTH, + HEIGHT, + ABSOLUTE +} + +class View( + var windowWidth: Int = 2000, + var windowHeight: Int =1000, + var width: Float = 1024f, + var height: Float = 1024f, + var angle: Float = 60f, + var near: Float = -0.1f, + var far: Float = -100f, + var minAspectRatio: Float = 1f, + var maxAspectRatio: Float = 1f, + var viewType: ViewType = ViewType.WIDTH) { + var vMatrix = Matrix4() + var aspectRatio = 1f + + init { + updateView() + } + + fun updateView() { + aspectRatio = windowWidth / windowHeight.toFloat() + + if (aspectRatio < minAspectRatio) { + + } + + if (aspectRatio > maxAspectRatio) { + + } + + when(viewType) { + ViewType.ABSOLUTE -> { + vMatrix.setOrthographicProjection(0f, width, 0f, height, near, far) + } + ViewType.WIDTH -> { + height = width / aspectRatio + + vMatrix.setOrthographicProjection(-width / 2, width / 2, -height / 2, height / 2, near, far) + } + ViewType.HEIGHT -> { + width = height * aspectRatio + + vMatrix.setOrthographicProjection(-width / 2, width / 2, -height / 2, height / 2, near, far) + } + ViewType.PROJECTION -> { + vMatrix.setPerspectiveProjection(angle, aspectRatio, near, far); + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + println("width: $width, height: $height") + } + + fun screenToGameCoordX(screenX: Float): Float { + var result = screenX + + when(viewType) { + ViewType.ABSOLUTE -> { + // nop + } + ViewType.WIDTH -> { + result = (screenX / windowWidth * width) - width / 2 + } + ViewType.HEIGHT -> { + result = (screenX / windowWidth * width) - width / 2 + } + ViewType.PROJECTION -> { + // uhm + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + return result + } + + fun screenToGameCoordY(screenY: Float): Float { + var result = screenY + + when(viewType) { + ViewType.ABSOLUTE -> { + // nop + } + ViewType.WIDTH -> { + result = - ( (screenY / windowHeight * height) - height / 2 ) + } + ViewType.HEIGHT -> { + result = - ( (screenY / windowHeight * height) - height / 2 ) + } + ViewType.PROJECTION -> { + // uhm + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + return result + } + + fun gameToScreenCoordX(gameX: Float): Float { + var result = gameX + val normalizedX = gameX + (width / 2) + + when(viewType) { + ViewType.ABSOLUTE -> { + // nop + } + ViewType.WIDTH -> { + result = (windowWidth / width * normalizedX) + } + ViewType.HEIGHT -> { + result = (windowWidth / width * normalizedX) + } + ViewType.PROJECTION -> { + // uhm + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + return result + } + + fun gameToScreenCoordY(gameY: Float): Float { + var result = gameY + val normalizedY = gameY + (height / 2) + + when(viewType) { + ViewType.ABSOLUTE -> { + // nop + } + ViewType.WIDTH -> { + result = windowHeight - (windowHeight / height * normalizedY) + } + ViewType.HEIGHT -> { + result = windowHeight - (windowHeight / height * normalizedY) + } + ViewType.PROJECTION -> { + // uhm + } + else -> { + throw IllegalStateException("ViewType $viewType not implemented!") + } + } + + return result + } + + fun setToWidth(width: Float) { + this.width = width + this.viewType = ViewType.WIDTH + + updateView() + } + + fun setToHeight(height: Float) { + this.height = height + this.viewType = ViewType.HEIGHT + + updateView() + } + + fun setProjection(angle: Float) { + this.angle = angle + this.viewType = ViewType.PROJECTION + + updateView() + } + + fun setNear(near: Float) { + this.near = near + + updateView() + } + + fun setFar(far: Float) { + this.far = far + + updateView() + } +} \ No newline at end of file diff --git a/lib/kotludens/com/persesgames/sound/Music.kt b/lib/kotludens/com/persesgames/sound/Music.kt index 7e1879b..88a531d 100644 --- a/lib/kotludens/com/persesgames/sound/Music.kt +++ b/lib/kotludens/com/persesgames/sound/Music.kt @@ -22,7 +22,7 @@ return audio; } - fun play(url: String, volume: Double = 0.75, looping: Boolean = false) { + fun play(url: String, volume: Double = 0.75, looping: Boolean = false): HTMLAudioElement { val audio = document.createElement("audio") as HTMLAudioElement audio.src = url @@ -39,6 +39,8 @@ playing.remove(audio) } }) + + return audio } fun stopAll() { diff --git a/lib/kotludens/com/persesgames/text/Texts.kt b/lib/kotludens/com/persesgames/text/Texts.kt index 5263af4..d3200a9 100644 --- a/lib/kotludens/com/persesgames/text/Texts.kt +++ b/lib/kotludens/com/persesgames/text/Texts.kt @@ -13,4 +13,14 @@ Game.html.canvas2d.font = font Game.html.canvas2d.fillText(message, x.toDouble(), y.toDouble()) } -} \ No newline at end of file + + fun drawLeftTop(left: Float, top: Float, message: String, font: String = "bold 24pt Arial", fillStyle: String = "white") { + drawText( + Game.view.gameToScreenCoordX(-Game.view.width / 2f + left), + Game.view.gameToScreenCoordY(Game.view.height / 2f - top), + message, + font, + fillStyle + ) + } +} diff --git a/src/com/persesgames/Test.kt b/src/com/persesgames/Test.kt deleted file mode 100644 index 5f99768..0000000 --- a/src/com/persesgames/Test.kt +++ /dev/null @@ -1,190 +0,0 @@ -package com.persesgames - -import com.persesgames.math.Matrix4 -import com.persesgames.shader.ShaderProgram -import com.persesgames.shader.VertextAttributeInfo -import com.persesgames.texture.Textures -import org.khronos.webgl.Float32Array -import org.khronos.webgl.WebGLRenderingContext -import kotlin.browser.window - -/** - * User: rnentjes - * Date: 17-4-16 - * Time: 13:17 - */ - -private val vertexShaderSource = """ - attribute vec2 a_position; - attribute vec3 a_color; - - uniform mat4 u_projectionView; - - varying vec3 v_color; - varying vec2 v_textCoord; - - void main(void) { - v_color = a_color; - v_textCoord = a_position.xy; - - gl_Position = u_projectionView * vec4(a_position, -1, 1.0); - } -""" - -private val fragmentShaderSource = """ - precision mediump float; - - uniform sampler2D u_sampler; - - varying vec3 v_color; - varying vec2 v_textCoord; - - void main(void) { - gl_FragColor = texture2D(u_sampler, v_textCoord) * vec4(v_color, 1.0); - } -""" - -class Test(val webgl: WebGLRenderingContext) { - var red: Float = 1f - var green: Float = 1f; - var blue: Float = 0f; - var rotX: Float = 0f; - var rotY: Float = 0f; - var rotZ: Float = 0f; - var z = -1f; - - var mMatrix = Matrix4() - var vMatrix = Matrix4() - var pMatrix = Matrix4() - var program: ShaderProgram - var triangle: Float32Array - - init { - var vainfo = arrayOf( - VertextAttributeInfo("a_position", 2), - VertextAttributeInfo("a_color", 3) - ) - - program = ShaderProgram(webgl, WebGLRenderingContext.TRIANGLES, vertexShaderSource, fragmentShaderSource, vainfo, {a,b -> }) - triangle = Float32Array(arrayOf( - 0f, 0f, 1f, 0f, 0f, - 1f, 0f, 0f, 1f, 0f, - 1f, 1f, 0f, 0f, 1f, - - 1f, 1f, 0f, 0f, 1f, - 0f, 1f, 1f, 1f, 0f, - 0f, 0f, 1f, 0f, 0f - )) - - Textures.load("SHIP", "images/ship2.png") - } - - fun update(time: Double) { - if (!Textures.ready()) { - return - } - - red = Math.abs(Math.sin(time*0.5)).toFloat() - green = Math.abs(Math.cos(time*0.3)).toFloat() - blue = Math.abs(Math.cos(time*0.7)).toFloat() - - rotX = time.toFloat() / 5f - rotY = time.toFloat() / 3f - z = -2f + Math.sin(time).toFloat() * 1f - //rotZ = time.toFloat() - } - - fun render() { - resize() - - if (!Textures.ready()) { - return - } - - webgl.clearColor(red, green, blue, 0.9f) - webgl.clear(WebGLRenderingContext.COLOR_BUFFER_BIT) - - webgl.enable(WebGLRenderingContext.BLEND); - webgl.blendFunc(WebGLRenderingContext.SRC_ALPHA, WebGLRenderingContext.ONE_MINUS_SRC_ALPHA); //ONE_MINUS_DST_ALPHA); - - mMatrix.setToIdentity() - mMatrix.translate(-0.5f, -0.5f,0f); - mMatrix.scale(2f, 2f, 1f) - mMatrix.rotateX(rotX); - mMatrix.rotateY(rotY); - mMatrix.rotateZ(rotX + rotY); - mMatrix.translate(0f, 0f, z); - //triangle.set(8, red) - //triangle.set(8, green) - //triangle.set(14, blue) - - pMatrix.setPerspectiveProjection(60f, (window.innerWidth/window.innerHeight).toFloat(), 0.1f, 100f) -// pMatrix.mul(vMatrix) -// pMatrix.mul(mMatrix) - mMatrix.mul(vMatrix); - mMatrix.mul(pMatrix); -/* - program.begin() - - Textures.get("SHIP").bind() - - program.setUniform1i("u_sampler", 0) - program.setUniformMatrix4fv("u_projectionView", mMatrix.getFloat32Array()) - //program.queueVertices(triangle) - program.end()*/ - } - - fun resize() { - var canvas = webgl.canvas - // Check if the canvas is not the same size. - if (canvas.width != window.innerWidth.toInt() || - canvas.height != window.innerHeight.toInt()) { - - // Make the canvas the same size - canvas.width = window.innerWidth.toInt() - canvas.height = window.innerHeight.toInt() - - webgl.viewport(0, 0, canvas.width, canvas.height) - } - } - -} - -/* -var game: Test? = null -var start: Int = Date().getTime() -var time: Int = Date().getTime() -fun loop() { - var testInstance = game - if (testInstance != null) { - time = Date().getTime() - testInstance.update((time - start) / 1000.0) - testInstance.render() - } - - window.requestAnimationFrame { - loop() - } -} - -fun main(args: Array) { - println("Hello!") - - var canvas = document.createElement("canvas") as HTMLCanvasElement - document.body!!.appendChild(canvas) - var webgl = canvas.getContext("webgl") as WebGLRenderingContext - - canvas.on("resize", true, { - canvas.width = window.innerWidth.toInt(); - canvas.height = window.innerHeight.toInt(); - - webgl.viewport(0, 0, canvas.width, canvas.height) - }) - - Textures.load(webgl, "SHIP", "images/ship2.png") - - game = Test(webgl) - - loop() -} -*/ diff --git a/src/com/persesgames/shooter/Shooter.kt b/src/com/persesgames/shooter/Shooter.kt index 7b10d7a..995e23f 100644 --- a/src/com/persesgames/shooter/Shooter.kt +++ b/src/com/persesgames/shooter/Shooter.kt @@ -3,7 +3,6 @@ import com.persesgames.game.Game import com.persesgames.game.Screen import com.persesgames.input.EmptyInputProcessor -import com.persesgames.input.InputProcessor import com.persesgames.input.KeyCode import com.persesgames.input.Keys import com.persesgames.sound.Music @@ -12,6 +11,9 @@ import com.persesgames.sprite.SpriteBatch import com.persesgames.text.Texts import com.persesgames.texture.Textures +import org.w3c.dom.HTMLAudioElement +import org.w3c.dom.HTMLInputElement +import kotlin.browser.document /** * Created by rnentjes on 19-4-16. @@ -31,7 +33,29 @@ } } +var music: HTMLAudioElement? = null +var showFPS: Boolean = true + class WelcomeScreen: Screen() { + + override fun loadResources() { + music = Music.play("music/DST-TechnoBasic.ogg", 1.0, looping = true) + + Keys.setInputProcessor(GameInputProcessor()) + } + + override fun update(time: Float, delta: Float) { + } + + override fun render() { + + if (showFPS) { + Texts.drawText(20f, 100f, "Hello! FPS ${Game.fps}", font = "bold 72pt Arial") + } + } +} + +class GameScreen: Screen() { var sprites = SpriteBatch() var x = 0f var y = 0f @@ -41,8 +65,6 @@ Textures.load("SHIP", "images/ship2.png") Sounds.load("EXPLOSION", "sounds/Explosion7.ogg") - Music.play("music/DST-TechnoBasic.ogg", 1.0, looping = true) - Keys.setInputProcessor(GameInputProcessor()) } @@ -70,33 +92,50 @@ } override fun render() { + for (index in 0..100) { val x = Math.random() * 2000f - 1000f val y = Math.random() * 2000f - 1000f - sprites.draw(sprite, x.toFloat(), y.toFloat()); + sprites.draw(sprite, x.toFloat(), y.toFloat()) } sprites.draw(sprite, x, y); sprites.render() + Texts.drawText(150f, 400f, "Playing teh Game!", font = "bold 72pt Arial") - Texts.drawText(20f, 80f, "Hello! FPS ${Game.fps}", font = "bold 72pt Arial") - } -} - -class GameScreen: Screen() { - - override fun update(time: Float, delta: Float) { - } - - override fun render() { + if (showFPS) { + Texts.drawText(20f, 100f, "Hello! FPS ${Game.fps}", font = "bold 72pt Arial") + } } } fun main(args: Array) { - Game.view.setToWidth(2000f); + Game.view.setToWidth(2000f) Game.start(WelcomeScreen()) } + +fun changeMusic(it: HTMLInputElement) { + val mus = music + + if (mus != null) { + if (it.checked) { + mus.volume = 1.0 + } else { + mus.volume = 0.0 + } + } +} + +fun showFPS(it: HTMLInputElement) { + showFPS = it.checked +} + +fun playGame() { + document.getElementById("menu")?.setAttribute("style", "display: none;") + + Game.setScreen(GameScreen()) +} diff --git a/web/index.html b/web/index.html index 906bce0..cb2b13a 100644 --- a/web/index.html +++ b/web/index.html @@ -14,9 +14,43 @@ canvas { position:absolute; } + + #options { + padding: 15px; + position: absolute; + right: 25px; + top: 25px; + z-index: 20; + color: white; + background-color: rgba(45, 45, 45, 0.75); + border-radius: 5px; + font-weight: bold; + font-family: Arial, Courier; + } + + #menu { + padding: 25px; + position: absolute; + left: 250px; + top: 250px; + z-index: 25; + color: white; + background-color: rgba(125, 45, 45, 0.75); + border-radius: 5px; + font-weight: bold; + font-family: Arial, Courier; + } + +
+ Music
+ Show FPS +
+