From ca387b53ecdbe0d91f192da5d9245373eee48c07 Mon Sep 17 00:00:00 2001 From: Zutatensuppe Date: Sat, 7 Nov 2020 17:49:42 +0100 Subject: [PATCH] add hand + grab cursor for own player --- game/Camera.js | 15 ++++++--- game/EventAdapter.js | 6 ++-- game/grab.png | Bin 0 -> 148 bytes game/hand.png | Bin 0 -> 170 bytes game/index.js | 71 ++++++++++++++++++++++++++++++++++++++++--- server/index.js | 1 + 6 files changed, 82 insertions(+), 11 deletions(-) create mode 100644 game/grab.png create mode 100644 game/hand.png diff --git a/game/Camera.js b/game/Camera.js index 4a5627a..6c8c99b 100644 --- a/game/Camera.js +++ b/game/Camera.js @@ -4,8 +4,8 @@ export default class Camera { constructor(canvas) { this.x = 0 this.y = 0 - - // TODO: when canvas resizes, this should + + // TODO: when canvas resizes, this should // syncronize with the cam this.width = canvas.width this.height = canvas.height @@ -36,7 +36,7 @@ export default class Camera { this.y + (this.height + h_final) / 2 ) } - + move(x, y) { this.x += x / this.zoom this.y += y / this.zoom @@ -74,4 +74,11 @@ export default class Camera { y: (mouse.y / this.zoom) - this.y, } } -} \ No newline at end of file + + translateMouseBack(mouse) { + return { + x: (mouse.x + this.x) * this.zoom, + y: (mouse.y + this.y) * this.zoom, + } + } +} diff --git a/game/EventAdapter.js b/game/EventAdapter.js index d021662..806959b 100644 --- a/game/EventAdapter.js +++ b/game/EventAdapter.js @@ -6,7 +6,7 @@ export default class EventAdapter { canvas.addEventListener('mousemove', this._mouseMove.bind(this)) canvas.addEventListener('wheel', this._wheel.bind(this)) } - + consumeAll() { if (this._mouseEvts.length === 0) { return [] @@ -33,6 +33,6 @@ export default class EventAdapter { } _wheel(e) { - this._mouseEvts.push({type: 'wheel', y: e.deltaY}) + this._mouseEvts.push({type: 'wheel', deltaY: e.deltaY, x: e.offsetX, y: e.offsetY}) } -} \ No newline at end of file +} diff --git a/game/grab.png b/game/grab.png new file mode 100644 index 0000000000000000000000000000000000000000..37faea38ea41f792489fe7225b1d7919380acf24 GIT binary patch literal 148 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`(Vi}jAr`%F15a}uP~h=C^8f$S zH%UiDmxi&$O`F_RX~J4p@M#&(_KHm^9-B^o%5k%6d=s4E&%|(?W%tGS6_M%u_Yc}K wZVS3(ajPjeK~12mC*?siUs$tyamhXAO+1?aPB&be0knp})78&qol`;+05t74GXMYp literal 0 HcmV?d00001 diff --git a/game/hand.png b/game/hand.png new file mode 100644 index 0000000000000000000000000000000000000000..c20b605331260113b6e76a2661c8fa767e8b7c29 GIT binary patch literal 170 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`g`O^sAr`%BgB|$}C~z?U|Ns1* z!HP4y?RmZ?y&Jb`blqW;Huig=!FJAem6l}xu5S|-FfF@j#PFbV!|aA1IS-~YKHhU= zQbcH!z}2aYI*Cu8cz3OfH~%2i({CGk_?vcx`?9q$g2hpWKVR#Y98USWmhTlG^I~HT U)obhPftE9Py85}Sb4q9e0DXW#xBvhE literal 0 HcmV?d00001 diff --git a/game/index.js b/game/index.js index 3d5f8ba..c1291db 100644 --- a/game/index.js +++ b/game/index.js @@ -113,6 +113,34 @@ function mapBitmapToBitmapCapped (bitmap_src, rect_src, bitmap_dst, rect_dst, re } } +function mapBitmapToAdapterCapped (src, rect_src, dst, rect_dst, rect_cap) { + if (!rect_cap) { + return mapBitmapToAdapter(src, rect_src, dst, rect_dst) + } + const tmp = new Uint8ClampedArray(4) + const w_f = (rect_src.width) / (rect_dst.width) + const h_f = (rect_src.height) / (rect_dst.height) + + let startX = Math.floor(Math.max(rect_cap.x0, rect_dst.x0, (-rect_src.x0 / w_f) + rect_dst.x0)) + let startY = Math.floor(Math.max(rect_cap.y0, rect_dst.y0, (-rect_src.y0 / h_f) + rect_dst.y0)) + + let endX = Math.ceil(Math.min(rect_cap.x1, rect_dst.x1, ((src._w - rect_src.x0) / w_f) + rect_dst.x0)) + let endY = Math.ceil(Math.min(rect_cap.y1, rect_dst.y1, ((src._h - rect_src.y0) / h_f) + rect_dst.y0)) + + for (let x = startX; x < endX; x++) { + for (let y = startY; y < endY; y++) { + const src_x = rect_src.x0 + Math.floor((x - rect_dst.x0) * w_f) + const src_y = rect_src.y0 + Math.floor((y - rect_dst.y0) * h_f) + if (src.getPix(src_x, src_y, tmp)) { + if (tmp[3] === 255) { + dst.putPix(x, y, tmp) + } + } + } + } + adapter_dst.apply() +} + function mapBitmapToAdapter (bitmap_src, rect_src, adapter_dst, rect_dst) { const tmp = new Uint8ClampedArray(4) const w_f = (rect_src.x1 - rect_src.x0) / (rect_dst.x1 - rect_dst.x0) @@ -567,6 +595,9 @@ async function main () { let me = initme() const player = {x: 0, y: 0, down: false} + let cursorGrab = await loadImageToBitmap('./grab.png') + let cursorHand = await loadImageToBitmap('./hand.png') + let conn = setupNetwork(me + '|' + gameId) conn.send(JSON.stringify({type: 'init', player})) conn.onSocket('message', async ({data}) => { @@ -608,6 +639,7 @@ async function main () { // information for next render cycle let rerenderTable = true let rerenderTableRect = null + let rerenderPlayer = true let rerender = true let redrawMinX = null let redrawMaxX = null @@ -844,20 +876,36 @@ async function main () { if (mouse.type === 'move') { const tp = cam.translateMouse(mouse) changePlayer({x: tp.x, y: tp.y}) + updateDrawMinMax(tp, cursorGrab.width) + rerenderPlayer = true } if (mouse.type === 'down') { + const tp = cam.translateMouse(mouse) changePlayer({down: true}) + updateDrawMinMax(tp, cursorGrab.width) + rerenderPlayer = true } else if (mouse.type === 'up') { + const tp = cam.translateMouse(mouse) changePlayer({down: false}) + updateDrawMinMax(tp, cursorGrab.width) + rerenderPlayer = true } if (mouse.type === 'wheel') { - if (mouse.y < 0) { + if (mouse.deltaY < 0) { if (cam.zoomIn()) { rerender = true + const tp = cam.translateMouse(mouse) + changePlayer({x: tp.x, y: tp.y}) + updateDrawMinMax(tp, cursorGrab.width) + rerenderPlayer = true } } else { if (cam.zoomOut()) { rerender = true + const tp = cam.translateMouse(mouse) + changePlayer({x: tp.x, y: tp.y}) + updateDrawMinMax(tp, cursorGrab.width) + rerenderPlayer = true } } } else if (mouse.type === 'down') { @@ -1019,9 +1067,9 @@ async function main () { } const onRender = () => { - if (!rerenderTable && !rerender) { - return - } + if (!rerenderTable && !rerender) { + return + } console.log('rendering') @@ -1068,6 +1116,21 @@ async function main () { - cam.y + (cam.height / cam.zoom), ), adapter, adapter.getBoundingRect()) + + let cursor = player.down ? cursorGrab : cursorHand + let back = cam.translateMouseBack(player) + mapBitmapToAdapter( + cursor, + cursor.getBoundingRect(), + adapter, + new BoundingRectangle( + back.x - (cursor.width/2), + back.x - (cursor.width/2) + cursor.width - 1, + back.y - (cursor.width/2), + back.y - (cursor.width/2) + cursor.height - 1, + ) + ) + rerenderTable = false rerenderTableRect = null rerender = false diff --git a/server/index.js b/server/index.js index bae4b9d..fdb9999 100644 --- a/server/index.js +++ b/server/index.js @@ -14,6 +14,7 @@ app.use('/', (req, res, next) => {