const i18n = require('LanguageData'); i18n.init(window.language); // languageID should be equal to the one we input in New Language ID input field const OnlineMap = require('./Map'); const PunchAtkConfig = { // for offender startupFrames: 2, activeFrames: 2, recoveryFrames: 4, // usually but not always "startupFrames+activeFrames" recoveryFramesOnBlock: 4, // usually but not always the same as "recoveryFrames" recoveryFramesOnHit: 4, // usually but not always the same as "recoveryFrames" moveforward: { x: 0, y: 0, }, hitboxOffset: 12.0, // should be about the radius of the PlayerCollider hitboxSize: { x: 24.0, y: 24.0, }, // for defender hitStunFrames: 0, blockStunFrames: 0, pushback: 10.0, releaseTriggerType: 1, // 1: rising-edge, 2: falling-edge damage: 5 }; cc.Class({ extends: OnlineMap, onDestroy() { console.warn("+++++++ Map onDestroy()"); }, spawnPlayerNode(joinIndex, vx, vy, playerRichInfo) { const self = this; const newPlayerNode = cc.instantiate(self.controlledCharacterPrefab) const playerScriptIns = newPlayerNode.getComponent("ControlledCharacter"); if (1 == joinIndex) { playerScriptIns.setSpecies("SoldierWaterGhost"); } else if (2 == joinIndex) { playerScriptIns.setSpecies("SoldierFireGhost"); playerScriptIns.animComp.node.scaleX = (-1.0); } const wpos = self.virtualGridToWorldPos(vx, vy); newPlayerNode.setPosition(cc.v2(wpos[0], wpos[1])); playerScriptIns.mapNode = self.node; const cpos = self.virtualGridToPlayerColliderPos(vx, vy, playerRichInfo); const d = playerRichInfo.colliderRadius * 2, x0 = cpos[0], y0 = cpos[1]; let pts = [[0, 0], [d, 0], [d, d], [0, d]]; const newPlayerCollider = self.collisionSys.createPolygon(x0, y0, pts); const collisionPlayerIndex = self.collisionPlayerIndexPrefix + joinIndex; self.collisionSysMap.set(collisionPlayerIndex, newPlayerCollider); safelyAddChild(self.node, newPlayerNode); setLocalZOrder(newPlayerNode, 5); newPlayerNode.active = true; playerScriptIns.scheduleNewDirection({ dx: playerRichInfo.dir.dx, dy: playerRichInfo.dir.dy }, true); return [newPlayerNode, playerScriptIns]; }, onLoad() { const self = this; window.mapIns = self; cc.director.getCollisionManager().enabled = false; const mapNode = self.node; const canvasNode = mapNode.parent; self.mainCameraNode = self.canvasNode.getChildByName("Main Camera"); self.mainCamera = self.mainCameraNode.getComponent(cc.Camera); for (let child of self.mainCameraNode.children) { child.setScale(1 / self.mainCamera.zoomRatio); } self.widgetsAboveAllNode = self.mainCameraNode.getChildByName("WidgetsAboveAll"); self.mainCameraNode.setPosition(cc.v2()); /** Init required prefab ended. */ self.inputDelayFrames = 8; self.inputScaleFrames = 2; self.inputFrameUpsyncDelayTolerance = 2; self.rollbackEstimatedDt = 0.016667; self.rollbackEstimatedDtMillis = 16.667; self.rollbackEstimatedDtNanos = 16666666; self.worldToVirtualGridRatio = 1000; self.virtualGridToWorldRatio = 1.0 / self.worldToVirtualGridRatio; const tiledMapIns = self.node.getComponent(cc.TiledMap); const fullPathOfTmxFile = cc.js.formatStr("map/%s/map", "dungeon"); cc.loader.loadRes(fullPathOfTmxFile, cc.TiledMapAsset, (err, tmxAsset) => { if (null != err) { console.error(err); return; } tiledMapIns.tmxAsset = null; mapNode.removeAllChildren(); self._resetCurrentMatch(); tiledMapIns.tmxAsset = tmxAsset; const newMapSize = tiledMapIns.getMapSize(); const newTileSize = tiledMapIns.getTileSize(); self.node.setContentSize(newMapSize.width * newTileSize.width, newMapSize.height * newTileSize.height); self.node.setPosition(cc.v2(0, 0)); let barrierIdCounter = 0; const boundaryObjs = tileCollisionManager.extractBoundaryObjects(self.node); for (let boundaryObj of boundaryObjs.barriers) { const x0 = boundaryObj.anchor.x, y0 = boundaryObj.anchor.y; const newBarrier = self.collisionSys.createPolygon(x0, y0, Array.from(boundaryObj, p => { return [p.x, p.y]; })); if (self.showCriticalCoordinateLabels) { for (let i = 0; i < boundaryObj.length; ++i) { const barrierVertLabelNode = new cc.Node(); switch (i % 4) { case 0: barrierVertLabelNode.color = cc.Color.RED; break; case 1: barrierVertLabelNode.color = cc.Color.GRAY; break; case 2: barrierVertLabelNode.color = cc.Color.BLACK; break; default: barrierVertLabelNode.color = cc.Color.MAGENTA; break; } const wx = boundaryObj.anchor.x + boundaryObj[i].x, wy = boundaryObj.anchor.y + boundaryObj[i].y; barrierVertLabelNode.setPosition(cc.v2(wx, wy)); const barrierVertLabel = barrierVertLabelNode.addComponent(cc.Label); barrierVertLabel.fontSize = 12; barrierVertLabel.lineHeight = barrierVertLabel.fontSize + 1; barrierVertLabel.string = `(${wx.toFixed(1)}, ${wy.toFixed(1)})`; safelyAddChild(self.node, barrierVertLabelNode); setLocalZOrder(barrierVertLabelNode, 5); barrierVertLabelNode.active = true; } } // console.log("Created barrier: ", newBarrier); ++barrierIdCounter; const collisionBarrierIndex = (self.collisionBarrierIndexPrefix + barrierIdCounter); self.collisionSysMap.set(collisionBarrierIndex, newBarrier); } const startRdf = { id: window.MAGIC_ROOM_DOWNSYNC_FRAME_ID.BATTLE_START, players: { 10: { id: 10, joinIndex: 1, virtualGridX: 0, virtualGridY: 0, speed: 2 * self.worldToVirtualGridRatio, colliderRadius: 12, dir: { dx: 0, dy: 0 } }, 11: { id: 11, joinIndex: 2, virtualGridX: 80 * self.worldToVirtualGridRatio, virtualGridY: 40 * self.worldToVirtualGridRatio, speed: 2 * self.worldToVirtualGridRatio, colliderRadius: 12, dir: { dx: 0, dy: 0 } }, } }; self.selfPlayerInfo = { id: 10 }; self._initPlayerRichInfoDict(startRdf.players); self.onRoomDownsyncFrame(startRdf); self.battleState = ALL_BATTLE_STATES.IN_BATTLE; }); }, update(dt) { const self = this; if (ALL_BATTLE_STATES.IN_BATTLE == self.battleState) { const elapsedMillisSinceLastFrameIdTriggered = performance.now() - self.lastRenderFrameIdTriggeredAt; if (elapsedMillisSinceLastFrameIdTriggered < (self.rollbackEstimatedDtMillis)) { // console.debug("Avoiding too fast frame@renderFrameId=", self.renderFrameId, ": elapsedMillisSinceLastFrameIdTriggered=", elapsedMillisSinceLastFrameIdTriggered); return; } try { let st = performance.now(); let prevSelfInput = null, currSelfInput = null; const noDelayInputFrameId = self._convertToInputFrameId(self.renderFrameId, 0); // It's important that "inputDelayFrames == 0" here if (self.shouldGenerateInputFrameUpsync(self.renderFrameId)) { const prevAndCurrInputs = self._generateInputFrameUpsync(noDelayInputFrameId); prevSelfInput = prevAndCurrInputs[0]; currSelfInput = prevAndCurrInputs[1]; } const rdf = self.rollbackAndChase(self.renderFrameId, self.renderFrameId + 1, self.collisionSys, self.collisionSysMap, false); self.applyRoomDownsyncFrameDynamics(rdf); let t3 = performance.now(); } catch (err) { console.error("Error during Map.update", err); } finally { ++self.renderFrameId; // [WARNING] It's important to increment the renderFrameId AFTER all the operations above!!! } } }, // Overriding this function to test experimental dynamics applyInputFrameDownsyncDynamicsOnSingleRenderFrame(delayedInputFrame, currRenderFrame, collisionSys, collisionSysMap) { const self = this; const nextRenderFramePlayers = {} for (let playerId in currRenderFrame.players) { const currPlayerDownsync = currRenderFrame.players[playerId]; nextRenderFramePlayers[playerId] = { id: playerId, virtualGridX: currPlayerDownsync.virtualGridX, virtualGridY: currPlayerDownsync.virtualGridY, dir: { dx: currPlayerDownsync.dir.dx, dy: currPlayerDownsync.dir.dy, }, characterState: currPlayerDownsync.characterState, speed: currPlayerDownsync.speed, battleState: currPlayerDownsync.battleState, score: currPlayerDownsync.score, removed: currPlayerDownsync.removed, joinIndex: currPlayerDownsync.joinIndex, framesToRecover: (0 < currPlayerDownsync.framesToRecover ? currPlayerDownsync.framesToRecover - 1 : 0), hp: currPlayerDownsync.hp, maxHp: currPlayerDownsync.maxHp, }; } const toRet = { id: currRenderFrame.id + 1, players: nextRenderFramePlayers, meleeBullets: [] }; const bulletPushbacks = new Array(self.playerRichInfoArr.length); // Guaranteed determinism regardless of traversal order const effPushbacks = new Array(self.playerRichInfoArr.length); // Guaranteed determinism regardless of traversal order for (let j in self.playerRichInfoArr) { const joinIndex = parseInt(j) + 1; bulletPushbacks[joinIndex - 1] = [0.0, 0.0]; effPushbacks[joinIndex - 1] = [0.0, 0.0]; const playerRichInfo = self.playerRichInfoArr[j]; const playerId = playerRichInfo.id; const collisionPlayerIndex = self.collisionPlayerIndexPrefix + joinIndex; const playerCollider = collisionSysMap.get(collisionPlayerIndex); const player = currRenderFrame.players[playerId]; const newVx = player.virtualGridX; const newVy = player.virtualGridY; const newCpos = self.virtualGridToPlayerColliderPos(newVx, newVy, self.playerRichInfoArr[joinIndex - 1]); playerCollider.x = newCpos[0]; playerCollider.y = newCpos[1]; } // Check bullet-anything collisions first, because the pushbacks caused by bullets might later be reverted by player-barrier collision const colliderBullets = new Map(); // Will all be removed at the end of `applyInputFrameDownsyncDynamicsOnSingleRenderFrame` due to the need for being rollback-compatible const removedBulletsAtCurrFrame = new Set(); for (let k in currRenderFrame.meleeBullets) { const meleeBullet = currRenderFrame.meleeBullets[k]; if ( meleeBullet.originatedRenderFrameId + meleeBullet.startupFrames >= currRenderFrame.id && meleeBullet.originatedRenderFrameId + meleeBullet.startupFrames + meleeBullet.activeFrames <= currRenderFrame.id ) { const collisionBulletIndex = self.collisionBulletIndexPrefix + melee.battleLocalId; const collisionOffenderIndex = self.collisionPlayerIndexPrefix + melee.offenderJoinIndex; const offenderCollider = collisionSysMap.get(collisionOffenderIndex); const offender = currRenderFrame.players[melee.offenderPlayerId]; const x0 = offenderCollider.x + offender.dir.dx * meleeBullet.hitboxOffset, y0 = offenderCollider.y + offender.dir.dy * meleeBullet.hitboxOffset; const pts = [[0, 0], [meleeBullet.hitboxSize.x, 0], [meleeBullet.hitboxSize.x, meleeBullet.hitboxSize.y], [0, meleeBullet.hitboxSize.y]]; const newBulletCollider = collisionSys.createPolygon(x0, y0, pts); newBulletCollider.collisionBulletIndex = collisionBulletIndex; newBulletCollider.pushback = meleeBullet.pushback; collisionSysMap.set(collisionBulletIndex, newBulletCollider); colliderBullets.set(collisionBulletIndex, newBulletCollider); console.log(`A meleeBullet=${JSON.stringify(meleeBullet)} is added to collisionSys at renderFrame.id=${currRenderFrame.id} as start-up frames ended and active frame is not yet ended`); } } collisionSys.update(); const result1 = collisionSys.createResult(); // Can I reuse a "self.collisionSysResult" object throughout the whole battle? colliderBullets.forEach((collisionBulletIndex, bulletCollider) => { const potentials = bulletCollider.potentials(); let shouldRemove = false; for (const potential of potentials) { if (null != potential.playerId && potential.playerId == bulletCollider.offenderPlayerId) continue; if (!bulletCollider.collides(potential, result1)) continue; if (null != potential.playerId) { bulletPushbacks[joinIndex - 1][0] += result1.overlap * result1.overlap_x * bulletCollider.pushback; bulletPushbacks[joinIndex - 1][1] += result1.overlap * result1.overlap_y * bulletCollider.pushback; const thatAckedPlayerInNextFrame = nextRenderFramePlayers[potential.playerId]; thatAckedPlayerInNextFrame.characterState = window.ATK_CHARACTER_STATE.Atked1[0]; const oldFrameToRecover = thatAckedPlayerInNextFrame.framesToRecover; thatAckedPlayerInNextFrame.framesToRecover = oldFrameToRecover > bulletCollider.hitStunFrames ? oldFrameToRecover : bulletCollider.hitStunFrames; // In case the hit player is already stun, we take the larger "hitStunFrames" } shouldRemove = true; } if (shouldRemove) { removedBulletsAtCurrFrame.add(collisionBulletIndex); } }); for (let k in currRenderFrame.meleeBullets) { const meleeBullet = currRenderFrame.meleeBullets[k]; // [WARNING] remove from collisionSys ANYWAY for the convenience of rollback if (collisionSysMap.has(meleeBullet.collisionBulletIndex)) { const bulletCollider = collisionSysMap.get(meleeBullet.collisionBulletIndex); bulletCollider.remove(); collisionSysMap.delete(meleeBullet.collisionBulletIndex); } if (removedBulletsAtCurrFrame.has(meleeBullet)) continue; toRet.meleeBullets.push(meleeBullet); } if (null != delayedInputFrame) { const delayedInputFrameForPrevRenderFrame = self.getCachedInputFrameDownsyncWithPrediction(self._convertToInputFrameId(currRenderFrame.id - 1, self.inputDelayFrames)); const inputList = delayedInputFrame.inputList; // Process player inputs for (let j in self.playerRichInfoArr) { const joinIndex = parseInt(j) + 1; effPushbacks[joinIndex - 1] = [0.0, 0.0]; const playerRichInfo = self.playerRichInfoArr[j]; const playerId = playerRichInfo.id; const collisionPlayerIndex = self.collisionPlayerIndexPrefix + joinIndex; const playerCollider = collisionSysMap.get(collisionPlayerIndex); const player = currRenderFrame.players[playerId]; if (0 < player.framesToRecover) { // No need to process inputs for this player continue; } const decodedInput = self.ctrl.decodeInput(inputList[joinIndex - 1]); const prevDecodedInput = (null == delayedInputFrameForPrevRenderFrame ? null : self.ctrl.decodeInput(delayedInputFrameForPrevRenderFrame.inputList[joinIndex - 1])); const prevBtnALevel = (null == prevDecodedInput ? 0 : prevDecodedInput.btnALevel); const playerInNextFrame = nextRenderFramePlayers[playerId]; if (1 == decodedInput.btnALevel && 0 == prevBtnALevel) { console.log(`playerId=${playerId} triggered a rising-edge of btnA at renderFrame.id=${currRenderFrame.id}, delayedInputFrame.id=${delayedInputFrame.inputFrameId}`); nextRenderFramePlayers[playerId].framesToRecover = PunchAtkConfig.recoveryFrames; const punch = window.pb.protos.MeleeBullet.create(PunchAtkConfig); punch.battleLocalId = self.bulletBattleLocalIdCounter++; punch.offenderJoinIndex = joinIndex; punch.offenderPlayerId = playerId; punch.originatedRenderFrameId = currRenderFrame.id; toRet.meleeBullets.push(punch); console.log(`A rising-edge of meleeBullet=${JSON.stringify(punch)} is created at renderFrame.id=${currRenderFrame.id}, delayedInputFrame.id=${delayedInputFrame.inputFrameId}`); playerInNextFrame.characterState = window.ATK_CHARACTER_STATE.Atk1[0]; } else if (0 == decodedInput.btnALevel && 1 == prevBtnALevel) { console.log(`playerId=${playerId} triggered a falling-edge of btnA at renderFrame.id=${currRenderFrame.id}, delayedInputFrame.id=${delayedInputFrame.inputFrameId}`); } else { // No trigger, process movement inputs if (0 != decodedInput.dx || 0 != decodedInput.dy) { // Update directions and thus would eventually update moving animation accordingly playerInNextFrame.dir.dx = decodedInput.dx; playerInNextFrame.dir.dy = decodedInput.dy; playerInNextFrame.characterState = window.ATK_CHARACTER_STATE.Walking[0]; } else { playerInNextFrame.characterState = window.ATK_CHARACTER_STATE.Idle1[0]; } const movement = self.virtualGridToPlayerColliderPos(decodedInput.dx + player.speed * decodedInput.dx, decodedInput.dy + player.speed * decodedInput.dy, self.playerRichInfoArr[joinIndex - 1]); playerCollider.x += movement[0]; playerCollider.y += movement[1]; } } collisionSys.update(); // by now all "bulletCollider"s are removed const result2 = collisionSys.createResult(); // Can I reuse a "self.collisionSysResult" object throughout the whole battle? for (let j in self.playerRichInfoArr) { const joinIndex = parseInt(j) + 1; const playerId = self.playerRichInfoArr[j].id; const collisionPlayerIndex = self.collisionPlayerIndexPrefix + joinIndex; const playerCollider = collisionSysMap.get(collisionPlayerIndex); const potentials = playerCollider.potentials(); for (const potential of potentials) { // Test if the player collides with the wall if (!playerCollider.collides(potential, result2)) continue; // Push the player out of the wall effPushbacks[joinIndex - 1][0] += result2.overlap * result2.overlap_x; effPushbacks[joinIndex - 1][1] += result2.overlap * result2.overlap_y; } } for (let j in self.playerRichInfoArr) { const joinIndex = parseInt(j) + 1; const playerId = self.playerRichInfoArr[j].id; const collisionPlayerIndex = self.collisionPlayerIndexPrefix + joinIndex; const playerCollider = collisionSysMap.get(collisionPlayerIndex); const newVpos = self.playerColliderAnchorToVirtualGridPos(playerCollider.x - effPushbacks[joinIndex - 1][0], playerCollider.y - effPushbacks[joinIndex - 1][1], self.playerRichInfoArr[j]); nextRenderFramePlayers[playerId].virtualGridX = newVpos[0]; nextRenderFramePlayers[playerId].virtualGridY = newVpos[1]; } } return toRet; }, });