💠 🥂 🍺 गोलंग + फेसर 3 = MMORPG - क्लाइंट और सर्वर ⛩️ 🎼 🛌🏽

पिछले लेख में, हमने आपके साथ एक ब्लैंक बनाया है, इसलिए बोलने के लिए, जिस आधार पर हमारा ब्रह्मांड बनाया जाएगा, कंसोल का उपयोग करके विज़ुअलाइज़ेशन अच्छा लग सकता है, लेकिन पाठ वर्ण उबाऊ हैं और बहुत सुंदर नहीं हैं, इस लेख में हम अपनी टाइलों का उपयोग करके कल्पना करने पर ध्यान केंद्रित करेंगे Phaser.js

पिछले लेख में, हमारी परियोजना इस तरह दिखी :

अब हम वेब विकास के लिए अन्य उपकरणों का उपयोग करेंगे, मुझे आशा है कि आपके पास Node.js और npm स्थापित है, यदि नहीं, तो तत्काल इसे स्थापित करें। और इसलिए हम टर्मिनल खोलते हैं और शुरू करते हैं:

$ npm install phaser@3.22.0

टीम के सफल समापन पर, हमें निम्नलिखित देखना चाहिए:

+ phaser@3.22.0
added 15 packages from 48 contributors and audited 20 packages in 4.38s

तो ठीक है, मॉड्यूल दिखाई दिए, अब हम अपने ग्राहक के लिए एक निर्देशिका बनाएंगे

। सामग्री में हम खेल संसाधनों को स्टोर करेंगे, अर्थात। हमारा प्रेत। हम रूट डायरेक्टरी (जहाँ main.go file स्थित है) में दो फाइल game.js और MainScene.js भी बनायेंगे, index.html
game.js बनाएँ - गेम के लिए मुख्य सेटिंग्स को स्टोर करता है
MainScene.js - में मुख्य गेम सीन
index.html का वर्ग होगा। - वह पृष्ठ जहाँ दृश्य प्रस्तुत किया जाएगा,

तुरंत हमारी स्क्रिप्ट्स को index.html से जोड़ेंगे और हम अब इस फ़ाइल पर नहीं लौटेंगे:

    <script src="node_modules/phaser/dist/phaser.js" type="module"></script>
    <script src="Client/game.js" type="module"></script>

MainScene.js में हम अपने भविष्य के दृश्य के लिए एक छोटा वर्ग टेम्पलेट बनाएंगे:

export {MainScene}
class MainScene extends Phaser.Scene{
constructor() {
    super({key: 'MainScene'})
}
preload() {

}
create() {

}
update() {

}
}

Game.js में अपनी पसंद के अनुसार विशिष्ट सेटिंग्स जोड़ें, यहाँ मेरा हैं:

import {MainScene} from "./MainScene.js";
let config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    disableContextMenu: true,
    background: 'black',
    physics: {
        default: 'arcade',
        arcadePhysics: {
            overlapBias: 1
        }
    },
    scene:[MainScene],
    pixelArt: true,
    roundPixels: true,
    antialias: true

}
let game = new Phaser.Game(config);

अब हमें एक HTTP सर्वर की आवश्यकता है, वें पर यह कुछ लाइनों में किया जाता है। Main.go पर जाएं और एक सर्वर बनाएं:

package main

import (
	"fmt"
	"html/template"
	"net/http"
)

func main() {
	//     
	http.HandleFunc("/", indexHandler)
	//      (,   .)
	http.Handle("/node_modules/phaser/dist/", http.StripPrefix("/node_modules/phaser/dist/", http.FileServer(http.Dir("./node_modules/phaser/dist/"))))
	http.Handle("/Client/", http.StripPrefix("/Client/", http.FileServer(http.Dir("./Client/"))))
	http.Handle("/Client/Content/", http.StripPrefix("/Client/Content/", http.FileServer(http.Dir("./Client/Content/"))))
	//  .   ,   8080
	err := http.ListenAndServe(":8080", nil)
	if err != nil {
		fmt.Println(err.Error())
	}
}
//   index.html,      
func indexHandler(w http.ResponseWriter, r *http.Request) {
	fmt.Println("indexAction")
	t, _ := template.ParseFiles("index.html")
	err := t.Execute(w, "index")
	if err != nil {
		fmt.Println(err.Error())
	}
}

खैर, हमारा अपना वेब सर्वर और क्लाइंट है! चलो शुरू हो जाओ! कंसोल खोलें:

$ go run main.go

हम ब्राउज़र खोलते हैं और हमारे सर्वर से जुड़ने की कोशिश करते हैं, मेरे मामले में

लोकलहोस्ट: 8080

यदि आपने एक काली स्क्रीन देखी, तो आपने सब कुछ ठीक किया।

