موتور بازی با هوش مصنوعی✨ قسمت 2 – DALL E Sprites

هی، توسعه دهندگان! 🖐🎮
امیدوارم همه شما روز خوبی داشته باشید! من چند به روز رسانی جالب در helicity.ai دارم
پشتیبانی داخلی DALL E
من پشتیبانی DALL-E را یکپارچه کرده ام! 🎨🖌️ بله، پس از این به بعد، می توانید URL sprite خود را به صورت “جستجو: برخی توضیحات”و Helicity.ai با استفاده از DALL-E یک اسپرایت منحصربفرد برای شما در حال پرواز ایجاد می کند. بدون نیاز به ترک IDE، تصاویر منحصر به فرد و سفارشی ایجاد کنید.
چطور درستش کردم
- بنابراین همه چیز در Gameobject.js مدول. هر زمان که یک نمونه جدید از GameObject می سازید، این کد اجرا می شود
- وقتی قرار دادی رشته “lookup:”. در منبع تصویر شما، این را به عنوان یک درخواست در نظر می گیرد و یک تابع firebase ساخته شده در Express را فراخوانی می کند
- تابع firebase DALL E API را فراخوانی می کند که رشته را دنبال می کند “جستجو:” و به صورت ناهمزمان image-url را برمی گرداند، این به شی بازی بازگردانده می شود.
- تصویر شی بازی در هر فریم با استفاده از * ترسیم می شودارائه دادن() *(به طور خودکار در حلقه بازی) یا در غیر این صورت، فقط یک جعبه سیاه است
- SadImages اطمینان حاصل می کند که اگر 2 شی بازی با توضیحات جستجوی یکسان ایجاد شوند، چندین فراخوانی برای dall e ساخته نمی شوند. به عنوان مثال لوله در فلپی پرنده.
Gameobject.js
var savedImages = {};
export class GameObject {
constructor(x, y, width, height, type, imageSrc) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.type = type; // can be Used for collision detection
this.image = new Image();
this.image.loaded = false;
//check if imagesrc contains the string lookup:
if (imageSrc.includes("lookup:")) {
//check if the image is already saved
if (savedImages[imageSrc]) {
this.image = savedImages[imageSrc];
this.image.loaded = true;
} else {
//make a post request. this is in html to use XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.open(
"POST",
"https://us-central1-myaigameengine.cloudfunctions.net/api/Image",
true
);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(
JSON.stringify({
userPrompt: imageSrc.split("lookup:")[1],
})
);
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
//console.log(xhr.responseText);
//get the imageURL from the response
var imageURL = JSON.parse(xhr.responseText).image_url;
this.image = new Image();
this.image.src = imageURL;
this.image.onload = () => {
this.image.loaded = true;
//save the image
savedImages[imageSrc] = this.image;
};
this.image.onerror = () => {
console.error(`Error loading image ${this.imageSrc}`);
};
}
};
}
} else {
this.imageSrc = imageSrc;
this.image = new Image();
this.image.src = imageSrc;
this.image.onerror = () => {
console.error(`Error loading image ${this.imageSrc}`);
};
this.image.onload = () => {
this.image.loaded = true;
};
}
Game.addGameObject(this);
}
update(deltaTime) {
// Overridden by child classes
}
render() {
//draw a black rectangle if there isnt an image else draw it
if (this.image.loaded) {
Renderer.drawImage(this.image, this.x, this.y, this.width, this.height);
} else {
Renderer.context.fillStyle = "black";
Renderer.context.fillRect(this.x, this.y, this.width, this.height);
}
}
}
نقطه پایانی تصویر اکسپرس تابع Firebase
app.post("/Image", async (req, res) => {
//var uuid = req.body.uuid;
var userPrompt = req.body.userPrompt;
//console.log("uuid is " + uuid);
console.log("user prompt is ");
openai
.createImage({
prompt: userPrompt,
n: 1,
size: "256x256",
})
.then((result) => {
image_url = result.data.data[0].url;
console.log(image_url);
res.send({
success: true,
image_url: image_url,
});
});
});
خودشه!
در مورد آن فکر کنید – نیاز به یک جن از “اژدهای بنفش با کلاه بالا؟” 🐉🎩 فقط جستجو را تایپ کنید: اژدهای بنفش با کلاه بالا و voila، جن شخصی شما آماده استفاده در بازی شما است! ساده است! 🎲🚀
پشتیبانی چند نفره به زودی ارائه می شود!
اگر میخواهید در مورد توسعه صحبت کنید و در آن شرکت کنید، من را به اختلاف برسانید!
https://discord.com/invite/H4HkgFmqVp
با ما همراه باشید برای مطالب بیشتر! کد نویسی مبارک 🎮💖