Skip to content

Commit f028784

Browse files
mooooooimooooooi
authored
feat: Example simple scene control (#7)
* feat: add control map * feat(example): control logic * fix: time must be not global / network sendding time error
1 parent a9cbef7 commit f028784

File tree

5 files changed

+230
-60
lines changed

5 files changed

+230
-60
lines changed

‎example/bundle.js

Lines changed: 96 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1743,6 +1743,30 @@ var StateSync = (function (exports) {
17431743
return StringDataBuffer;
17441744
})();
17451745

1746+
var Net = /** @class */ (function () {
1747+
function Net() {}
1748+
Net.send = function (obj) {
1749+
var _this = this;
1750+
var promise = new Promise(function (resolve) {
1751+
setTimeout(
1752+
resolve,
1753+
_this.delay + Math.random() * _this.jitter,
1754+
obj
1755+
);
1756+
});
1757+
return {
1758+
recv: function (func, context) {
1759+
promise.then(function (res) {
1760+
func.call(context, res);
1761+
});
1762+
},
1763+
};
1764+
};
1765+
Net.delay = 0;
1766+
Net.jitter = 0;
1767+
return Net;
1768+
})();
1769+
17461770
var Vector = /** @class */ (function () {
17471771
function Vector() {
17481772
this.x = 0;
@@ -1757,7 +1781,7 @@ var StateSync = (function (exports) {
17571781
function Transform() {
17581782
this.pos = new Vector();
17591783
}
1760-
Transform.prototype.move = function (x, y) {
1784+
Transform.prototype.serverMove = function (x, y) {
17611785
this.pos.x += x;
17621786
this.pos.y += y;
17631787
};
@@ -1769,7 +1793,7 @@ var StateSync = (function (exports) {
17691793
__param(1, RpcVar(DataType.int)),
17701794
],
17711795
Transform.prototype,
1772-
"move",
1796+
"serverMove",
17731797
null
17741798
);
17751799
Transform = __decorate([NetComp("trans")], Transform);
@@ -1793,36 +1817,20 @@ var StateSync = (function (exports) {
17931817
return View;
17941818
})();
17951819

1796-
var Net = /** @class */ (function () {
1797-
function Net() {}
1798-
Net.send = function (obj) {
1799-
var _this = this;
1800-
var promise = new Promise(function (resolve) {
1801-
setTimeout(
1802-
resolve,
1803-
_this.delay + Math.random() * _this.jitter,
1804-
obj
1805-
);
1806-
});
1807-
return {
1808-
recv: function (func, context) {
1809-
promise.then(function (res) {
1810-
func.call(context, res);
1811-
});
1812-
},
1813-
};
1814-
};
1815-
Net.delay = 0;
1816-
Net.jitter = 0;
1817-
return Net;
1820+
var Time = /** @class */ (function () {
1821+
function Time() {}
1822+
Time.deltaTime = 0;
1823+
Time.fixedDeltaTime = 1 / 30;
1824+
return Time;
18181825
})();
1819-
18201826
var Base = /** @class */ (function () {
18211827
function Base(name, canvas, rpcType) {
18221828
this.canvas = canvas;
18231829
this.bg = "#947A6D";
18241830
this.yelloBall = 0xf7d94c;
18251831
this.whiteBall = 0xf8c3cd;
1832+
this._preTimestamp = 0;
1833+
this._fixedTimeAccumulator = 0;
18261834
this.domain = Domain.Create(name, StringDataBuffer, rpcType);
18271835
this.ctx = canvas.getContext("2d");
18281836
this.canvas.width = 950;
@@ -1833,8 +1841,29 @@ var StateSync = (function (exports) {
18331841
this.initScene();
18341842
this.render(0);
18351843
}
1844+
Base.prototype.update = function () {};
1845+
Base.prototype.fixedUpdate = function () {};
1846+
Base.prototype.lateUpdate = function () {};
18361847
Base.prototype.loop = function (time) {
1848+
this.update();
1849+
if (this._preTimestamp === 0) {
1850+
Time.deltaTime = 1 / 60;
1851+
} else {
1852+
Time.deltaTime = time - this._preTimestamp;
1853+
}
1854+
this._preTimestamp = time;
1855+
this._fixedTimeAccumulator += time;
1856+
var count = 0;
1857+
while (
1858+
this._fixedTimeAccumulator >= Time.fixedDeltaTime &&
1859+
count < 3
1860+
) {
1861+
count++;
1862+
this._fixedTimeAccumulator -= Time.fixedDeltaTime;
1863+
this.fixedUpdate();
1864+
}
18371865
this.render(time);
1866+
this.lateUpdate();
18381867
};
18391868
Base.prototype.render = function (time) {
18401869
requestAnimationFrame(this.myLoop);
@@ -1878,6 +1907,8 @@ var StateSync = (function (exports) {
18781907
this.domain.reg(ent1);
18791908
this.domain.reg(ent2);
18801909
};
1910+
Base.prototype.onKeyDown = function (ev) {};
1911+
Base.prototype.onKeyUp = function (ev) {};
18811912
return Base;
18821913
})();
18831914
var Server = /** @class */ (function (_super) {
@@ -1890,21 +1921,31 @@ var StateSync = (function (exports) {
18901921
}
18911922
Server.prototype.loop = function (dt) {
18921923
_super.prototype.loop.call(this, dt);
1893-
var t1 = this.c1.$comps.trans;
1924+
this.c1.$comps.trans;
18941925
this.c2.$comps.trans;
1895-
t1.move(1, 0);
1926+
};
1927+
Server.prototype.fixedUpdate = function () {
1928+
var c1 = Net.client1;
1929+
var c2 = Net.client2;
1930+
var data = this.domain.asData();
1931+
Net.send(data).recv(c1.domain.setData, c1.domain);
1932+
Net.send(data).recv(c2.domain.setData, c2.domain);
18961933
};
18971934
return Server;
18981935
})(Base);
18991936
var Client = /** @class */ (function (_super) {
19001937
__extends(Client, _super);
1901-
function Client(index, canvas) {
1938+
function Client(index, canvas, controlMap) {
19021939
var _this =
19031940
_super.call(this, "client" + index, canvas, RpcType.CLIENT) ||
19041941
this;
19051942
_this.index = index;
19061943
_this.canvas = canvas;
1944+
_this.controlMap = controlMap;
1945+
_this._input = { isLeft: false, isRight: false };
19071946
_this.mine.$comps.view.changeColor(_this.color);
1947+
window.addEventListener("keydown", _this.onKeyDown.bind(_this));
1948+
window.addEventListener("keyup", _this.onKeyUp.bind(_this));
19081949
return _this;
19091950
}
19101951
Object.defineProperty(Client.prototype, "mine", {
@@ -1921,13 +1962,40 @@ var StateSync = (function (exports) {
19211962
enumerable: false,
19221963
configurable: true,
19231964
});
1965+
Client.prototype.onKeyDown = function (ev) {
1966+
var map = this.controlMap;
1967+
if (ev.key === map.left) {
1968+
this._input.isLeft = true;
1969+
} else if (ev.key === map.right) {
1970+
this._input.isRight = true;
1971+
}
1972+
};
1973+
Client.prototype.onKeyUp = function (ev) {
1974+
var map = this.controlMap;
1975+
if (ev.key === map.left) {
1976+
this._input.isLeft = false;
1977+
} else if (ev.key === map.right) {
1978+
this._input.isRight = false;
1979+
}
1980+
};
1981+
Client.prototype.fixedUpdate = function () {
1982+
var input = this._input;
1983+
var trans = this.mine.get(Transform);
1984+
trans.serverMove(
1985+
(input.isLeft ? -1 : 0) + (input.isRight ? 1 : 0),
1986+
0
1987+
);
1988+
var data = this.domain.asData();
1989+
Net.send(data).recv(Net.server.domain.setData, Net.server.domain);
1990+
};
19241991
return Client;
19251992
})(Base);
19261993

19271994
exports.Base = Base;
19281995
exports.Client = Client;
19291996
exports.Net = Net;
19301997
exports.Server = Server;
1998+
exports.Time = Time;
19311999
exports.Transform = Transform;
19322000
exports.Vector = Vector;
19332001
exports.View = View;

‎example/index.html

Lines changed: 33 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@
2626
</div>
2727

2828
<div style="border-style: solid; padding: 20px 20px; margin: 10px 0px;">
29-
Server ->
29+
Server, Status: delay({{statusDelay}}), jitter({{statusJitter}})
30+
<br>
3031
Delay:
3132
<input style="width: 50px; font-size: 15px;" type="number" id="serverDelay" @click="checkboxClick"
3233
value="100">
@@ -56,43 +57,47 @@
5657
</body>
5758
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
5859
<script>
60+
const data = { hello: "1111", statusDelay: 0, statusJitter: 0 };
61+
const vm = new Vue({ el: "#app", data });
62+
5963
function checkboxClick(event) {
6064
const t = event.target;
6165
console.log(t.id, t.checked, t.value);
66+
switch(t.id)
67+
{
68+
case "serverJitter":
69+
Net.jitter = Number(t.value);
70+
data.statusJitter = Net.jitter;
71+
break;
72+
case "serverDelay":
73+
Net.delay = Number(t.value);
74+
data.statusDelay = Net.delay;
75+
76+
break;
77+
}
6278
}
63-
const data = { hello: "1111" };
64-
const vm = new Vue({ el: "#app", data });
79+
6580
const client1 = new StateSync.Client(
6681
1,
67-
document.getElementById("client1")
68-
);
69-
const client2 = new StateSync.Client(
70-
2,
71-
document.getElementById("client2")
72-
);
73-
const server = new StateSync.Server(document.getElementById("server"));
74-
82+
document.getElementById("client1"),
83+
{left: "a", right: "d"}
84+
);
85+
const client2 = new StateSync.Client(
86+
2,
87+
document.getElementById("client2"),
88+
{left: "ArrowLeft", right: "ArrowRight"}
89+
);
90+
const server = new StateSync.Server(document.getElementById("server"));
91+
7592
const Net = StateSync.Net
7693
vm.hello = "aaaa";
7794
Net.delay = 100;
7895
Net.jitter = 20;
79-
setInterval(() => {
80-
// client to server
81-
Net
82-
.send(client1.domain.asData())
83-
.recv(server.domain.setData, server.domain);
84-
Net
85-
.send(client2.domain.asData())
86-
.recv(server.domain.setData, server.domain);
87-
// server to client
88-
const scData = server.domain.asData();
89-
Net
90-
.send(scData)
91-
.recv(client1.domain.setData, client1.domain)
92-
Net
93-
.send(scData)
94-
.recv(client2.domain.setData, client2.domain)
95-
}, 500);
96+
data.statusDelay = Net.delay;
97+
data.statusJitter = Net.jitter;
98+
Net.client1 = client1;
99+
Net.client2 = client2;
100+
Net.server = server;
96101
</script>
97102

98103
</html>

0 commit comments

Comments
 (0)