और इसलिए, चलिए एक और हैंडलर बनाते हैं जिसके द्वारा हम junk फॉर्मेट में अपना हिस्सा प्राप्त करेंगे। एक अलग निर्देशिका बनाएं और इसे गेमकंट्रोलर कहें, यहां हमारे पास गेम डेटा के साथ काम करने वाले सभी हैंडलर होंगे, फ़ाइल बनाएं Map_Controller.go

इसके अलावा हमें एक सुधार की आवश्यकता है

Chunk.go

package Chunk

import (
	"exampleMMO/PerlinNoise"
	"fmt"
)


var TILE_SIZE = 16
var CHUNK_SIZE = 16 * 16
var PERLIN_SEED float32 = 160

type Chunk struct {
	ChunkID [2]int `json:"chunkID"`
	Map     map[Coordinate]Tile `json:"map"`
}

/*
  
*/
type Tile struct {
	Key string `json:"key"`
	X   int    `json:"x"`
	Y   int    `json:"y"`
}

/*
    
*/
type Coordinate struct {
	X int `json:"x"`
	Y int `json:"y"`
}



/*
    ,      
 [1,1]
*/
func NewChunk(idChunk Coordinate) Chunk {
	fmt.Println("New Chank", idChunk)
	chunk := Chunk{ChunkID: [2]int{idChunk.X, idChunk.Y}}
	var chunkXMax, chunkYMax int
	var chunkMap map[Coordinate]Tile
	chunkMap = make(map[Coordinate]Tile)
	chunkXMax = idChunk.X * CHUNK_SIZE
	chunkYMax = idChunk.Y * CHUNK_SIZE

	switch {
	case chunkXMax < 0 && chunkYMax < 0:
		{
			for x := chunkXMax + CHUNK_SIZE; x > chunkXMax; x -= TILE_SIZE {
				for y := chunkYMax + CHUNK_SIZE; y > chunkYMax; y -= TILE_SIZE {

					posX := float32(x - (TILE_SIZE / 2))
					posY := float32(y + (TILE_SIZE / 2))
					tile := Tile{}
					tile.X = int(posX)
					tile.Y = int(posY)
					perlinValue := PerlinNoise.Noise(posX/PERLIN_SEED, posY/PERLIN_SEED)
					switch {
					case perlinValue < -0.01:
						tile.Key = "Water"
					case perlinValue >= -0.01 && perlinValue < 0:
						tile.Key = "Sand"
					case perlinValue >= 0 && perlinValue <= 0.5:
						tile.Key = "Ground"
					case perlinValue > 0.5:
						tile.Key = "Mount"
					}
					chunkMap[Coordinate{X: tile.X, Y: tile.Y}] = tile

				}
			}
		}
	case chunkXMax < 0:
		{
			for x := chunkXMax + CHUNK_SIZE; x > chunkXMax; x -= TILE_SIZE {
				for y := chunkYMax - CHUNK_SIZE; y < chunkYMax; y += TILE_SIZE {
					posX := float32(x - (TILE_SIZE / 2))
					posY := float32(y + (TILE_SIZE / 2))
					tile := Tile{}
					tile.X = int(posX)
					tile.Y = int(posY)
					perlinValue := PerlinNoise.Noise(posX/PERLIN_SEED, posY/PERLIN_SEED)
					switch {
					case perlinValue < -0.12:
						tile.Key = "Water"
					case perlinValue >= -0.12 && perlinValue <= 0.5:
						tile.Key = "Ground"
					case perlinValue > 0.5:
						tile.Key = "Mount"
					}
					chunkMap[Coordinate{X: tile.X, Y: tile.Y}] = tile
				}
			}
		}
	case chunkYMax < 0:
		{
			for x := chunkXMax - CHUNK_SIZE; x < chunkXMax; x += TILE_SIZE {
				for y := chunkYMax + CHUNK_SIZE; y > chunkYMax; y -= TILE_SIZE {
					posX := float32(x + (TILE_SIZE / 2))
					posY := float32(y - (TILE_SIZE / 2))
					tile := Tile{}
					tile.X = int(posX)
					tile.Y = int(posY)
					perlinValue := PerlinNoise.Noise(posX/PERLIN_SEED, posY/PERLIN_SEED)
					switch {
					case perlinValue < -0.12:
						tile.Key = "Water"
					case perlinValue >= -0.12 && perlinValue <= 0.5:
						tile.Key = "Ground"
					case perlinValue > 0.5:
						tile.Key = "Mount"
					}
					chunkMap[Coordinate{X: tile.X, Y: tile.Y}] = tile

				}
			}
		}
	default:
		{
			for x := chunkXMax - CHUNK_SIZE; x < chunkXMax; x += TILE_SIZE {
				for y := chunkYMax - CHUNK_SIZE; y < chunkYMax; y += TILE_SIZE {
					posX := float32(x + (TILE_SIZE / 2))
					posY := float32(y + (TILE_SIZE / 2))
					tile := Tile{}
					tile.X = int(posX)
					tile.Y = int(posY)
					perlinValue := PerlinNoise.Noise(posX/PERLIN_SEED, posY/PERLIN_SEED)
					switch {
					case perlinValue < -0.12:
						tile.Key = "Water"
					case perlinValue >= -0.12 && perlinValue <= 0.5:
						tile.Key = "Ground"
					case perlinValue > 0.5:
						tile.Key = "Mount"
					}
					chunkMap[Coordinate{X: tile.X, Y: tile.Y}] = tile

				}
			}
		}

	}
	chunk.Map = chunkMap
	return chunk
}

