AI Summary
This video is a step-by-step guide for complete beginners without coding experience to design, develop, and publish a simple mobile game using free AI tools like ChatGPT and Leonardo AI. The entire process can be done from a mobile phone or low-end computer, culminating in publishing on Google Play or other platforms.
Chapters
The video promises to teach viewers how to design and publish a game without any coding experience, using only a smartphone or low-end computer and free tools. The focus is on simplicity and leveraging AI.
The creator emphasizes that a simple game idea is key to success for a first game, advising against copying complex games like PUBG or Free Fire. Examples include escape mazes, collecting coins under time limits, or Flappy Bird-style games.
ChatGPT is used to generate the HTML, CSS, and JavaScript code for the game. The user asks ChatGPT for a simple game similar to Super Mario, using the free version of ChatGPT.
CodePen is used as the platform to test and run the game directly in the browser without downloading any software. Users paste the HTML, CSS, and JavaScript code into the respective sections.
After the initial game is created, users return to ChatGPT with specific requests for improvements, such as adding movement in all directions, scoreboards, and visual effects on collision. Replacing old code with new code enhances the game.
Leonardo AI is used to generate professional-looking game art, including characters and backgrounds, without manual design. Users can create custom images and download them for use in the game.
Tools like remove.bg are used to remove backgrounds from images, and mgr.com is used to upload and obtain direct URLs for these images to later embed them into the game code.
Users return to ChatGPT, replacing the default character and background placeholders in the code with their custom images. Improvements like clear result display, visual effects, and Arabic font support are added.
The final code is organized into a project folder with three files: index.html, style.css, and script.js. The respective codes are copied into each file to prepare for packaging.
The game folder is compressed into a .zip file and uploaded to a website like tennis.io to convert it into a downloadable APK file for Android.
The APK is installed on a phone by enabling unknown sources. For Google Play publishing, a $25 one-time fee is required for a developer account. For iOS, a $100 annual developer account is needed.
If the user lacks a budget, games can be published for free on platforms like abkyourh.i, happy mode, or jingold. Sharing via social media and building an audience are also crucial for reach.
Encourages creating a YouTube channel, interacting with followers, and setting up donation links like Buy Me a Coffee. This step focuses on growing a public and monetizing beyond app store revenue.
Mentioned in this Video
Tutorial Checklist
💡 Key Takeaways
Focus on one idea
The creator stresses that success starts with a single, executable idea rather than being ambitious with scope, which is a common advice for new developers.
01:04Iterative AI prompt improvement
This technique shows how iterative prompting can add polish and features to a game, effectively turning AI output from basic to advanced through continued dialogue.
02:21AI-generated game art
Using AI to generate professional-looking characters and backgrounds without manual design is a breakthrough that democratizes game development for non-artists.
03:43AI-generated graphics integration
Directly embedding AI-generated images into the game via URLs shows a practical method to enhance the game's visual identity quickly.
04:57Publishing without a Mac
The video highlights the non-tool-specific nature of the process, noting iOS still requires a 0 cost but Apple inspects your app before listing.
06:30Full Transcript
[00:00] هل عندك فكرة لعبة بسيطة وممتعة وتستغل حتى على أضعف هاتف أو كمبيوتر وتحلم تنشرها على جوجل بلاي وتربح منها بس المشكلة ما عندك خبرة في البرمجة
[00:12] ولا همبيوتر قوي ولا حتى فلوت توظف مطور ولا يهمك في هذا الفيديو رح نعلمك خطوة بخطوة كيف تصمم لعبتك وتنشرها بالجراف وكل هذا من موبايلك أو كمبيوترك البعيس
[00:25] وبدون ما تكلم ولا سطر كود والأقوى اللعبة راح تكون جاهزة للنشر على بيجي الفلي وتربح منها بالإعلامات يلا نبدأ أول شي لازم تفهم أن بساطة الفكرة هي سر نجاح اللعبة الأولى لك
[00:39] يعني لا تحاول تقلد ألعاب معقدة مثل بيجي أو في فاير ركز على فكرة سهلة التنفيذ لكن ممتعة أمثلة بسيطة لألعاب ممكن تسويها شخصية تهرب من وحوش وتحاول توصل للنهاية
[00:52] لعبة تجمع فيها نجوم أو نقاط في وقت محدود لعبة تقوم بحقوق عقبات متتالية مثل فلابي بيرد سباق بسيط تحاول فيه تكسر رقمك القياسي فكر في جملة واحدة تلخص فكرتك
[01:04] مثل الشخصية تجمع النجوم وتتجنب الوحوش لتصل للنهاية نصيحة لا تضيع وقت كتير في الفكرة المهم تبدأ لان نجل السحر الحقيقي ما تحتاجه مبرمج ولا تحفظ اقواز
[01:18] كل اللي تحتاجه هو تستخدم ذكاء صناعي مثل شارجي بيتي وكوليوم انا راح استخدم شارج جي بي تي في هذا الفيديو لانه الاسهل حتى المسخة المجانية تكفي افتح التطبيق او الموقع واطلب منه كالتالي
[01:32] صمم لي لعبة شبيهة بسوبر ماريو باستخدام اتش تي ام ال و سي اس وجابا سكريبت راح يعطيك ثلاث اجزاء اتش تي ام ال شمع الهيكل العام للعبة سي اس اس شمع الالوان والتصميم
[01:45] جابا سكريبت شمع حركة الشخصية والتفاعل انسخ كل جزء واحتفظ فيه راح نستخدمه بعد شوي طيب الآن خلينا نشوف كيف نجرب اللعبة فعليا بدون لأن نزل برامج ولا شي
[01:57] code10 HTML DPT HTML GPT
[02:09] انسخ كود ال CSS وحطه في المربع الثاني انسخ كود ال JavaScript وحطه في الثالث ومباشرة ده رح تشغل اللعبة قدامك على نفس الصفحة أوكي وصلت اللعبة شغالة
[02:21] لكن غالبا بتكون بسيطة جدا مثلا الشخصية تتحرك بس يمين ويسار ما في مؤثرات التصميم عادي أو حتى ما في هدف واضح الحل ارجع لسات جي بي تي واطلب منه تحسينات محددة مثلا أضف حركة في جميع الاتجاهات
[02:35] لوحة قبز نتيجة معثيرات عند السقوط كل مرة تاخذ الكود الجديد وتبدل القديم على مرعى كود بين وهكذا مع الوقت لعبتك تصير احترافية أكثر
[02:47] أنت الآن خلصت من برمجة أساس اللعبة لكن شكلها لسه بسيط جدا ويمكن حتى ممل شوي عشان كذا في هذه الخطوة رح نستخدم الذكاء الاجتماعي علشان نخلي شكل اللعبة احترافي فعلا
[03:00] وكأنها من تصميم شركة ألعاب كبيرة أولا توليد صور الشخصيات والخلفية باستخدام ليوناردو اي اي ندخل على موقع ليوناردو اي اي رابط الموقع موجود في صندوق الوصف أو في التعليق المثبت
[03:14] نضغط على زر إنشاء صورة تلصق هذا الأمر في خانة التوليد هذا الأمر موجود أيضا في الوصف والتعليق المثبت نضغط على جر جينيريت ورح يطلع لنا مجموعة من الصور الاحترافية
[03:28] نختار الصورة اللي تعجبنا ونضغط على جر داونلود لتحميلها توليد الخلفية بنفس الطريقة نرجع لنفس الصفحة ونغير الأمر إلى نضغط جينيريت ونختار الخلفية اللي نحبها ثم نضغط داونلود
[03:43] الحين صار عندنا صورة شخصية احترافية خلفية جميلة كل هذا بدون ما نصمم يدويا ثانيا حذف الخلفية من الصورة لو احتجنا باستخدام موقع remove.bg
[03:55] ندخل على موقع remove.bg الرابط موجود في الوصف upload image download download mgr
[04:15] ندخل على موقع mgr.com الرابط طبعا في الوصف نضغط على زر new best أو upload نرفع صورة الشخصية أو الخلفية اللي عدلناها بعد ما ترفع راح يطلع لنا رابط مباشر للصورة
[04:28] نضغط على copy link أو نسخ الرابط نحتفظ بهذا الرابط لأنه راح نستخدمه في الكود علشان نعرض الصور داخل اللعبة الخطوة السابعة دمج الصور في اللعبة ارجع إلى chat.gpt وقل له استبدل صورة الشخصية في الكود بهذه الصورة
[04:45] ضع رابط صورة الشخصية التي نسختها استبدل صورة الخلفية بهذه الصورة ضع رابط صورة الخلفية التي نسختها أضف التحسينات التالية عرض النتيجة داخل اللعبة بشكل واضح
[04:57] مؤثرات بصرية جذابة تزيد من تفاعل اللعبة مثل تأثير عند الاصطدام أو عند جمع النقاب تحسين الخطوط لتصبح أنيقة وواضحة ومناسبة للغة العربية
[05:09] انسخ الكود الجديد وارجع إلى كود بين واستمتع بلعب احترافيا الخطوط الثامنة حفظ لعبتك على جهازك أولا انسق مجلدا جديدا وسمه لعبتي ثانيا داخل هذا المجلد انشئ ثلاثة ملفات
[05:24] الملف الأول index.html الملف الثاني style.css الملف الثالث script.javascript ثالثا انسخ الأكواد التي كتبتها
[05:36] انسخ كود HTML إلى ملف Index انسخ كود CSS إلى ملف Style انسخ كود JavaScript إلى ملف Script الخطوة التاسعة تحويل لعبتك إلى ملف مضغوط أولا
[05:49] اضغط مجلد اللعبة إلى ملف بصيغة zip ثانيا افتح موقع tennis.io ثالثا سجل دخولك بحساب جوجل الخاص بك رابعا ارفع ملف ال ZIP الذي انشأته
[06:03] خامسا انسخ الرابط الذي سيظهر لك IPK IPK
[06:18] رابعا ادخل بريدك الإلكتروني خامسا اضغط على متابعة ثم اضغط على تحميل الخطوة الحادية عشرة تحميل اللعبة وتثبيتها على هاتفك أولا قم بتحميل ملف IPK
[06:30] ثانيا من إعدادات هاتفك فعل خيار التثبيت من مصادر غير معروفة ثالثا افتح ملف اللعبة وقم بتثبيتها الخطوة الثانية عشران نشر لعبتك وللحلمان اذا كنت تريد رفعها على متجر جوجل بلاي
[06:44] اولا افتح حسابا في جوجل بلاي كونسول رسوم الاشتراك 25$ تدفع مرة واحدة فقط ثانيا ارفع ملف IDK ثالثا اضف اسم اللعبة وصور وشرحات
[06:58] رابعا اكتب وصفا مختصرا وجذابا للعبة إذا كنت تريد رفعها على مجرى آيفون ستحتاج إلى حساب مطور في أبل رسوم الاشتراك 100 دولار يجب أن يجتاز تصديقك فحص الجودة
[07:12] الخطوة الثالثة عشر نشر لعبتك مجانا إذا لم يكن لديك ميزانية يمكنك رفع لعبتك على منصات مجانية مثل abkyourh.i أو happy mode jingold
[07:24] الخطوة الرابعة عشر شارك لعبتك على وسائل التواصل انشئ فيديو بسيطا يشرح طريقة اللعب ثم شارك رابط اللعبة على تيليجرام واتساب وفيسبوك ولا تنسى استخدام هاشتاجات مناسبة
[07:37] الخطوة الخامسة عشر بناء جمهور خاص بك اضغط زر دعم في موقعك مثل باي مياكوفي انشئ قناة على يوتيوب وشارك ألعابك وتقدمك مع متابعينك
[07:50] كن دائما نشيطا وتفاعل مع جمهورك وفي الختام كان معكم ربا من قناة عالم التكنولوجيا مع ربا إذا أعجبك الشرح لا تنسى الإعجاب بالفيديو والاشتراك في القناة وتفعيل زر الجرس
[08:04] اكتب لنا تعليقا تحفيزيا وشارك الفيديو مع اصدقائك المهتمين بالبرمجة وتذكر المستقبل يبدأ بخطوة سلام