برمجة الألعاب والجرافكس باستخدام مكتبة OpenGL .

مقدمة مملة ..
OpenGL ..
لا أعلم لما أعشق تلك المكتبة وافضلها على Directx . أولا وكما الحال مع
اي شاب طموح ( او حالم) كنت ارغب في تعلم برمجة الألعاب فكنت ابحث عن لغة
برمجة (سهلة) وتلبي رغباتي في بناء حلم طفولتي بإنتاج لعبة ذات مستوى عالي
( فاينل فانتسي مثلا )  .. اتجهت إلى الفيجوال بيسيك visual basic
ولكن
رأيتها لغة هشة .. بسيطة .. لاتصلح للمشاريع الكبيرة فاتجهت الى c++ ..
بحثت عن دروسها كثيرا ولكن دائما ماكنت اصاب باحباط عند البرنامج الأزلي
لكل لغة برمجة Hello world .. لا أعلم لماذا يراودني احساس بان هذا
البرنامج بالذات هو مصدر كل احباط لكل مبرمج برغب في تعلم لغة معينة

رأيت
بأن لغة كال C++ اذا احتجت لاتقانها لصنع لعبة ما قد يستغرق سنوات عديدة
يشيب بها رأسي ويذهب قبلها حماسي فتركتها و انا اجر اذيال الخيبة .. في
تلك الفترة سمعت كثيرا عن Directx وكيف ان الكثير من الألعاب وبرامج
المالتي ميديا قد صنعت بها او بمساعدتها فتوجهت الى DirectX .. قمت بتنزيل
الكثير من الكتب لتلك المكتبة كما قمت بشراء كتاب باللغة العربية يشرح
DirectX .. لا أعرف لماذا لم اهضم تلك المكتبة ( ربما لان شرح الكتاب لم
يكن جيدا) فلم أفهم منها شيئا .. بعد ان رأيت انني لا انفع للعلم
فكرت جديا بترك البرمجة والاتجاه لاي مجال آخر .. تركت البحث لمدة سنة
تقريبا وفي الفترة الاخيرة انتقلت الى نظام التشغيل لينكس linux ومن هناك
تعرفت على OpenGL وعند البحث والتقصي وجدت لها عدة تطبيقات مذهلة ( ومنها
ماسأقوم بشرحه بالدروس القادمة ) ولكن ما أحزنني هو عدم وجود دروس عربية
لتلك المكتبة أو ربما يوجد ولكني لم أستطع الوصول اليها ، فقلت لنفسي لم
لا أقوم بوضع دروس وترجمة دروس إلى اللغة العربية بما انها تفتقر الى تلك
الدروس .. فتلك المكتبة سهلة الفهم وبسيطة في اوامرها عظيمة في عملها كما
انني وللمرة الاولى استطعت فهم شيئا عن البرمجة .. نخيلوا ؟

عند
رؤيتي للدروس العربية بأي مجال كان ، تواجهني مشكلة في بعض المفردات
المعربة .. فغالبا كنت لا افهم مايدور بسبب الترجمة الحرفية لمفردات معينة
والتي تشتت الذهن وتضيع المعنى .. وكنت ارجع مضطرا الى البحث عن المعنى
الانجليزي لتلك الكلمة لفهم الفكرة او الجملة .. لذا أثناء الدروس التي
سأقوم بكتابتها او ترجمتها سوف اقوم بكتابة المفردات او الكلمات باللغة
الانجليزية مع كتابة شرحها او عملها باللغة العربية .. إلى هنا تنتهي تلك
المقدمة المملة .

درس طويل ..

هنا
نبدأ بأول خطوة لنا مع OpenGL وهي أطول خطوة لنا في سلسلة دروسنا .. قد
يكون الدرس طويل قليلا فسوف نقووم بكتابة كود ( طويل عريض ) من أجل انشاء
نافذة فارغة .. أرى البعض قد بدأ يتذمر ..
قد يتسائل البعض ولما النافذة الفارغة ؟ نريد الدخول في برمجة الألعاب .. حسنا دعوني أشرح قليلا ..
ماسنقوم
بإنشاءه الان هو الركيزة الاساسية لكل برنامج OpenGL ، فكل الدروس التالية
بل كل برامج العالم المبرمجة عن طريق OpenGL تحتوي على هذا الكود فهو
السطح الذي ستضع عليه كل ماستبرمجه .. عموما هذا هو اطول وأصعب درس .. ان
استطعت فهمه ( وليس حفظه) فلن تواجه اية مشاكل مستقبلا ان شاء الله ..
كفانا كلاما .. لنبدأ

أولا يجب عليك إنشاء مشروع فارغ project بواسطة Visual C++ 6.0 ويجب اختيار Win32 Application )وليس ) console application .

ثانيا يجب ربط المكتبات OpenGL libraries
بداخل Visual C++ 6.0 قم بالذهاب إلى Project ثم Settings ثم اضغط على Link الموجودة بالقائمة
تحت
"Object/Library Modules" سوف تجد مجموعة من المكتبات قمت باضافة المكتبات
الثلاثة التالية لهم سواء في البداية او النهاية وتأكد بوجود مسافة بين كل
مكتبة واخرى
OpenGL32.lib GLu32.lib GLaux.lib
مع العلم بان تلك المكتبات تأتي مع نظام التشغيل وندوز تلقائيا

السطور الأربع الاولى من البرنامج تحتوي على الملفات الرأسية Header Files للمكتبات التي قمنا باضافتها

الكود:

#include  // الملف الرأسي لويندوز  Header File For Windows
#include  // الملف الرأسي للمكتبة  OpenGL32
#include  // الملف الرأسي للمكتبة  GLu32
#include  //  الملف الرأسي للمكتبة  GLaux

الآن نريد وضع جميع المتغيرات variables التي سوف نستخدمها في
البرنامج .. بما اننا بصدد انشاء نافذة فارغة فقط ( لا اريد احباط )  فلن نستخدم الكثير من المتغيرات الآن
بالسطر
الاول نقوم باعداد مايسمى بال Rendering Context ( لا اعرف ترجمته )  ..
كل برنامج تقوم ببرمجته عن طريق OpenGL يحتاج Rendering Context .وهو يقوم
بربط OpenGL ب Device Context الذي يقوم بعرض النافذة .. دون ان ندخل
بالتفاصيل هذا مانحتاج معرفته حتى الآن .. نحتاج الى اعداد Device Context
الذي يجب ربطه مع OpenGL عن طريق Rendering Context .
ال Rendering Context يعرف اختصارا hRC اي اننا اثناء البرمجة نستخدم هذا الاختصار فقط وقد قمنا بتعريفه بالسطر الأول
السطر الثاني نقوم باعداد وتهيئة Device Context وهو مايسمى اختصارا hDC

الكود:

HGLRC          hRC=NULL;
HDC            hDC=NULL; 
HWND            hWnd=NULL;
HINSTANCE      hInstance


السطر الأول من الكود التالي يقوم باعداد لوحة المفاتيح Keyboard والاستجابة لاي رد فعل منه
في
السطر الثاني المتغير active يستخدم لاخبار برنامجنا ان كانت النافذة قد
وضعت في الخلفية بعد ان كانت بحجم كامل الشاشة او حتى بنص الشاشة .. اي
اننا قمنا باخفاء النافذة minimized او انزالها حتى نقوم بتشغيل او رؤية
برنامج آخر .
في السطر الثالث المتغير Full Screen واضح ولا يحتاج الى شرح ولكن سوف اقوم بشرحه
في حال كان برنامجنا يستخدم كامل الشاشة (full screen) فان المتغير سووف
يكن true واذا كان غير ذلك اي ليس بكامل الشاشة سوف يكون false
يجب وضع
هذا المتغير حتى يعلم البرنامج اذا ماكنا في وضع الشاشة الكاملة ام لاوحتى
يعرف كل اجراء ان كان سيطبق في وضع الشاشة الكامل ام لا

الكود:

bool    keys[256];    // لتسجيل حركة لوحة المفاتيح
bool    active=TRUE;  // هذا المتغير يجب ان يكون  true
fullscreen=TRUE;  // متغير كامل الشاشة


يجب علينا الآن تعريف WndProc() السبب في ذلك لان CreateGLWindow() يرتبط في WndProc() ولكنه يأتي بعد CreateGLWindow() .
في
لغة C اذا اردنا كتابة اجراء معين او قسم معين من الكود يكون بعد الكود
الذي نعمل عليه حاليا يجب علينا ان نعلن عن الاجراء اولا قبل كتابة الكود
( اقرأ هذه النقطة مرة اخرى ) 
لذا في السطر القادم سوف نقوم بتعريف
WndProc() لنستطيع استخدام CreateGLWindow() .. اتفقنا ؟ سواء اتفقنا ام
لا يجب علينا كتابة هذا السطر 

الكود:

LRESULT    CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);


يقوم الكود التالي باعادة حجم النافذة بعد تصغيرها ( بافتراض انك لاتعمل على كامل الشاشة full screen )

كود
GLvoid ReSizeGLScene(GLsizei width, GLsizei height)
{
    if (height==0)
    {
  height=1;
    }

    glViewport(0, 0, width, height);


في السطور التالية يتم اضافة القليل من الواقعية لمشهدنا ( على افتراض اننا نضع كائنات معينة في الشاشة)
فرؤية المشهد تتم من زاوية مقدارها 45 درجة كما هو مبين بالكود مستندة على الارتفاع والعرض للنافذة
النقاط
0.1f, 100.0f تعبر عن نقطه بداية ونقطه نهاية لمدى العمق الذي نضع به
الكائنات ( سوف اشرح هذا الموضوع بتفصيل اكبر في دروس قادمة )

glMatrixMode(GL_PROJECTION) يشير الى ان السطرين التاليين من الكود سوف يؤثران على مايسمى بمصفوفة التقدير
glLoadIdentity() يقوم بنفس عمل الامر reset تقريبا فهو يعيد المصفوفة المختارة الى حالتها الاولى

كل مانريد معرفته الآن ان اضافة هذا الكود تقوم بتحسين عملنا ( وسوف نفصل في هذا الموضوع في دروس قادمة)

الكود:

glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(45.0f,(GLfloat)width/(GLfloat)height,0.1f,100.0f);
glMatrixMode(GL_MODELVIEW);   
glLoadIdentity();
}


الكود:

int InitGL(GLvoid)
{


الكود:

glShadeModel(GL_SMOOTH );

الآن
نقوم بوضع الألوان .. سوف اقوم بشرح الألوان بشكل مبسط على ان نتعمق فيها
لاحقا .. مدى الألوان يكون بين 0.0f و1.0f حيث ان 0.0f يكون لون داكن و
1.0f يكون لون فاتح و 0.5f يكون لون متوسط بين الداكن والفاتح .
البارامتر
الأول في الكود بعد glClearColor يعبر عن اللون الأحمر والبارامتر الثاني
يعبر عن اللون الأخضر والبارامتر الثالث يعبر عن اللون الأزرق والبارامتر
الرابع لقيمة الفا Alpha .. لانحتاج الآن الى معرفة عمل البارامتر الفا
ونكتفي بوضع قيمته صفر في الوقت الحالي .
قد يتسائل البعض لدينا 3
ألوان فقط .. الأحمر ، الأخضر والأزرق أين بقية الألوان ؟ الاجابة هي : عن
طريق مزج تلك الألوان نقوم بإظهار الوان جديدة وسوف نفصل في هذا الأمر
لاحقا ( يوجد الكثير من الدروس قادمة فلاتخافوا سوف نشرح كل شيء )
الان
اذا كان لدينا glClearColor(0.0f,0.0f,1.0f,0.0f) سوف نرى ان قيمة كل من
اللون الأحمر والاخضر تساوي صفر بينما قيمة اللون الأزرق تساوي واحد ..
اذا سوف نحصل على اللون الازرق على الشاشة .. واذا كان لدينا
glClearColor(0.5f,0.0f,0.0f,0.0f) فاننا سوف نحصل على على لون أحمر متوسط
وليس احمر فاتح او احمر داكن .. وهكذا .
في الكود التالي سوف نقوم بوضع جميع القيم صفر اي اننا سوف نحصل على اللون الأسود للخلفية

الكود:

glClearColor(0.0f, 0.0f, 0.0f, 0.0f);

الكود:

glClearDepth(1.0f);
glEnable(GL_DEPTH_TEST);
glDepthFunc(GL_LEQUAL);


الكود:

glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);   
return TRUE;
}


الكود:

GLvoid KillGLWindow(GLvoid)
{


من
خلال الكود التالي يجب علينا رؤية ما اذا كنا في طور الشاشة الكاملة full
screen ام لا .. لماذا علينا فعل ذلك ؟ .. هل صادفت مرة اثناء خروجك من
احد البرامج اختفاء بعض الايقونات من سطح المكتب وتحتاج الى عمل تحديث
refresh لسطح المكتب لاستعادتها ؟ حسنا هذا السطر يقوم برؤية ما اذا كان
هذا البرنامج في طور الشاشة الكاملة ام لا فاذا كان كذلك يقوم بالخروج من
الشاشة الكاملة قبل اغلاق البرنامج وان كان غير ذلك ف(خير وبركة)

الكود:

if (fullscreen)
    {


الكود:

ChangeDisplaySettings(NULL,0); 
ShowCursor(TRUE);
    }


الكود:

if (hRC)
    {


الكود:

if (!wglMakeCurrent(NULL,NULL))
  {


الكود:

MessageBox(NULL,"Release Of DC And RC Failed.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
  }


الكود:

if (!wglDeleteContext(hRC))

الكود:

MessageBox(NULL,"Release Rendering Context Failed.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
  }
hRC=NULL;
 
    }

الكود:

if (hDC && !ReleaseDC(hWnd,hDC))
{
  MessageBox(NULL,"Release Device Context Failed.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
hDC=NULL;
}


الكود:

if (hWnd && !DestroyWindow(hWnd))   
{
MessageBox(NULL,"Could Not Release hWnd.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
hWnd=NULL;
}

الكود:

if (!UnregisterClass("OpenGL",hInstance))
{
MessageBox(NULL,"Could Not Unregister Class.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
hInstance=NULL;
}
}


الكود:

BOOL CreateGLWindow(char* title, int width, int height, int bits, bool fullscreenflag)
 {

الكود:

GLuint  PixelFormat;

الكود:

WNDCLASS    wc;
DWORD    dwExStyle;
DWORD    dwStyle;


RECT WindowRect;
WindowRect.left=(long)0;
WindowRect.right=(long)width;
WindowRect.top=(long)0;
WindowRect.bottom=(long)height;

الكود:

fullscreen=fullscreenflag;

الكود:

hInstance  = GetModuleHandle(NULL);  wc.style                      = CS_HREDRAW | CS_VREDRAW | CS_OWNDC;
wc.lpfnWndProc  = (WNDPROC) WndProc;
wc.cbClsExtra  = 0;
wc.cbWndExtra  = 0;
wc.hInstance  = hInstance;
wc.hIcon  = LoadIcon(NULL, IDI_WINLOGO);   
wc.hCursor  = LoadCursor(NULL, IDC_ARROW);
wc.hbrBackground    = NULL;
wc.lpszMenuName  = NULL;
wc.lpszClassName    = "OpenGL";

الكود:

if (!RegisterClass(&wc))
{
  MessageBox(NULL,"Failed To Register The Window Class.","ERROR",MB_OK|MB_ICONEXCLAMATION);
return FALSE;
}


الكود:

if (fullscreen)   
{


الكود:

DEVMODE dmScreenSettings;
memset(&dmScreenSettings,0,sizeof(dmScreenSettings));
dmScreenSettings.dmSize=sizeof(dmScreenSettings);
dmScreenSettings.dmPelsWidth    = width;
dmScreenSettings.dmPelsHeight    = height;
dmScreenSettings.dmBitsPerPel    = bits;
dmScreenSettings.dmFields=DM_BITSPERPEL|DM_PELSWIDTH|DM_PELSHEIGHT;



الكود:

if (ChangeDisplaySettings(&dmScreenSettings,CDS_FULLSCREEN)!=DISP_CHANGE_SUCCESSFUL)
{



الكود:

(MessageBox(NULL,"The Requested Fullscreen Mode Is Not Supported
By\nYour Video Card. Use Windowed Mode Instead?","NeHe
GL",MB_YESNO|MB_ICONEXCLAMATION)==IDYES)


الكود:

fullscreen=FALSE;
}
      else
      {


الكود:

MessageBox(NULL,"Program Will Now Close.","ERROR",MB_OK|MB_ICONSTOP);
return FALSE;
      }
  }
    }


الكود:

الكود:

if (fullscreen)
    {


الكود:

dwExStyle=WS_EX_APPWINDOW;
dwStyle=WS_POPUP;
ShowCursor(FALSE);
    }
    else
    {

dwExStyle=WS_EX_APPWINDOW | WS_EX_WINDOWEDGE;     
  dwStyle=WS_OVERLAPPEDWINDOW;
    }

الكود:

AdjustWindowRectEx(&WindowRect, dwStyle, FALSE, dwExStyle);

الكود:

if (!(hWnd=CreateWindowEx(    dwExStyle,
"OpenGL",
title,
WS_CLIPSIBLINGS |
WS_CLIPCHILDREN |
dwStyle,
0, 0,
WindowRect.right-WindowRect.left,
WindowRect.bottom-WindowRect.top,
NULL,   
NULL,
hInstance,
NULL)))



الكود التالي سوف نقوم باختيار الالوان والبت (16 – 24 – 32 ) وغيرها من
الامور التي تحتاج دروس اخرى لتفصيلها فلا تستجعلوا معرفتها الآن

الكود:

static    PIXELFORMATDESCRIPTOR pfd=
{
sizeof(PIXELFORMATDESCRIPTOR),   
1,
PFD_DRAW_TO_WINDOW |
PFD_SUPPORT_OPENGL |
PFD_DOUBLEBUFFER,
PFD_TYPE_RGBA,   
bits,
0, 0, 0, 0, 0, 0,
0,
0,
0,
0, 0, 0, 0,
16,
0,
0,
PFD_MAIN_PLANE,   
0,
0, 0, 0   
    };


الكود:

if (!(hDC=GetDC(hWnd)))
{
KillGLWindow();
MessageBox(NULL,"Can't Create A GL Device Context.","ERROR",MB_OK|MB_ICONEXCLAMATION);
return FALSE;
}
if (!(PixelFormat=ChoosePixelFormat(hDC,&pfd)))   
{
  KillGLWindow();
MessageBox(NULL,"Can't Find A Suitable PixelFormat.","ERROR",MB_OK|MB_ICONEXCLAMATION);
  return FALSE;
}
if(!SetPixelFormat(hDC,PixelFormat,&pfd))
{
  KillGLWindow();
MessageBox(NULL,"Can't Set The PixelFormat.","ERROR",MB_OK|MB_ICONEXCLAMATION);
  return FALSE;
    }   
if (!(hRC=wglCreateContext(hDC))) 
{
  KillGLWindow();
MessageBox(NULL,"Can't Activate The GL Rendering Context.","ERROR",MB_OK|MB_ICONEXCLAMATION);
  return FALSE;
}

الكود:

الكود:

ShowWindow(hWnd,SW_SHOW);
SetForegroundWindow(hWnd);
SetFocus(hWnd);   
ReSizeGLScene(width, height);


الكود:

if (!InitGL())
{
KillGLWindow();
MessageBox(NULL,"Initialization Failed.","ERROR",MB_OK|MB_ICONEXCLAMATION);
  return FALSE;
    }
return TRUE;
  }



الكود:

LRESULT CALLBACK WndProc(    HWND    hWnd,   
UINT    uMsg,   
WPARAM    wParam,   
LPARAM    lParam)   
{

الكود:

switch (uMsg)
    {

  case WM_ACTIVATE:
{
if (!HIWORD(wParam))
{
        active=TRUE
}
      else
{
active=FALSE;
}
return 0;
  }


الكود:

case WM_SYSCOMMAND:
{
switch (wParam)
{
case SC_SCREENSAVE:   
case SC_MONITORPOWER:
return 0;   
}
break;
}

الكود:

case WM_CLOSE:
{
PostQuitMessage(0);
return 0;   
}
case WM_KEYDOWN:
{
keys[wParam] = TRUE;   
return 0;
}
case WM_KEYUP:
{
keys[wParam] = FALSE;
return 0;   
}
case WM_SIZE:
{
ReSizeGLScene(LOWORD(lParam),HIWORD(lParam));
return 0;
}
}
return DefWindowProc(hWnd,uMsg,wParam,lParam);
int WINAPI WinMain(    HINSTANCE    hInstance,
HINSTANCE    hPrevInstance,
LPSTR  lpCmdLine,
int  nCmdShow)
{
MSG    msg;
BOOL    done=FALSE


الكود:

if (MessageBox(NULL,"Would You Like To Run In Fullscreen Mode?", "Start FullScreen?",MB_YESNO|MB_ICONQUESTION)==IDNO)
    {
fullscreen=FALSE;   
}

الكود:

if (!CreateGLWindow("NeHe's OpenGL Framework",640,480,16,fullscreen))
{
return 0;   
    }
while(!done)

    {

الكود:

if (PeekMessage(&msg,NULL,0,0,PM_REMOVE))
{
if (msg.message==WM_QUIT)
{
done=TRUE;
}
      else
{
TranslateMessage(&msg);
   
DispatchMessage(&msg);
}
  }
  else
  {

الكود:

if (active)

{
    if (keys[VK_ESCAPE])
{
  done=TRUE;
}
    else
{

DrawGLScene();   
SwapBuffers(hDC);
}
      }

الكود:

الكود:

if (keys[VK_F1])
{
keys[VK_F1]=FALSE;
KillGLWindow();   
fullscreen=!fullscreen;
if (!CreateGLWindow("NeHe's OpenGL Framework",640,480,16,fullscreen))
{
return 0;
}
      }
  }
    }

الكود: