Home-theater-designers
2D వీడియో గేమ్‌లను రూపొందించడానికి ఫేజర్ ఒక ఫ్రేమ్‌వర్క్. ఇది గేమ్‌ని ప్రదర్శించడానికి HTML5 కాన్వాస్‌ని మరియు గేమ్‌ని అమలు చేయడానికి జావాస్క్రిప్ట్‌ని ఉపయోగిస్తుంది. వనిల్లా జావాస్క్రిప్ట్‌పై ఫేజర్‌ని ఉపయోగించడం వల్ల ప్రయోజనం ఏమిటంటే, గేమ్ గేమ్‌ల భౌతికశాస్త్రాన్ని పూర్తి చేసే విస్తృతమైన లైబ్రరీని కలిగి ఉంది.
ఫేజర్ అభివృద్ధి సమయాన్ని తగ్గిస్తుంది మరియు పనిని సులభతరం చేస్తుంది. ఫేజర్‌తో ప్రాథమిక ఆటను ఎలా సృష్టించాలో నేర్చుకుందాం.
ఫేజర్‌తో ఎందుకు అభివృద్ధి చేయాలి?
ఫేజర్ ఇతర విజువల్ ప్రోగ్రామింగ్ లాంగ్వేజ్‌ల మాదిరిగానే ప్రోగ్రామ్ లూప్డ్ అప్‌డేట్స్‌పై ఆధారపడి ఉంటుంది. ఫేజర్ మూడు ప్రధాన దశలను కలిగి ఉంది: ప్రీలోడ్, క్రియేట్ మరియు అప్‌డేట్.
ప్రీలోడ్‌లో, గేమ్ యొక్క ఆస్తులు అప్‌లోడ్ చేయబడతాయి మరియు గేమ్‌కు అందుబాటులో ఉంచబడతాయి.
సృష్టించు గేమ్ ప్రారంభించండి మరియు అన్ని ప్రారంభ ఆట అంశాలు. ఆట ప్రారంభించినప్పుడు ఆ ప్రతి ఫంక్షన్‌లు ఒకసారి అమలు చేయబడతాయి.
అప్‌డేట్, మరోవైపు, గేమ్ అంతటా లూప్‌లో నడుస్తుంది. ఇది గేమ్‌లోని అంశాలని ఇంటరాక్టివ్‌గా చేయడానికి అప్‌డేట్ చేసే వర్క్‌హార్స్.
ఫేజర్‌తో గేమ్‌లను అభివృద్ధి చేయడానికి మీ సిస్టమ్‌ని సెటప్ చేయండి
ఆ ఫేసర్ HTML మరియు జావాస్క్రిప్ట్ మీద నడుస్తున్నప్పటికీ, ఆటలు వాస్తవానికి సర్వర్ వైపు నడుస్తాయి, క్లయింట్ వైపు కాదు. దీని అర్థం మీరు మీ ఆటను అమలు చేయాలి మీ లోకల్ హోస్ట్ . గేమ్ సర్వర్-సైడ్‌ను అమలు చేయడం వల్ల మీ గేమ్ ప్రోగ్రామ్ వెలుపల అదనపు ఫైల్‌లు మరియు ఆస్తులను యాక్సెస్ చేయడానికి అనుమతిస్తుంది. నేను సిఫార్సు చేస్తాను లోకల్ హోస్ట్‌ను సెటప్ చేయడానికి XAMPP ని ఉపయోగిస్తోంది మీకు ఇప్పటికే ఒక సెటప్ లేకపోతే.
దిగువ కోడ్ మిమ్మల్ని అప్ మరియు రన్నింగ్ చేస్తుంది. ఇది ప్రాథమిక ఆట వాతావరణాన్ని ఏర్పాటు చేస్తుంది.
var config = {
type: Phaser.AUTO,
backgroundColor: 0xCCFFFF,
width: 600,
height: 600,
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create
}
};
var gamePiece;
var game = new Phaser.Game(config);
function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
}
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
}
ఆటను అమలు చేయడానికి, మీ లోకల్ హోస్ట్‌లోని 'img' ఫోల్డర్‌లో సేవ్ చేయబడిన 'గేమ్‌పీస్' అనే PNG చిత్రం అవసరం. సరళత కోసం, ఈ ఉదాహరణ 60xgame de60px నారింజ చతురస్రాన్ని ఉపయోగిస్తుంది. మీ ఆట ఇలా ఉండాలి:
మీకు సమస్య ఎదురైతే, మీ బ్రౌజర్ డీబగ్గర్‌ని ఉపయోగించి తప్పు ఏమి జరిగిందో తెలుసుకోండి. ఒక్క అక్షరాన్ని కూడా కోల్పోవడం వల్ల విధ్వంసం జరగవచ్చు, కానీ సాధారణంగా, మీ డీబగ్గర్ ఆ చిన్న లోపాలను పట్టుకుంటుంది.
సెటప్ కోడ్‌ను వివరిస్తోంది
ఇప్పటివరకు, గేమ్ ఏమీ చేయదు. కానీ మేము ఇప్పటికే చాలా భూమిని కవర్ చేసాము! కోడ్‌ని మరింత లోతుగా చూద్దాం.
ఫేజర్ గేమ్ అమలు చేయడానికి, మీరు ఫేజర్ లైబ్రరీని దిగుమతి చేసుకోవాలి. మేము దీనిని లైన్ 3 లో చేస్తాము. ఈ ఉదాహరణలో, మేము సోర్స్ కోడ్‌కి లింక్ చేసాము, కానీ మీరు దానిని మీ లోకల్ హోస్ట్‌కు డౌన్‌లోడ్ చేసుకోవచ్చు మరియు ఫైల్‌ను కూడా రిఫరెన్స్ చేయవచ్చు.
స్పొటిఫై ప్లేజాబితాను ఎలా నకిలీ చేయాలి
ఇప్పటివరకు చాలా కోడ్ గేమ్ వాతావరణాన్ని కాన్ఫిగర్ చేస్తుంది, ఇది వేరియబుల్ config దుకాణాలు. మా ఉదాహరణలో, మేము 600px ద్వారా 600px నీలం (హెక్స్ కలర్ కోడ్‌లో CCFFFF) నేపథ్యంతో ఫేజర్ గేమ్‌ను ఏర్పాటు చేస్తున్నాము. ప్రస్తుతానికి, గేమ్ ఫిజిక్స్ సెట్ చేయబడింది ఆర్కేడియన్ , కానీ ఫేజర్ విభిన్న భౌతికశాస్త్రాన్ని అందిస్తుంది.
చివరగా, దృశ్యం కార్యక్రమం అమలు చేయడానికి చెబుతుంది ప్రీలోడ్ ఆట మొదలయ్యే ముందు ఫంక్షన్ మరియు సృష్టించు ఆట ప్రారంభించడానికి ఫంక్షన్. ఈ సమాచారం మొత్తం గేమ్ ఆబ్జెక్ట్‌కు పంపబడుతుంది ఆట .
సంబంధిత: ప్రోగ్రామింగ్ మరియు కోడింగ్ కోసం 6 ఉత్తమ ల్యాప్‌టాప్‌లు
కోడ్ యొక్క తదుపరి విభాగం ఆట నిజంగా ఆకృతిని పొందుతుంది. ప్రీలోడ్ ఫంక్షన్ అంటే మీరు మీ గేమ్‌ని అమలు చేయడానికి అవసరమైన దేనినైనా ప్రారంభించాలనుకుంటున్నారు. మా విషయంలో, మేము మా ఆట ముక్క యొక్క చిత్రాన్ని ముందే లోడ్ చేసాము. యొక్క మొదటి పరామితి .చిత్రం మా ఇమేజ్‌కి పేర్లు పెట్టండి మరియు రెండవది ఇమేజ్ ఎక్కడ దొరుకుతుందో ప్రోగ్రామ్‌కు తెలియజేస్తుంది.
గేమ్‌పీస్ ఇమేజ్ క్రియేట్ ఫంక్షన్‌లో గేమ్‌కు జోడించబడింది. 29 వ గేమ్ స్పైట్‌గా ఇమేజ్ గేమ్‌పీస్‌ని 270px ఎడమవైపు మరియు 450px దిగువన మా గేమ్ ప్రాంతం యొక్క ఎగువ ఎడమ మూలలో నుండి జోడిస్తున్నామని లైన్ 29 చెబుతోంది.
మా గేమ్ పీస్ మూవ్ మేకింగ్
ఇప్పటివరకు, దీనిని ఆట అని పిలవలేము. ఒక విషయం కోసం, మేము మా ఆట భాగాన్ని తరలించలేము. మా ఆటలో విషయాలను మార్చడానికి, మేము ఒక అప్‌డేట్ ఫంక్షన్‌ను జోడించాల్సి ఉంటుంది. మేము గేమ్‌ని అప్‌డేట్ చేసినప్పుడు ఏ ఫంక్షన్‌ని అమలు చేయాలో గేమ్‌కి చెప్పడానికి కాన్ఫిగర్ వేరియబుల్‌లోని సీన్‌ను కూడా మేము సర్దుబాటు చేయాలి.
అప్‌డేట్ ఫంక్షన్‌ను జోడిస్తోంది
కాన్ఫిగరేషన్‌లో కొత్త సన్నివేశం:
scene: {
preload: preload,
create: create,
update: update
}తరువాత, క్రియేట్ ఫంక్షన్ క్రింద అప్‌డేట్ ఫంక్షన్‌ను జోడించండి:
కంప్యూటర్ వైఫైకి కనెక్ట్ చేయబడదు
function update(){
}కీ ఇన్‌పుట్‌లను పొందడం
ప్లేయర్ బాణం కీలతో గేమ్ భాగాన్ని నియంత్రించడానికి, ప్లేయర్ ఏ కీలను నొక్కుతున్నారో ట్రాక్ చేయడానికి మేము వేరియబుల్‌ను జోడించాల్సి ఉంటుంది. మేము గేమ్‌పీస్‌లను ప్రకటించిన దిగువ కీఇన్‌పుట్‌లు అనే వేరియబుల్‌ని ప్రకటించండి. అక్కడ ప్రకటించడం వలన అన్ని ఫంక్షన్‌లు కొత్త వేరియబుల్‌ని యాక్సెస్ చేస్తాయి.
var gamePiece;
var keyInputs;క్రియేట్ ఫంక్షన్‌లో గేమ్ సృష్టించబడినప్పుడు కీఇన్‌పుట్ వేరియబుల్ ప్రారంభించాలి.
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
}ఇప్పుడు అప్‌డేట్ ఫంక్షన్‌లో, ప్లేయర్ బాణం కీని నొక్కినట్లయితే మనం తనిఖీ చేయవచ్చు మరియు అవి ఉంటే, దానికి తగినట్లుగా మా గేమ్ భాగాన్ని తరలించండి. దిగువ ఉదాహరణలో, గేమ్ ముక్క 2px తరలించబడింది, కానీ మీరు దాన్ని పెద్ద లేదా చిన్న సంఖ్యగా చేయవచ్చు. ముక్కను 1px ఒకేసారి తరలించడం కొంచెం నెమ్మదిగా అనిపించింది.
function update(){
if(keyInputs.left.isDown){
gamePiece.x = gamePiece.x - 2;
}
if(keyInputs.right.isDown){
gamePiece.x = gamePiece.x + 2;
}
if(keyInputs.up.isDown){
gamePiece.y = gamePiece.y - 2;
}
if(keyInputs.down.isDown){
gamePiece.y = gamePiece.y + 2;
}
}గేమ్ ఇప్పుడు కదిలే పాత్రను కలిగి ఉంది! కానీ నిజంగా ఆటగా ఉండాలంటే, మనకు లక్ష్యం కావాలి. కొన్ని అడ్డంకులను జోడిద్దాం. 8-బిట్ యుగంలో చాలా ఆటలకు డాడ్జింగ్ అడ్డంకులు ఆధారం.
ఆటకు అడ్డంకులను జోడిస్తోంది
ఈ కోడ్ ఉదాహరణ అడ్డంకి 1 మరియు అడ్డంకి అని పిలువబడే రెండు అడ్డంకి స్ప్రిట్‌లను ఉపయోగిస్తుంది. అడ్డంకి 1 నీలిరంగు చతురస్రం మరియు అడ్డంకి 2 ఆకుపచ్చగా ఉంటుంది. గేమ్‌పీస్ స్ప్రైట్ లాగానే ప్రతి ఇమేజ్‌ను ప్రీలోడ్ చేయాలి.
function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
this.load.image('obstacle1', 'img/obstacle1.png');
this.load.image('obstacle2', 'img/obstacle2.png');
}గేమ్‌పీస్ లాగానే క్రియేట్ ఫంక్షన్‌లో ప్రతి అడ్డంకి స్ప్రైట్‌ను ప్రారంభించాలి.
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
obstacle1 = this.physics.add.sprite(200, 0, 'obstacle1');
obstacle2 = this.physics.add.sprite(0, 200, 'obstacle2');
}అడ్డంకులను తరలించడం
ఈసారి ముక్కలను తరలించడానికి, మేము ప్లేయర్ ఇన్‌పుట్‌ను ఉపయోగించాలనుకోవడం లేదు. బదులుగా, ఒక ముక్క పై నుండి క్రిందికి మరియు మరొకటి ఎడమ నుండి కుడికి తరలించనివ్వండి. అలా చేయడానికి, అప్‌డేట్ ఫంక్షన్‌కు కింది కోడ్‌ని జోడించండి:
obstacle1.y = obstacle1.y + 4;
if(obstacle1.y > 600){
obstacle1.y = 0;
obstacle1.x = Phaser.Math.Between(0, 600);
}
obstacle2.x = obstacle2.x + 4;
if(obstacle2.x > 600){
obstacle2.x = 0;
obstacle2.y = Phaser.Math.Between(0, 600);
}పైన ఉన్న కోడ్ అడ్డంకిని 1 స్క్రీన్‌పైకి మరియు అడ్డంకి 2 ను గేమ్ ఫ్రేమ్ 4px ప్రతి ఫ్రేమ్‌లోనికి తరలిస్తుంది. ఒక చదరపు స్క్రీన్ ఆఫ్ అయిన తర్వాత, అది కొత్త యాదృచ్ఛిక ప్రదేశంలో ఎదురుగా తిరిగి తరలించబడుతుంది. ఇది ఆటగాడికి ఎల్లప్పుడూ కొత్త అడ్డంకి ఉండేలా చేస్తుంది.
ఘర్షణలను గుర్తించడం
కానీ మేము ఇంకా పూర్తి చేయలేదు. మా ప్లేయర్ అడ్డంకులను దాటగలడని మీరు గమనించి ఉండవచ్చు. ఆటగాడు అడ్డంకిని తాకినప్పుడు ఆటను గుర్తించి, ఆటను ముగించాలి.
ఫేజర్ ఫిజిక్స్ లైబ్రరీలో కొలైడర్ డిటెక్టర్ ఉంది. మనం చేయాల్సిందల్లా క్రియేట్ ఫంక్షన్‌లో దీన్ని ప్రారంభించడం.
this.physics.add.collider(gamePiece, obstacle1, function(gamePiece, obstacle1){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});
this.physics.add.collider(gamePiece, obstacle2, function(gamePiece, obstacle2){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});కొల్లైడర్ పద్ధతికి మూడు పారామితులు అవసరం. మొదటి రెండు పారామితులు ఏ వస్తువులు ఢీకొంటున్నాయో గుర్తిస్తాయి. కాబట్టి పైన, మేము రెండు కొలిడర్‌లను ఏర్పాటు చేసాము. గేమ్‌పీస్ అడ్డంకి 1 తో ఢీకొన్నప్పుడు మొదటిది గుర్తించబడుతుంది మరియు రెండవ కొలైడర్ గేమ్‌పీస్ మరియు అడ్డంకి 2 మధ్య ఘర్షణల కోసం చూస్తోంది.
ఢీకొన్న విషయాన్ని గుర్తించిన తర్వాత ఏమి చేయాలో మూడో పరామితి కొలిడర్‌కి చెబుతుంది. ఈ ఉదాహరణలో, ఒక ఫంక్షన్ ఉంది. ఒక తాకిడి ఉంటే, అన్ని ఆట అంశాలు నాశనం చేయబడతాయి; ఇది ఆటను నిలిపివేస్తుంది. వారు అడ్డంకిని తాకితే ఇప్పుడు ఆటగాడు గేమ్ ఓవర్ అవుతాడు.
గేమ్ డెవలప్‌మెంట్‌ను ఫేజర్‌తో ప్రయత్నించండి
ఈ గేమ్ మెరుగుపరచడానికి మరియు మరింత క్లిష్టంగా చేయడానికి అనేక మార్గాలు ఉన్నాయి. మేము ఒక ప్లేయర్‌ని మాత్రమే సృష్టించాము, కానీ 'awsd' కంట్రోల్‌లతో రెండో ప్లే చేయగల క్యారెక్టర్‌ను జోడించవచ్చు మరియు నియంత్రించవచ్చు. అదేవిధంగా, మీరు మరిన్ని అడ్డంకులను జోడించడం మరియు వాటి కదలిక వేగాన్ని మార్చడంతో ప్రయోగాలు చేయవచ్చు.
టెక్స్ట్ సాఫ్ట్‌వేర్‌కు ఉత్తమ ఉచిత ప్రసంగం
ఈ పరిచయం మిమ్మల్ని ప్రారంభిస్తుంది, కానీ నేర్చుకోవడానికి ఇంకా చాలా మిగిలి ఉంది. ఫేజర్‌లోని గొప్ప విషయం ఏమిటంటే, గేమ్ ఫిజిక్స్ చాలా వరకు మీ కోసం చేయబడ్డాయి. 2D గేమ్‌లను డిజైన్ చేయడం ప్రారంభించడానికి ఇది గొప్ప సులభమైన మార్గం. ఈ కోడ్‌ని రూపొందించడం కొనసాగించండి మరియు మీ గేమ్‌ను మెరుగుపరచండి.
మీరు ఏవైనా లోపాలను ఎదుర్కొంటే, మీ బ్రౌజర్ డీబగ్గర్ సమస్యను కనుగొనడానికి గొప్ప మార్గం.
షేర్ చేయండి షేర్ చేయండి ట్వీట్ ఇమెయిల్ వెబ్‌సైట్ సమస్యలను పరిష్కరించడానికి Chrome DevTools ని ఎలా ఉపయోగించాలిమీ వెబ్‌సైట్‌లను మెరుగుపరచడానికి Chrome బ్రౌజర్ అంతర్నిర్మిత అభివృద్ధి సాధనాలను ఎలా ఉపయోగించాలో తెలుసుకోండి.
తదుపరి చదవండి సంబంధిత అంశాలు- ప్రోగ్రామింగ్
- జావాస్క్రిప్ట్
- HTML5
- గేమ్ అభివృద్ధి
J. సీటన్ ఒక సైన్స్ రైటర్, ఇది సంక్లిష్ట అంశాలను విచ్ఛిన్నం చేయడంలో ప్రత్యేకత కలిగి ఉంది. ఆమె సస్కట్చేవాన్ విశ్వవిద్యాలయం నుండి PhD కలిగి ఉంది; ఆమె పరిశోధన ఆన్‌లైన్‌లో విద్యార్థుల నిశ్చితార్థాన్ని పెంచడానికి ఆట ఆధారిత అభ్యాసాన్ని ఉపయోగించడంపై దృష్టి పెట్టింది. ఆమె పని చేయనప్పుడు, ఆమె చదవడం, వీడియో గేమ్‌లు ఆడటం లేదా తోటపనితో మీరు ఆమెను కనుగొంటారు.
జెన్నిఫర్ సీటన్ నుండి మరిన్నిమా వార్తాలేఖకు సభ్యత్వాన్ని పొందండి
టెక్ చిట్కాలు, సమీక్షలు, ఉచిత ఈబుక్‌లు మరియు ప్రత్యేకమైన డీల్స్ కోసం మా వార్తాలేఖలో చేరండి!
సభ్యత్వం పొందడానికి ఇక్కడ క్లిక్ చేయండి