node-webkit با استفاده از exe خروجی گرفتن

1

Tagged

Stats

4,416 visits, 4,843 views

Tools

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 11 Jul, 2013. Last updated 25 Feb, 2019

مقدّمه

به دلیل مشکل در تراز متن از راست به چپ این آموزش را از اینجا بخوانید یا از اینجا دانلود کنید

سلام. ما در این آموزش نحوه‌ی تبدیل بازی‌های HTML5 رو به فرمت exe همراه با بعضی ویژگی‌ها مثل تمام صفحه شدن بازی و ... یاد می‌گیریم.

بیاین شروع کنیم

ابتدا فایل‌های لازم برای این آموزش رو از لینک زیر دانلود کنید

برای ویندوز Node-Webkit

بعد از تموم شدن دانلود، فایل‌ها رو از حالت فشرده خارج کنید. حالا یه پوشه به اسم app بسازید و اون فایل‌ها رو توش کپی کنید. حالا می‌ریم سراغ تنظیماتش.

خروجی گرفتن پروژه

بازی خودتونو خروجی HTML5 بگیرین و توی یه پوشه‌ی خالی ذخیره‌ش کنید.

package.json

برای تبدیل درست و حسابی بازی به exe نیاز به فایلی دارین که بهش package.json گفته می‌شه. این فایل برای Node-Webkit مشخّص می‌کنه که برنامه یا بازی ما رو چه طوری اجرا کنه و چه طوری رفتار کنه. Package.json باید به فرمت .json باشه. برای ساختنش هم فقط به notepad احتیاج دارین. پس notepad رو باز کنید و چیزایی رو که گفته می‌شه توش بنویسید.

کمترین چیزهایی که باید توی package.json نوشته بشه از این قراره:

     "main": "index.html", 

این مشخّص می‌کنه که موقع اجرای Node-Webkit چه فایلی قراره باز بشه.

    "name": "SpaceBlaster"

این یکی اسم پکیج رو مشخّص می‌کنه. این اسم باید منحصر به فرد باشه و توش فقط حروف الفبای انگلیسی و اعداد به کار رفته باشن و Space هم نداشته باشه، البتّه اشکالی نداره که این اسم شامل "_" یا "-" یا "." هم باشه. داده‌های بازی در یک دایرکتوری با همین اسم نگهداری می‌شن.

به خاطر این‌که یک package.json خوب داشته باشیم، چند تا چیز دیگه رو هم اضافه می‌کنیم:

      "description": "Space Blaster exe export",

این توضیحی کوتاه در مورد پکیج شماست. به طور قراردادی، اوّلین جمله (قبل از اوّلین نقطه) تیتر پکیج شما حساب می‌شود.

      "version": "0.1",

نسخه‌ی بازی شما رو مشخّص می‌کنه.

    "keywords": [ "Construct 2", "node-webkit", "Space Blaster" ],

اینا هم کلمه‌های کلیدی بازی شما هستند.

در زیر بعضی چیزهای دیگه که بهتره اضافه کنید هم نوشته شده:

      "window": {
        "icon": "logo.png",
        "toolbar": false,
        "position": "center",
        "resizable": true
       }


پکیج نهایی ما باید شبیه این شده باشه:

    {
      "main": "index.html",
      "name": "SpaceBlaster",
      "keywords": [ "Construct 2", "node-webkit", "Space Blaster" ],
      "version": "0.1",
      "keywords": [ "demo", "node-webkit" ],
      "window": {
        "icon": "logo.png",
        "toolbar": false,
        "position": "center",
        "resizable": true
       }
    }

حالا فایل رو در کنار بقیّه‌ی فایل‌های بازی‌تون Save کنید و موقع Save کردن اسم فایل رو package.json بذارین.

فشرده کردن و تغییر نام

حالا همه‌ی فایل‌های بازی و package.json رو انتخاب کنید، بعد کلیک راست کنید و از Send to گزینه‌ی Compressed (zipped) folder رو انتخاب کنید تا یه فایل فشرده‌ی zip داشته باشیم. اسم این فایل رو app.zip می‌ذاریم. حالا باید app.zip رو به app.nw تغییر اسم بدیم.

چون به طور پیش‌فرض پسوند فایل‌ها مخفی می‌شود و نشان داده نمی‌شود وارد Control Panel می‌شویم، Folder Options رو باز می‌کنیم. از زبانه‌ی View تیک گزینه‌ی Hide extensions for known file types رو برمی‌داریم. حالا پسوندها نشون داده می‌شن و می‌تونیم app.zip رو به app.nw تغییر نام بدیم. موقع تغییر نام اگه با هشدار زیر مواجه شدید روی Yes کلیک کنید.

بعد از تغییر نام، فایل جدید (app.nw) رو توی پوشه‌ی app کپی کنید.

نکته: اگه می‌خواین همین الآن بازی‌تونو قبل از تبدیل به exe امتحان کنید کافیه که فایل app.nw رو بکشید توی nw.exe که داخل پوشه‌ی app هست.

تبدیل به exe توسّط Command Promt

برنامه‌ی Command Promt رو باز می‌کنیم. (برای این کار روی استارت کلیک کنید و بعد کنار ذرّه بین کلمه‌ی cmd رو تایپ کنید تا پیداش کنید)

حالا عبارت زیر رو توش تایپ می‌کنیم و در آخر هر خط Enter می‌زنیم:

cd path/to/NodeWebkit/folder

cd App

در عبارت بالا به جای path/to/NodeWebkit/folder مسیر پوشه‌ای رو بنویسین که پوشه‌ی app توی اون هست. بعد از نوشتن این‌ها داخل پوشه‌ app هستید. پس این عبارت رو تایپ کنید و Enter بزنید:

    copy /b nw.exe+app.nw app.exe

این کار باعث ادغام شدن دو فایل nw.exe و app.nw در یک فایل جدید به اسم app.exe می‌شه.

تبریک می‌گم! شما تونستید یه بازی HTML5 رو با استفاده از Node-Webkit با موفّقیّت به فرمت exe تبدیل کنید.

حذف فایل‌های اضافی

حالا دو تا فایل اضافی nw.exe و app.nw رو حذف کنید، چون فایل app.exe کار هر دوشون رو با هم انجام می‌ده.

حالا باید پوشه‌ی app شبیه این شده باشه:

نتیجه‌ی نهایی

منابع و اطّلاعات اضافی

اگه "Fullscreen in browser" فعّاله اونو تنظیم کنید به "off" بعد فایل index.html رو باز کنید و دنبال عبارت زیر بگردید توش

     <script>
     // Issue a warning if trying to preview an exported project on disk.
     (function(){
          // Check for running exported on file protocol
          if (window.location.protocol.substr(0, 4) === "file")
          {
               alert("Exported games won't work until you upload them.");
          }
     })();
     </script>

حالا این قسمت رو پاک کنید تا موقع اجرای بازی با ارور مواجه نشید.

درحال حاضر سه پلاگین برای کار با NodeWebkit وجود دارد:

Node-webkit GUI plugin

node-webkit node.js OS plugin

Node-webkit Node.js PATH plugin

  • 0 Comments

Want to leave a comment? Login or Register an account!