ðöð¥ð▒ÐÇðÁ ð┤ð¥Ðêð╗ð© ð▓ ð┐ÐèÐÇð▓ð©ÐÅ ð¢ð© ÐâÐÇð¥ð║ ðÀð░ ÐüÐèðÀð┤ð░ð▓ð░ð¢ðÁ ð¢ð░ ð©ð│ÐÇð░ ÐüÐèÐü Ðüð¥ÐäÐéÐâðÁÐÇð¢ð░Ðéð░ ÐÇð░ð╝ð║ð░ Phaser 3. ðóÐâð║ ÐëðÁ ð¢ð░ÐâÐçð©ÐéðÁ ð║ð░ð║ ð┤ð░ ÐüÐèðÀð┤ð░ð┤ðÁÐéðÁ ð╝ð░ð╗ð║ð░ ð©ð│ÐÇð░, ð▓ ð║ð¥ÐÅÐéð¥ ð©ð│ÐÇð░ÐçÐèÐé Ðéð©Ðçð░ ð© Ðüð║ð░Ðçð░ ð┐ð¥ ð┐ð╗ð░ÐéÐäð¥ÐÇð╝ð©, ÐüÐèð▒ð©ÐÇð░ ðÀð▓ðÁðÀð┤ð© ð© ÐüðÁ ð┐ð░ðÀð© ð¥Ðé ð▓ÐÇð░ð│ð¥ð▓ðÁ. ðƒð¥ ð▓ÐÇðÁð╝ðÁ ð¢ð░ Ðéð¥ð▓ð░ ÐëðÁ ð¥ð▒ÐÅÐüð¢ð©ð╝ ð¢ÐÅð║ð¥ð© ð¥Ðé ð¢ð░ð╣-ð▓ð░ðÂð¢ð©ÐéðÁ ð▓ÐèðÀð╝ð¥ðÂð¢ð¥ÐüÐéð© ð¢ð░ ÐÇð░ð╝ð║ð░Ðéð░.
ðÜð░ð║ð▓ð¥ ðÁ Phaser?
Phaser ðÁ Ðüð¥ÐäÐéÐâðÁÐÇð¢ð░ ÐÇð░ð╝ð║ð░ ðÀð░ HTML5 ð©ð│ÐÇð©, Ðçð©ÐÅÐéð¥ ÐåðÁð╗ ðÁ ð┤ð░ ð┐ð¥ð╝ð¥ð│ð¢ðÁ ð¢ð░ ÐÇð░ðÀÐÇð░ð▒ð¥ÐéÐçð©Ðåð©ÐéðÁ ð▓ ð▒ÐèÐÇðÀð░Ðéð░ ð¢ð░ð┐ÐÇð░ð▓ð░ ð¢ð░ Ðüð╗ð¥ðÂð¢ð© HTML5 ð©ð│ÐÇð©, ÐÇð░ð▒ð¥ÐéðÁÐëð© ð▓Ðèð▓ ð▓Ðüð©Ðçð║ð© ð▒ÐÇð░ÐâðÀÐèÐÇð©. ðíð┐ðÁÐåð©ð░ð╗ð¢ð¥ ðÁ ÐüÐèðÀð┤ð░ð┤ðÁð¢ð░ ð┤ð░ ÐüðÁ ð▓ÐèðÀð┐ð¥ð╗ðÀð▓ð░ ð¥Ðé ð▓ÐèðÀð╝ð¥ðÂð¢ð¥ÐüÐéð©ÐéðÁ ð¢ð░ ð╝ð¥ð┤ðÁÐÇð¢ð©ÐéðÁ ð▒ÐÇð░ÐâðÀÐèÐÇð© - ð© ðÀð░ ð║ð¥ð╝ð┐ÐÄÐéÐÇð©, ð© ðÀð░ ÐéðÁð╗ðÁÐäð¥ð¢ð©. ðòð┤ð©ð¢ÐüÐéð▓ðÁð¢ð¥ ðÁ ð¢ðÁð¥ð▒Ðàð¥ð┤ð©ð╝ð¥ ð▒ÐÇð░ÐâðÀÐèÐÇÐèÐé ð┤ð░ ð┐ð¥ð┤ð┤ÐèÐÇðÂð░ Ðéð░ð│ð░ canvas.
ðÜð░ð║ð▓ð¥ ðÁ ð¢ðÁð¥ð▒Ðàð¥ð┤ð©ð╝ð¥?
ðÿðÀÐéðÁð│ð╗ðÁÐéðÁ Ðéð¥ðÀð© ð░ÐÇÐàð©ð▓, ÐüÐèð┤ÐèÐÇðÂð░Ðë ð║ð¥ð┤ð░ ð¢ð░ ð▓ÐüÐÅð║ð░ ÐüÐéÐèð┐ð║ð░ ð¥Ðé Ðéð¥ðÀð© ÐâÐÇð¥ð║ ð© ÐÇðÁÐüÐâÐÇÐüð©ÐéðÁ, ð║ð¥ð©Ðéð¥ ÐëðÁ ð©ðÀð┐ð¥ð╗ðÀð▓ð░ð╝ðÁ.
ðØÐâðÂð¢ð© Ðüð░ ðÆð© ð╝ð¢ð¥ð│ð¥ ð┐ÐÇð¥ÐüÐéð© ð┐ð¥ðÀð¢ð░ð¢ð©ÐÅ ðÀð░ ð┐ÐÇð¥ð│ÐÇð░ð╝ð¢ð©ÐÅ ðÁðÀð©ð║ JavaScript.
ðƒÐÇð¥ÐçðÁÐéðÁÐéðÁ ð© ð┐ÐèÐÇð▓ð¥ð¢ð░Ðçð░ð╗ð¢ð©ÐéðÁ ÐüÐéÐèð┐ð║ð© ðÀð░ ðÀð░ð┐ð¥Ðçð▓ð░ð¢ðÁ, ð║Ðèð┤ðÁÐéð¥ ÐëðÁ ð¢ð░ÐâÐçð©ÐéðÁ ð║ð░ð║ ð┤ð░ ð©ðÀÐéðÁð│ð╗ð©ÐéðÁ Phaser ð© ð┤ð░ ð┐ð¥ð┤ð│ð¥Ðéð▓ð©ÐéðÁ ÐüÐÇðÁð┤ð░Ðéð░ Ðüð© ðÀð░ ÐÇð░ðÀÐÇð░ð▒ð¥Ðéð║ð░, ð░ ÐüÐèÐëð¥ ÐëðÁ ð▓ð©ð┤ð©ÐéðÁ ð┐ÐÇð¥ÐüÐéð░ ÐüÐéÐÇÐâð║ÐéÐâÐÇð░ ð© ð¥Ðüð¢ð¥ð▓ð¢ð©ÐéðÁ ÐäÐâð¢ð║Ðåð©ð© ð¢ð░ ð┐ÐÇð¥ðÁð║Ðé Ðü ð¢ðÁð│ð¥.
ðÉð║ð¥ ÐüÐéðÁ ð┐ð¥Ðüð╗ðÁð┤ð▓ð░ð╗ð© ð┐ÐèÐÇð▓ð¥ð¢ð░Ðçð░ð╗ð¢ð©ÐéðÁ ÐüÐéÐèð┐ð║ð©, ð▓ðÁÐçðÁ ÐëðÁ ÐüÐéðÁ ð©ðÀÐéðÁð│ð╗ð©ð╗ð© Phaser ð© ÐëðÁ ÐüÐéðÁ ð│ð¥Ðéð¥ð▓ð© ð┤ð░ ð┐ð©ÐêðÁÐéðÁ ð║ð¥ð┤. ðÿðÀÐéðÁð│ð╗ðÁÐéðÁ ÐÇðÁÐüÐâÐÇÐüð©ÐéðÁ ðÀð░ Ðéð¥ðÀð© ÐâÐÇð¥ð║ ð© ð│ð© ÐÇð░ðÀð░ÐÇÐàð©ð▓ð©ÐÇð░ð╣ÐéðÁ ð▓ ð¥Ðüð¢ð¥ð▓ð¢ð░Ðéð░ ð┤ð©ÐÇðÁð║Ðéð¥ÐÇð©ÐÅ ð¢ð░ ðÆð░Ðêð©ÐÅ ÐâðÁð▒ ÐüÐèÐÇð▓ÐèÐÇ.
ð×Ðéð▓ð¥ÐÇðÁÐéðÁ Ðäð░ð╣ð╗ð░ part1.html ð▓Ðèð▓ ðÆð░Ðêð©ÐÅ ð©ðÀð▒ÐÇð░ð¢ ÐéðÁð║ÐüÐéð¥ð▓ ÐÇðÁð┤ð░ð║Ðéð¥ÐÇ. ðØðÁð║ð░ ð┤ð░ ð│ð¥ ÐÇð░ðÀð│ð╗ðÁð┤ð░ð╝ðÁ ð┐ð¥-ð¥Ðéð▒ð╗ð©ðÀð¥. ð£ð░ð╗ð║ð¥Ðéð¥ HTML ð║ð¥ð┤ ð┐ÐèÐÇð▓ð¥ ð▓ð║ð╗ÐÄÐçð▓ð░ Phaser, Ðüð╗ðÁð┤ ð║ð¥ðÁÐéð¥ ð▓ð©ðÂð┤ð░ð╝ðÁ Ðüð╗ðÁð┤ð¢ð░Ðéð░ ÐüÐéÐÇÐâð║ÐéÐâÐÇð░:
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
function preload ()
{
}
function create ()
{
}
function update ()
{
}ðºÐÇðÁðÀ ð¥ð▒ðÁð║Ðéð░ config, ðÆð©ðÁ ð╝ð¥ðÂðÁÐéðÁ ð┤ð░ ð║ð¥ð¢Ðäð©ð│ÐâÐÇð©ÐÇð░ÐéðÁ ðÆð░Ðêð░Ðéð░ ð©ð│ÐÇð░. ðÆ ð¢ðÁð│ð¥ ðÁ ð▓ÐèðÀð╝ð¥ðÂð¢ð¥ ð┤ð░ ð┐ÐÇð©ÐüÐèÐüÐéð▓ð░Ðé ð╝ð¢ð¥ð│ð¥ ÐÇð░ðÀð╗ð©Ðçð¢ð© ð¢ð░ÐüÐéÐÇð¥ð╣ð║ð©, Ðü ð┐ð¥ð▓ðÁÐçðÁÐéð¥ ð¥Ðé ð║ð¥ð©Ðéð¥ ÐëðÁ ÐüðÁ ÐüÐÇðÁÐëð¢ðÁÐéðÁ, ð┤ð¥ð║ð░Ðéð¥ ÐÇð░ðÀÐêð©ÐÇÐÅð▓ð░ÐéðÁ ðÀð¢ð░ð¢ð©ÐÅÐéð░ Ðüð© ðÀð░ Phaser. ðÆ Ðéð¥ðÀð© ÐâÐÇð¥ð║, ð¢ð©ðÁ Ðüð░ð╝ð¥ ðÀð░ð┤ð░ð▓ð░ð╝ðÁ ðÂðÁð╗ð░ð¢ð©ÐÅ renderer (Ðéð¥ð▓ð░ ðÁ ð¢ð░Ðçð©ð¢ÐèÐé, ð┐ð¥ ð║ð¥ð╣Ðéð¥ Phaser ð©ðÀð▓ðÁðÂð┤ð░ ð©ðÀð¥ð▒ÐÇð░ðÂðÁð¢ð©ÐÅ ð¢ð░ ðÁð║ÐÇð░ð¢ð░), ÐÇð░ðÀð╝ðÁÐÇð░ ð¢ð░ ð©ð│ÐÇð░Ðéð░ ð© ðÁð┤ð©ð¢ÐüÐéð▓ðÁð¢ Scene (ð▒Ðâð║ð▓ð░ð╗ð¢ð¥ ð┐ÐÇðÁð▓ðÁð┤ðÁð¢ð¥ "ÐüÐåðÁð¢ð░" - ð▓ ð║ð¥ð¢ÐéðÁð║ÐüÐéð░ ð¢ð░ Phaser, Ðéð¥ð▓ð░ Ðüð░ ð¥Ðéð┤ðÁð╗ð¢ð© Ðçð░ÐüÐéð© ð¥Ðé ð©ð│ÐÇð░Ðéð░), ð║ð¥ð╣Ðéð¥ ÐëðÁ ÐüðÁ ð©ðÀð┐ð¥ð╗ðÀð▓ð░ ð┐ð¥ ð┐ð¥ð┤ÐÇð░ðÀð▒ð©ÐÇð░ð¢ðÁ.
ðÜð¥ð¢Ðäð©ð│ÐâÐÇð░Ðåð©ð¥ð¢ð¢ð©ÐÅÐé ð¥ð▒ðÁð║Ðé ÐüðÁ ð┐ð¥ð┤ð░ð▓ð░ ð¢ð░ ð¢ð¥ð▓ð░ ð©ð¢ÐüÐéð░ð¢Ðåð©ÐÅ ð¢ð░ ð║ð╗ð░Ðüð░ Phaser.Game, ð║ð¥ÐÅÐéð¥ ÐüðÁ ðÀð░ð┐ð©Ðüð▓ð░ ð▓ ð┐ÐÇð¥ð╝ðÁð¢ð╗ð©ð▓ð░Ðéð░ game. ðí Ðéð¥ð▓ð░ ðÀð░ð┐ð¥Ðçð▓ð░ ðÂð©ð▓ð¥ÐéÐèÐé ð¢ð░ Phaser.
ðÆÐèð▓ Phaser 2, ð¥ð▒ðÁð║ÐéÐèÐé ð¢ð░ ð©ð│ÐÇð░Ðéð░ Ðüð╗ÐâðÂðÁÐêðÁ ðÀð░ ð┤ð¥ÐüÐéÐèð┐ ð┤ð¥ ð┐ð¥ÐçÐéð© ð▓ÐüÐÅð║ð░ ðÁð┤ð¢ð░ ð▓ÐèÐéÐÇðÁÐêð¢ð░ Ðüð©ÐüÐéðÁð╝ð░, ð┐ð¥ÐÇð░ð┤ð© ð║ð¥ðÁÐéð¥ ÐçðÁÐüÐéð¥ ÐüðÁ ðÀð░ð┐ð©Ðüð▓ð░ÐêðÁ ð▓ ð│ð╗ð¥ð▒ð░ð╗ð¢ð░ ð┐ÐÇð¥ð╝ðÁð¢ð╗ð©ð▓ð░, ð¥ð▒ð©ð║ð¢ð¥ð▓ðÁð¢ð¥ ð¢ð░ÐÇð©Ðçð░ð¢ð░ game. ðóð¥ð▓ð░ ð¢ðÁ ð▓ð░ðÂð© ðÀð░ Phaser 3 ð© ð▓ðÁÐçðÁ ð¢ÐÅð╝ð░ ð¥Ðüð¥ð▒ðÁð¢ð░ ð┐ð¥ð╗ðÀð░ ð¥Ðé ðÀð░ð┐ð©Ðüð▓ð░ð¢ðÁÐéð¥ ð¢ð░ ð©ð¢ÐüÐéð░ð¢Ðåð©ÐÅÐéð░ ð▓ ð│ð╗ð¥ð▒ð░ð╗ð¢ð░ ð┐ÐÇð¥ð╝ðÁð¢ð╗ð©ð▓ð░.
ðíð▓ð¥ð╣ÐüÐéð▓ð¥Ðéð¥ type ð▓ ð║ð¥ð¢Ðäð©ð│ÐâÐÇð░Ðåð©ð¥ð¢ð¢ð©ÐÅ ð¥ð▒ðÁð║Ðé ð╝ð¥ðÂðÁ ð┤ð░ ð▒Ðèð┤ðÁ Phaser.CANVAS, Phaser.WEBGL ð©ð╗ð© Phaser.AUTO. ðÜð░ð║Ðéð¥ Ðüð┐ð¥ð╝ðÁð¢ð░Ðàð╝ðÁ ð┐ð¥-ð│ð¥ÐÇðÁ, Ðéð¥ð▓ð░ ðÁ ð¢ð░Ðçð©ð¢ÐèÐé, ð┐ð¥ ð║ð¥ð╣Ðéð¥ Phaser ð©ðÀð▓ðÁðÂð┤ð░ ð│ÐÇð░Ðäð©ð║ð©ÐéðÁ ð¢ð░ ð©ð│ÐÇð░Ðéð░ ð¢ð░ ðÁð║ÐÇð░ð¢ð░. ðƒÐÇðÁð┐ð¥ÐÇÐèÐçð©ÐéðÁð╗ð¢ð░Ðéð░ ÐüÐéð¥ð╣ð¢ð¥ÐüÐé ðÁ Phaser.AUTO, ð║ð¥ðÁÐéð¥ ð░ð▓Ðéð¥ð╝ð░Ðéð©Ðçð¢ð¥ ÐëðÁ ÐüðÁ ð¥ð┐ð©Ðéð░ ð┤ð░ ð©ðÀð┐ð¥ð╗ðÀð▓ð░ WebGL, ð░ð║ð¥ ð▒ÐÇð░ÐâðÀÐèÐÇÐèÐé ð© ÐâÐüÐéÐÇð¥ð╣ÐüÐéð▓ð¥Ðéð¥ ð│ð¥ ð┐ð¥ð┤ð┤ÐèÐÇðÂð░Ðé; ð▓ ð┐ÐÇð¥Ðéð©ð▓ðÁð¢ Ðüð╗ÐâÐçð░ð╣ ÐëðÁ ð▒Ðèð┤ðÁ ð©ðÀð┐ð¥ð╗ðÀð▓ð░ð¢ Canvas. ðóð░ð│ÐèÐé canvas, ÐüÐèðÀð┤ð░ð┤ðÁð¢ ð¥Ðé Phaser, ÐëðÁ ð▒Ðèð┤ðÁ ð┤ð¥ð▒ð░ð▓ðÁð¢ ð▓ ð┤ð¥ð║Ðâð╝ðÁð¢Ðéð░ Ðéð░ð╝, ð║Ðèð┤ðÁÐéð¥ ÐüðÁ ð¢ð░ð╝ð©ÐÇð░ ð║ð¥ð┤ÐèÐé, ð¢ð¥ ð╝ð¥ðÂðÁÐéðÁ ð© ð┤ð░ ð┐ð¥Ðüð¥Ðçð©ÐéðÁ ð┤ÐÇÐâð│ ðÁð╗ðÁð╝ðÁð¢Ðé (parent ð▓ ð║ð¥ð¢Ðäð©ð│ÐâÐÇð░Ðåð©ð¥ð¢ð¢ð©ÐÅ ð¥ð▒ðÁð║Ðé).
ðíð▓ð¥ð╣ÐüÐéð▓ð░Ðéð░ width ð© height ð¥ð┐ÐÇðÁð┤ðÁð╗ÐÅÐé ÐÇð░ðÀð╝ðÁÐÇð░ ð¢ð░ ð©ð│ÐÇð░Ðéð░, Ðé.ðÁ. ð¢ð░ Ðéð░ð│ð░ canvas, ÐüÐèðÀð┤ð░ð┤ðÁð¢ ð¥Ðé Phaser. ðÆ Ðéð¥ðÀð© Ðüð╗ÐâÐçð░ð╣, Ðéð¥ð▓ð░ ðÁ 800x600 ð┐ð©ð║ÐüðÁð╗ð░. ðíð▓ðÁÐéÐèÐé ð¢ð░ ð©ð│ÐÇð░Ðéð░ ð╝ð¥ðÂðÁ ð┤ð░ ðÁ Ðü ð▓ÐüÐÅð║ð░ð║Ðèð▓ ÐÇð░ðÀð╝ðÁÐÇ, ð¢ð¥ Ðüð░ð╝ð¥ Ðçð░ÐüÐé ð¥Ðé ð¢ðÁð│ð¥ ÐëðÁ ð▒Ðèð┤ðÁ ð▓ð©ð┤ð©ð╝ð░.
ðíð▓ð¥ð╣ÐüÐéð▓ð¥Ðéð¥ scene ð¢ð░ ð║ð¥ð¢Ðäð©ð│ÐâÐÇð░Ðåð©ð¥ð¢ð¢ð©ÐÅ ð¥ð▒ðÁð║Ðé ÐëðÁ ð▒Ðèð┤ðÁ ÐÇð░ðÀð│ð╗ðÁð┤ð░ð¢ð¥ ð┐ð¥-ð┐ð¥ð┤ÐÇð¥ð▒ð¢ð¥ ð┐ð¥-ð║ÐèÐüð¢ð¥ ð▓ Ðéð¥ðÀð© ÐâÐÇð¥ð║.