हमने अपनी संरचनाओं में सिर्फ json कुंजियाँ
जोड़ीं और चंक सृजन में थोड़ा सुधार किया। हम Map_Controller पर लौट आए,

package GameController

import (
	"encoding/json"
	"exampleMMO/Chunk"
	"fmt"
	"net/http"
)

func Map_Handler(w http.ResponseWriter, r *http.Request) {
			c:= Chunk.NewChunk(Chunk.Coordinate{1,1})
			 js, e :=json.Marshal(c)
			 if e!= nil {
			 	fmt.Println(e.Error())
			 }
			 fmt.Println(string(js))
}

और main.go में एक पंक्ति जोड़ें

	http.HandleFunc("/map", GameController.Map_Handler)

आइए सर्वर शुरू करने और लोकलहोस्ट जाने की कोशिश करें: 8080 / मैप।

टर्मिनल में आउटपुट:

New Chank {1 1}
json: unsupported type: map[Chunk.Coordinate]Chunk.Tile

हां, हम भूल गए कि गोलंग में, जब धारावाहिक बनाए जाते हैं, तो नक्शे की चाबियाँ एक तार होनी चाहिए। क्रमांकन के लिए, गो जाँच करें कि क्या प्रकार TextMarshaler इंटरफ़ेस से मेल खाता है, और इसके MarsTText () विधि को कॉल करता है, हमें बस हमारे Coordinate प्रकार के लिए MarshalText () विधि बनाने की आवश्यकता है। हम
Chunk .go पर वापस आते हैं और निम्नलिखित कोड जोड़ते हैं:

func (t Coordinate) MarshalText() ([]byte, error) {

	return []byte("[" + strconv.Itoa(t.X) + "," + strconv.Itoa(t.Y) + "]"), nil
}

आप अपने कार्यान्वयन को लिख सकते हैं, सबसे महत्वपूर्ण बात यह है कि यह विधि एक अद्वितीय स्ट्रिंग लौटाती है। हम क्लाइंट पर विखंडू को प्रबंधित करने के लिए इस कुंजी का उपयोग करेंगे, आइए अब जांचें कि हमारा नियंत्रक कैसे काम करता है, सर्वर को फिर से शुरू करें और कंसोल को आउटपुट देखें।

हां, सब कुछ ठीक है, चलो अब स्ट्रीम के लिए एक निष्कर्ष बनाते हैं, हमारे नियंत्रक के अंत में दो लाइनें जोड़ते हैं।


	w.Header().Set("Content-Type", "application/json")
	w.Write(js)

अभी के लिए, गोलंग के साथ समाप्त करें और क्लाइंट को वापस करें। हमें तीन शीर्षकों की आवश्यकता होगी, हालांकि वास्तव में हमारे पास उनमें से 4 हैं, लेकिन अभी के लिए हमारे पास तीन या दो हैं।

हमारी टाइलें सामग्री निर्देशिका में जोड़ें और MainScene.js के साथ काम करना शुरू करें, पहले परिणामों के लिए हमें कुछ कार्यों की आवश्यकता है:

class MainScene extends Phaser.Scene{
constructor() {
    super({key: 'MainScene'})

}
preload() {
    //     
    this.load.image("Ground", "Client/Content/sprGrass.png")
    this.load.image("Water", "Client/Content/sprWater1.png")
    this.load.image("Sand", "Client/Content/sprGrass.png")


}
create() {
    this.getGameMap()
}
update() {

}
//   
async getGameMap() {
    let res = await fetch("/map")
    let result = await res.json()    
    this.drawChunk(result.map)

}
//      
drawChunk(map) {
    for (let chunkKey in map) {
        this.add.image(map[chunkKey].x,map[chunkKey].y, map[chunkKey].key)
    }
}

}

सर्वर हमारे चंक को एक जोंस ऑब्जेक्ट के रूप में हमारे पास लौटाता है, आप ब्राउज़र कंसोल में इसकी संरचना को देख सकते हैं:

और इसलिए फेजर ने इसे ब्राउज़र में प्रदान किया:

हमने सर्वर और क्लाइंट के बीच सबसे सरल काम की जांच की, अगले में हम तुरंत 9 चंक्स खींचेंगे और नेविगेट करेंगे दुनिया के लिए। यहां लेख से सभी कोड और संसाधन देखें ।

गोलंग + फेसर 3 = MMORPG - क्लाइंट और सर्वर

More articles: