PixiJS \u00d6rne\u011fi<\/title>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/pixi.js@7.1.1\/dist\/pixi.min.js\"><\/script> <\/head>\n<body>\n<script>\n const app = new PIXI.Application({ width: 800, height: 600 });\n document.body.appendChild(app.view);\n\n const background = PIXI.Sprite.from('background.png'); \/\/ Arka plan resmi\n app.stage.addChild(background);\n\n const player = PIXI.Sprite.from('player.png'); \/\/ Oyuncu resmi\n player.x = 100;\n player.y = 100;\n app.stage.addChild(player);\n<\/script>\n<\/body>\n<\/html><\/pre>\n<p><\/code><\/p>\n<p>Bu kod, 800x600 piksel boyutunda bir uygulama olu\u015fturur ve \"background.png\" ve \"player.png\" adl\u0131 iki resmi y\u00fckleyerek sahneye ekler. <code>player.png<\/code> resmi, (100,100) koordinat\u0131na yerle\u015ftirilir. Bu basit \u00f6rnek, PixiJS'in temel yap\u0131s\u0131n\u0131 g\u00f6sterir. Daha karma\u015f\u0131k oyunlar i\u00e7in, bu temel bile\u015fenleri daha kapsaml\u0131 bir \u015fekilde kullanman\u0131z gerekecektir. Ayr\u0131ca, PixiJS'in sa\u011flad\u0131\u011f\u0131 di\u011fer bir\u00e7ok \u00f6zelli\u011fi ke\u015ffetmek ve projelerinize entegre etmek faydal\u0131 olacakt\u0131r. \u00d6rne\u011fin, animasyonlar, fizik motorlar\u0131, ses efektleri gibi \u00f6zellikler oyununuzu daha zengin ve etkile\u015fimli hale getirecektir.<\/p>\n<h2>Oyun D\u00f6ng\u00fcs\u00fc (Game Loop) Nas\u0131l Y\u00f6netilir?<\/h2>\n<p>Her oyunun kalbi, oyun d\u00f6ng\u00fcs\u00fcd\u00fcr. Bu d\u00f6ng\u00fc, s\u00fcrekli olarak oyun d\u00fcnyas\u0131n\u0131 g\u00fcnceller ve g\u00f6r\u00fcnt\u00fcler. PixiJS'te, <code>app.ticker.add()<\/code> metoduyla kendi oyun d\u00f6ng\u00fcn\u00fcz\u00fc olu\u015fturabilirsiniz. Bu metot, her karede \u00e7a\u011fr\u0131lan bir fonksiyon al\u0131r. Bu fonksiyon i\u00e7inde, oyun d\u00fcnyas\u0131ndaki nesnelerin konumlar\u0131n\u0131, h\u0131zlar\u0131n\u0131 ve di\u011fer \u00f6zelliklerini g\u00fcncelleyebilirsiniz. Ayr\u0131ca, oyun d\u00fcnyas\u0131n\u0131 yeniden \u00e7izmek i\u00e7in de bu fonksiyonu kullanabilirsiniz.<\/p>\n<pre><code class=\"language-javascript\">app.ticker.add((delta) => {\n \/\/ delta: ge\u00e7en s\u00fcre (saniye cinsinden)\n player.x += speed * delta; \/\/ Oyuncu konumunu g\u00fcncelle\n renderer.render(stage); \/\/ Sahneleri yeniden \u00e7iz\n});<\/pre>\n<p><\/code><\/p>\n<p>Bu kod, oyuncunun her karede <code>speed<\/code> kadar hareket etmesini sa\u011flar. <code>delta<\/code> de\u011fi\u015fkeni, ge\u00e7en s\u00fcreyi g\u00f6sterir ve kare h\u0131z\u0131ndaki de\u011fi\u015fikliklere uyum sa\u011flar, b\u00f6ylece oyunun kare h\u0131z\u0131 farkl\u0131 cihazlarda tutarl\u0131 kal\u0131r. Oyun d\u00f6ng\u00fcs\u00fcn\u00fc do\u011fru bir \u015fekilde y\u00f6netmek, oyununuzun performans\u0131n\u0131 ve ak\u0131c\u0131l\u0131\u011f\u0131n\u0131 do\u011frudan etkiler. Oyun d\u00f6ng\u00fcs\u00fc i\u00e7erisinde yapaca\u011f\u0131n\u0131z i\u015flemlerin verimlili\u011fi, oyununuzun genel performans\u0131n\u0131 belirler. Gereksiz hesaplamalardan ka\u00e7\u0131nmak ve optimizasyon tekniklerini kullanmak \u00f6nemlidir.<\/p>\n<h2>\u00c7arp\u0131\u015fma Alg\u0131lama (Collision Detection) Nas\u0131l Uygulan\u0131r?<\/h2>\n<p>Oyunlarda \u00e7arp\u0131\u015fma alg\u0131lamas\u0131, oyun nesneleri aras\u0131ndaki etkile\u015fimleri belirlemek i\u00e7in kritik bir bile\u015fendir. PixiJS, do\u011frudan \u00e7arp\u0131\u015fma alg\u0131lama mekanizmas\u0131 sunmaz, ancak geometrik hesaplamalar kullanarak bunu kendimiz ger\u00e7ekle\u015ftirebiliriz. En basit yakla\u015f\u0131m, iki dikd\u00f6rtgenin \u00e7arp\u0131\u015fmas\u0131n\u0131 kontrol etmektir. \u0130ki dikd\u00f6rtgenin x ve y koordinatlar\u0131 ve geni\u015flikleri ile y\u00fckseklikleri biliniyorsa, \u00e7arp\u0131\u015fma a\u015fa\u011f\u0131daki gibi kontrol edilebilir:<\/p>\n<pre><code class=\"language-javascript\">function checkCollision(rect1, rect2) {\n return (rect1.x < rect2.x + rect2.width &&\n rect1.x + rect1.width > rect2.x &&\n rect1.y < rect2.y + rect2.height &&\n rect1.y + rect1.height > rect2.y);\n}<\/pre>\n<p><\/code><\/p>\n<p>Bu fonksiyon, iki dikd\u00f6rtgenin kenarlar\u0131n\u0131n \u00fcst \u00fcste binip binmedi\u011fini kontrol eder. Daha karma\u015f\u0131k \u015fekiller i\u00e7in (\u00f6rne\u011fin, daireler, \u00e7okgenler), daha geli\u015fmi\u015f algoritmalar kullan\u0131lmal\u0131d\u0131r. \u00d6rne\u011fin, Seprate Axis Theorem (SAT) karma\u015f\u0131k \u015fekiller i\u00e7in verimli \u00e7arp\u0131\u015fma alg\u0131lama sa\u011flar. Karma\u015f\u0131k oyunlarda, performans kritik oldu\u011fundan, \u00e7arp\u0131\u015fma alg\u0131lamas\u0131n\u0131 optimize etmek i\u00e7in \u00e7e\u015fitli teknikler kullanmak \u00f6nemlidir. \u00d6rne\u011fin, b\u00f6lme (spatial partitioning) teknikleri, \u00e7arp\u0131\u015fmay\u0131 sadece olas\u0131 adaylar aras\u0131nda kontrol ederek hesaplama maliyetini d\u00fc\u015f\u00fcr\u00fcr.<\/p>\n<h2>Animasyonlar Nas\u0131l Olu\u015fturulur?<\/h2>\n<p>PixiJS, animasyonlar olu\u015fturmak i\u00e7in \u00e7e\u015fitli y\u00f6ntemler sunar. En basit y\u00f6ntem, <code>ticker<\/code>'\u0131 kullanarak sprite'lar\u0131n konumunu her karede g\u00fcncellemektir. Ancak, daha geli\u015fmi\u015f animasyonlar i\u00e7in, <code>PIXI.animate<\/code> s\u0131n\u0131f\u0131n\u0131 veya d\u0131\u015f k\u00fct\u00fcphaneleri kullanabilirsiniz. <code>PIXI.animate<\/code> s\u0131n\u0131f\u0131, sprite sheet'lerden (sprite'lar\u0131n bir arada bulundu\u011fu tek bir resim dosyas\u0131) animasyonlar olu\u015fturmay\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n<pre><code class=\"language-javascript\">\/\/ Sprite Sheet'ten animasyon\nconst textureArray = [];\nfor (let i = 0; i < 10; i++) {\n const texture = PIXI.Texture.from(<code>frame${i + 1}.png<\/code>);\n textureArray.push(texture);\n}\nconst anim = new PIXI.animate.MovieClip(textureArray);\napp.stage.addChild(anim);\nanim.play();<\/pre>\n<p><\/code><\/p>\n<p>Bu kod, \"frame1.png\" den \"frame10.png\" ye kadar olan resimleri bir animasyon olarak oynat\u0131r. D\u0131\u015f k\u00fct\u00fcphaneler (\u00f6rne\u011fin, Tween.js) daha karma\u015f\u0131k ve ak\u0131c\u0131 animasyonlar olu\u015fturmak i\u00e7in kullan\u0131labilir. Animasyonlar oyununuzun g\u00f6rsel \u00e7ekicili\u011fini art\u0131r\u0131r ve oyun deneyimini zenginle\u015ftirir. Ancak, a\u015f\u0131r\u0131 animasyon kullan\u0131m\u0131 performans sorunlar\u0131na yol a\u00e7abilir. Bu nedenle, performans ve g\u00f6rsel \u00e7ekicilik aras\u0131nda denge kurmak \u00f6nemlidir.<\/p>\n<h2>Kamera Kontrol\u00fc Nas\u0131l Yap\u0131l\u0131r?<\/h2>\n<p>Karma\u015f\u0131k oyunlarda, oyunun t\u00fcm alan\u0131n\u0131 g\u00f6stermek yerine, oyuncunun konumuna g\u00f6re hareket eden bir kamera kullanmak daha mant\u0131kl\u0131d\u0131r. PixiJS'te, bunu <code>Container<\/code>'\u0131 kullanarak sa\u011flayabilirsiniz. Oyun d\u00fcnyas\u0131 \u00f6\u011felerini i\u00e7eren bir <code>Container<\/code> olu\u015fturur ve bu <code>Container<\/code>'\u0131n konumunu oyuncunun konumuna g\u00f6re g\u00fcncellersiniz.<\/p>\n<pre><code class=\"language-javascript\">const worldContainer = new PIXI.Container();\napp.stage.addChild(worldContainer);\n\n\/\/ Oyuncu ve di\u011fer nesneler worldContainer'a eklenir\n\napp.ticker.add(() => {\n worldContainer.x = -player.x + app.screen.width \/ 2; \/\/ Kamera konumunu g\u00fcncelle\n worldContainer.y = -player.y + app.screen.height \/ 2;\n});<\/pre>\n<p><\/code><\/p>\n<p>Bu kod, kameran\u0131n oyuncunun merkezde kalmas\u0131n\u0131 sa\u011flar. Kameran\u0131n hareketini \u00e7e\u015fitli \u015fekillerde kontrol edebilirsiniz. \u00d6rne\u011fin, s\u0131n\u0131rlar ekleyerek kameran\u0131n oyun alan\u0131n\u0131n d\u0131\u015f\u0131na \u00e7\u0131kmas\u0131n\u0131 engelleyebilirsiniz veya farkl\u0131 kamera t\u00fcrleri (\u00f6rne\u011fin, takip kameras\u0131, \u00f6zg\u00fcr kamera) implemente edebilirsiniz. Kamera kontrol\u00fc, oyun deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde etkiler ve oyunun oynanabilirli\u011fini art\u0131r\u0131r.<\/p>\n<h2>Ses Efektleri ve M\u00fczik Nas\u0131l Eklenir?<\/h2>\n<p>Ses efektleri ve m\u00fczik, oyun deneyimini zenginle\u015ftirir ve daha s\u00fcr\u00fckleyici hale getirir. PixiJS'in kendisi ses i\u015fleme i\u00e7in bir API sa\u011flamaz, bu nedenle Web Audio API veya Howler.js gibi bir d\u0131\u015f k\u00fct\u00fcphane kullanman\u0131z gerekir. Howler.js, ses dosyalar\u0131n\u0131 kolayca y\u00fckleyip \u00e7alman\u0131z\u0131 sa\u011flar.<\/p>\n<pre><code class=\"language-javascript\">const sound = new Howl({\n src: ['sound.mp3'],\n loop: true\n});\nsound.play();<\/pre>\n<p><\/code><\/p>\n<p>Bu kod, \"sound.mp3\" dosyas\u0131n\u0131 d\u00f6ng\u00fcde \u00e7alar. Ses efektleri ve m\u00fczikleri do\u011fru kullanmak, oyununuzun atmosferini \u00f6nemli \u00f6l\u00e7\u00fcde etkiler. Ancak, fazla ses efekti kullan\u0131m\u0131 performans\u0131 olumsuz etkileyebilir ve oyun deneyimini rahats\u0131z edici hale getirebilir. Bu nedenle, ses efektlerinin kullan\u0131m\u0131nda denge kurmak \u00f6nemlidir.<\/p>\n<h2>Performans Optimizasyonu Teknikleri<\/h2>\n<p>PixiJS ile y\u00fcksek performansl\u0131 oyunlar geli\u015ftirmek i\u00e7in \u00e7e\u015fitli optimizasyon teknikleri kullanman\u0131z \u00f6nemlidir. Bunlardan baz\u0131lar\u0131:<\/p>\n<p>* <strong>Sprite Sheet'ler kullanma:<\/strong> Birden fazla sprite'\u0131 tek bir dosyaya paketlemek, y\u00fckleme s\u00fcrelerini ve i\u015flem y\u00fck\u00fcn\u00fc azalt\u0131r.<br \/>\n* <strong>Texture atlaslar\u0131:<\/strong> Texture atlaslar\u0131, birden \u00e7ok g\u00f6r\u00fcnt\u00fcy\u00fc tek bir texture i\u00e7ine birle\u015ftirir, b\u00f6ylece daha az grafik \u00e7a\u011fr\u0131s\u0131 yap\u0131lm\u0131\u015f olur.<br \/>\n* <strong>Render optimizasyonu:<\/strong> Gerekmedik\u00e7e nesneleri yeniden \u00e7izmekten ka\u00e7\u0131n\u0131n. \u00d6rne\u011fin, g\u00f6r\u00fcnmeyen nesneleri render etmekten ka\u00e7\u0131nabilirsiniz.<br \/>\n* <strong>\u00c7arp\u0131\u015fma alg\u0131lamas\u0131n\u0131 optimize etme:<\/strong> B\u00f6lme (spatial partitioning) gibi teknikler kullanarak \u00e7arp\u0131\u015fma kontrol\u00fcn\u00fc h\u0131zland\u0131r\u0131n.<br \/>\n* <strong>Kare h\u0131z\u0131n\u0131 izleme:<\/strong> Oyununuzun kare h\u0131z\u0131n\u0131 izleyin ve performans sorunlar\u0131n\u0131 tespit edin.<\/p>\n<h2>\u00d6\u011frenme Yol Haritas\u0131<\/h2>\n<p><strong>Yeni Ba\u015flayan:<\/strong> PixiJS'in temel kavramlar\u0131n\u0131 \u00f6\u011frenin. Basit bir sahne olu\u015fturun ve sprite'lar\u0131 ekleyin. Oyun d\u00f6ng\u00fcs\u00fc olu\u015fturmay\u0131 ve basit animasyonlar yapmay\u0131 \u00f6\u011frenin.<\/p>\n<p><strong>Orta Seviye:<\/strong> \u00c7arp\u0131\u015fma alg\u0131lamas\u0131, kamera kontrol\u00fc ve basit oyun mekaniklerini uygulay\u0131n. Ses efektleri ve m\u00fczik eklemeyi \u00f6\u011frenin.<\/p>\n<p><strong>\u0130leri Seviye:<\/strong> Geli\u015fmi\u015f animasyon teknikleri, performans optimizasyonu, karma\u015f\u0131k oyun mekanikleri ve farkl\u0131 oyun t\u00fcrlerinde PixiJS'i kullanmay\u0131 \u00f6\u011frenin. Farkl\u0131 fizik motorlar\u0131n\u0131 PixiJS ile entegre etmeyi deneyin.<\/p>\n<h2>Vaka Analizi: Bir Platform Oyunu<\/h2>\n<p>PixiJS kullanarak bir platform oyunu geli\u015ftirirken, \u00e7arp\u0131\u015fma alg\u0131lamas\u0131, karakter animasyonlar\u0131, d\u00fczey tasar\u0131m\u0131, kamera kontrol\u00fc ve performans optimizasyonu gibi konular \u00f6nemli hale gelir. Karakterin hareketini oyun d\u00f6ng\u00fcs\u00fc i\u00e7inde g\u00fcncellemeli, \u00e7arp\u0131\u015fmalar\u0131 kontrol etmeli ve karakterin animasyonlar\u0131n\u0131 do\u011fru zamanda oynatmal\u0131s\u0131n\u0131z. D\u00fczey tasar\u0131m\u0131, oyun d\u00fcnyas\u0131n\u0131n karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 etkiler ve dolay\u0131s\u0131yla performans\u0131 etkiler. Verimli bir d\u00fczey tasar\u0131m\u0131 ile performans\u0131 optimize edebilirsiniz.<\/p>\n<h2>Sonu\u00e7<\/h2>\n<p>PixiJS, g\u00fc\u00e7l\u00fc \u00f6zellikleri ve kolay kullan\u0131m\u0131 ile 2B oyun geli\u015ftirme i\u00e7in ideal bir ara\u00e7t\u0131r. Bu makalede, PixiJS ile temel oyun konseptlerini uygulamaya y\u00f6nelik kapsaml\u0131 bir rehber sunmay\u0131 hedefledik. Ancak, PixiJS'in t\u00fcm \u00f6zelliklerini ve potansiyelini ke\u015ffetmek i\u00e7in s\u00fcrekli \u00f6\u011frenme ve uygulama gereklidir. Daha fazla bilgi i\u00e7in [https:\/\/fatihsoysal.com](https:\/\/fatihsoysal.com) inceleyebilirsiniz.<\/p>\n<p><strong>S\u0131k\u00e7a Sorulan Sorular:<\/strong><\/p>\n<p>1. <strong>PixiJS'i hangi taray\u0131c\u0131lar destekliyor?<\/strong> Modern taray\u0131c\u0131lar\u0131n b\u00fcy\u00fck \u00e7o\u011funlu\u011fu PixiJS'i destekler.<br \/>\n2. <strong>PixiJS'in performans\u0131 nas\u0131l?<\/strong> PixiJS, canvas'\u0131 kullanarak y\u00fcksek performans sa\u011flar. Ancak, optimizasyon teknikleri kullanmak \u00f6nemlidir.<br \/>\n3. <strong>PixiJS'i \u00f6\u011frenmek ne kadar zaman al\u0131r?<\/strong> Bu, \u00f6nceki programlama deneyiminize ve \u00f6\u011frenme h\u0131z\u0131n\u0131za ba\u011fl\u0131d\u0131r.<br \/>\n4. <strong>PixiJS'in alternatifleri neler?<\/strong> Phaser, Babylon.js ve Three.js gibi alternatif k\u00fct\u00fcphaneler mevcuttur.<br \/>\n5. <strong>PixiJS'i ticari projelerde kullanabilir miyim?<\/strong> Evet, PixiJS a\u00e7\u0131k kaynakl\u0131 bir k\u00fct\u00fcphanedir ve ticari projelerde kullan\u0131labilir.<\/p>\n<p>Yazar: Fatih Soysal<\/p>\n","protected":false},"excerpt":{"rendered":"PixiJS ile Oyun Geli\u015ftirmenin Temelleri PixiJS, HTML5 canvas’\u0131 kullanarak performansl\u0131 2B oyunlar ve uygulamalar olu\u015fturman\u0131za olanak sa\u011flayan g\u00fc\u00e7l\u00fc…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-27728","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n<title>PixiJS ile Oyun Geli\u015ftirmenin Temelleri<\/title>\n<meta name=\"description\" content=\"PixiJS, HTML5 canvas'\u0131 kullanarak performansl\u0131 2B oyunlar ve uygulamalar olu\u015fturman\u0131za olanak sa\u011flayan g\u00fc\u00e7l\u00fc bir JavaScript k\u00fct\u00fcphanesidir. Ancak, basit bir animasyon olu\u015fturman\u0131n \u00f6tesinde, karma\u015f\u0131k oyun mekaniklerini uygulamak ve performansl\u0131 bir oyun geli\u015ftirmek i\u00e7in sa\u011flam bir anlay\u0131\u015f gerektirir. Bu makalede, PixiJS'i kullanarak temel oyun konseptlerini nas\u0131l uygulayaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131z, ger\u00e7ek d\u00fcnya \u00f6rnekleriyle destekleyece\u011fiz ve performans optimizasyonlar\u0131na de\u011finece\u011fiz. PixiJS ile oyun geli\u015ftirme yolculu\u011funuza ba\u015flaman\u0131z i\u00e7in kapsaml\u0131 bir rehber sunmay\u0131 hedefliyoruz.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"PixiJS ile Oyun Geli\u015ftirmenin Temelleri\" \/>\n<meta property=\"og:description\" content=\"PixiJS, HTML5 canvas'\u0131 kullanarak performansl\u0131 2B oyunlar ve uygulamalar olu\u015fturman\u0131za olanak sa\u011flayan g\u00fc\u00e7l\u00fc bir JavaScript k\u00fct\u00fcphanesidir. Ancak, basit bir animasyon olu\u015fturman\u0131n \u00f6tesinde, karma\u015f\u0131k oyun mekaniklerini uygulamak ve performansl\u0131 bir oyun geli\u015ftirmek i\u00e7in sa\u011flam bir anlay\u0131\u015f gerektirir. Bu makalede, PixiJS'i kullanarak temel oyun konseptlerini nas\u0131l uygulayaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131z, ger\u00e7ek d\u00fcnya \u00f6rnekleriyle destekleyece\u011fiz ve performans optimizasyonlar\u0131na de\u011finece\u011fiz. PixiJS ile oyun geli\u015ftirme yolculu\u011funuza ba\u015flaman\u0131z i\u00e7in kapsaml\u0131 bir rehber sunmay\u0131 hedefliyoruz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-08-18T01:30:26+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"PixiJS ile Oyun Geli\u015ftirmenin Temelleri\",\"datePublished\":\"2025-08-18T01:30:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/\"},\"wordCount\":1510,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/\",\"name\":\"PixiJS ile Oyun Geli\u015ftirmenin Temelleri\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-08-18T01:30:26+00:00\",\"description\":\"PixiJS, HTML5 canvas'\u0131 kullanarak performansl\u0131 2B oyunlar ve uygulamalar olu\u015fturman\u0131za olanak sa\u011flayan g\u00fc\u00e7l\u00fc bir JavaScript k\u00fct\u00fcphanesidir. Ancak, basit bir animasyon olu\u015fturman\u0131n \u00f6tesinde, karma\u015f\u0131k oyun mekaniklerini uygulamak ve performansl\u0131 bir oyun geli\u015ftirmek i\u00e7in sa\u011flam bir anlay\u0131\u015f gerektirir. Bu makalede, PixiJS'i kullanarak temel oyun konseptlerini nas\u0131l uygulayaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131z, ger\u00e7ek d\u00fcnya \u00f6rnekleriyle destekleyece\u011fiz ve performans optimizasyonlar\u0131na de\u011finece\u011fiz. PixiJS ile oyun geli\u015ftirme yolculu\u011funuza ba\u015flaman\u0131z i\u00e7in kapsaml\u0131 bir rehber sunmay\u0131 hedefliyoruz.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"PixiJS ile Oyun Geli\u015ftirmenin Temelleri\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n","yoast_head_json":{"title":"PixiJS ile Oyun Geli\u015ftirmenin Temelleri","description":"PixiJS, HTML5 canvas'\u0131 kullanarak performansl\u0131 2B oyunlar ve uygulamalar olu\u015fturman\u0131za olanak sa\u011flayan g\u00fc\u00e7l\u00fc bir JavaScript k\u00fct\u00fcphanesidir. Ancak, basit bir animasyon olu\u015fturman\u0131n \u00f6tesinde, karma\u015f\u0131k oyun mekaniklerini uygulamak ve performansl\u0131 bir oyun geli\u015ftirmek i\u00e7in sa\u011flam bir anlay\u0131\u015f gerektirir. Bu makalede, PixiJS'i kullanarak temel oyun konseptlerini nas\u0131l uygulayaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131z, ger\u00e7ek d\u00fcnya \u00f6rnekleriyle destekleyece\u011fiz ve performans optimizasyonlar\u0131na de\u011finece\u011fiz. PixiJS ile oyun geli\u015ftirme yolculu\u011funuza ba\u015flaman\u0131z i\u00e7in kapsaml\u0131 bir rehber sunmay\u0131 hedefliyoruz.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/","og_locale":"tr_TR","og_type":"article","og_title":"PixiJS ile Oyun Geli\u015ftirmenin Temelleri","og_description":"PixiJS, HTML5 canvas'\u0131 kullanarak performansl\u0131 2B oyunlar ve uygulamalar olu\u015fturman\u0131za olanak sa\u011flayan g\u00fc\u00e7l\u00fc bir JavaScript k\u00fct\u00fcphanesidir. Ancak, basit bir animasyon olu\u015fturman\u0131n \u00f6tesinde, karma\u015f\u0131k oyun mekaniklerini uygulamak ve performansl\u0131 bir oyun geli\u015ftirmek i\u00e7in sa\u011flam bir anlay\u0131\u015f gerektirir. Bu makalede, PixiJS'i kullanarak temel oyun konseptlerini nas\u0131l uygulayaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131z, ger\u00e7ek d\u00fcnya \u00f6rnekleriyle destekleyece\u011fiz ve performans optimizasyonlar\u0131na de\u011finece\u011fiz. PixiJS ile oyun geli\u015ftirme yolculu\u011funuza ba\u015flaman\u0131z i\u00e7in kapsaml\u0131 bir rehber sunmay\u0131 hedefliyoruz.","og_url":"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-08-18T01:30:26+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"8 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"PixiJS ile Oyun Geli\u015ftirmenin Temelleri","datePublished":"2025-08-18T01:30:26+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/"},"wordCount":1510,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/","url":"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/","name":"PixiJS ile Oyun Geli\u015ftirmenin Temelleri","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-08-18T01:30:26+00:00","description":"PixiJS, HTML5 canvas'\u0131 kullanarak performansl\u0131 2B oyunlar ve uygulamalar olu\u015fturman\u0131za olanak sa\u011flayan g\u00fc\u00e7l\u00fc bir JavaScript k\u00fct\u00fcphanesidir. Ancak, basit bir animasyon olu\u015fturman\u0131n \u00f6tesinde, karma\u015f\u0131k oyun mekaniklerini uygulamak ve performansl\u0131 bir oyun geli\u015ftirmek i\u00e7in sa\u011flam bir anlay\u0131\u015f gerektirir. Bu makalede, PixiJS'i kullanarak temel oyun konseptlerini nas\u0131l uygulayaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131z, ger\u00e7ek d\u00fcnya \u00f6rnekleriyle destekleyece\u011fiz ve performans optimizasyonlar\u0131na de\u011finece\u011fiz. PixiJS ile oyun geli\u015ftirme yolculu\u011funuza ba\u015flaman\u0131z i\u00e7in kapsaml\u0131 bir rehber sunmay\u0131 hedefliyoruz.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"PixiJS ile Oyun Geli\u015ftirmenin Temelleri"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/27728","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=27728"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/27728\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=27728"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=27728"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=27728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":27728,"date":"2025-08-18T04:30:26","date_gmt":"2025-08-18T01:30:26","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/"},"modified":"2025-08-18T04:30:26","modified_gmt":"2025-08-18T01:30:26","slug":"pixijs-ile-oyun-gelistirmenin-temelleri","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/","title":{"rendered":"PixiJS ile Oyun Geli\u015ftirmenin Temelleri"},"content":{"rendered":"

PixiJS ile Oyun Geli\u015ftirmenin Temelleri<\/p>\n

PixiJS, HTML5 canvas’\u0131 kullanarak performansl\u0131 2B oyunlar ve uygulamalar olu\u015fturman\u0131za olanak sa\u011flayan g\u00fc\u00e7l\u00fc bir JavaScript k\u00fct\u00fcphanesidir. Ancak, basit bir animasyon olu\u015fturman\u0131n \u00f6tesinde, karma\u015f\u0131k oyun mekaniklerini uygulamak ve performansl\u0131 bir oyun geli\u015ftirmek i\u00e7in sa\u011flam bir anlay\u0131\u015f gerektirir. Bu makalede, PixiJS’i kullanarak temel oyun konseptlerini nas\u0131l uygulayaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131z, ger\u00e7ek d\u00fcnya \u00f6rnekleriyle destekleyece\u011fiz ve performans optimizasyonlar\u0131na de\u011finece\u011fiz. PixiJS ile oyun geli\u015ftirme yolculu\u011funuza ba\u015flaman\u0131z i\u00e7in kapsaml\u0131 bir rehber sunmay\u0131 hedefliyoruz.<\/p>\n

PixiJS’e Giri\u015f: \u0130lk Ad\u0131mlar Nas\u0131l At\u0131l\u0131r?<\/h2>\n

PixiJS ile oyun geli\u015ftirmeye ba\u015flamadan \u00f6nce, temel kavramlarla tan\u0131\u015fman\u0131z \u00f6nemlidir. PixiJS, Stage<\/code>, Container<\/code>, Sprite<\/code> ve Texture<\/code> gibi temel bile\u015fenler \u00fczerine kuruludur. Stage<\/code>, oyununuzun t\u00fcm g\u00f6rsel \u00f6\u011felerinin bulundu\u011fu ana kapsay\u0131c\u0131d\u0131r. Container<\/code>, sprite’lar\u0131 ve di\u011fer kapsay\u0131c\u0131lar\u0131 d\u00fczenlemenizi sa\u011flayan bir kapsay\u0131c\u0131d\u0131r. Sprite<\/code>, ekran \u00fczerinde g\u00f6r\u00fcnt\u00fclenecek olan g\u00f6rsel \u00f6\u011felerdir (\u00f6rne\u011fin, karakterler, arka planlar) ve Texture<\/code>, sprite’lar\u0131n g\u00f6r\u00fcnt\u00fclerini tan\u0131mlar. Bu bile\u015fenleri kullanarak basit bir oyun sahnesi olu\u015fturabilirsiniz. \u00d6rne\u011fin, bir arka plan g\u00f6r\u00fcnt\u00fcs\u00fc ve birka\u00e7 sprite ekleyerek basit bir oyun sahnesi tasarlayabilirsiniz.<\/p>\n

\n\n\nPixiJS \u00d6rne\u011fi<\/title>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/pixi.js@7.1.1\/dist\/pixi.min.js\"><\/script> <\/head>\n<body>\n<script>\n  const app = new PIXI.Application({ width: 800, height: 600 });\n  document.body.appendChild(app.view);\n\n  const background = PIXI.Sprite.from('background.png'); \/\/ Arka plan resmi\n  app.stage.addChild(background);\n\n  const player = PIXI.Sprite.from('player.png'); \/\/ Oyuncu resmi\n  player.x = 100;\n  player.y = 100;\n  app.stage.addChild(player);\n<\/script>\n<\/body>\n<\/html><\/pre>\n<p><\/code><\/p>\n<p>Bu kod, 800x600 piksel boyutunda bir uygulama olu\u015fturur ve \"background.png\" ve \"player.png\" adl\u0131 iki resmi y\u00fckleyerek sahneye ekler.  <code>player.png<\/code> resmi, (100,100) koordinat\u0131na yerle\u015ftirilir.  Bu basit \u00f6rnek, PixiJS'in temel yap\u0131s\u0131n\u0131 g\u00f6sterir.  Daha karma\u015f\u0131k oyunlar i\u00e7in,  bu temel bile\u015fenleri daha kapsaml\u0131 bir \u015fekilde kullanman\u0131z gerekecektir.  Ayr\u0131ca, PixiJS'in sa\u011flad\u0131\u011f\u0131 di\u011fer bir\u00e7ok \u00f6zelli\u011fi ke\u015ffetmek ve projelerinize entegre etmek faydal\u0131 olacakt\u0131r.  \u00d6rne\u011fin, animasyonlar, fizik motorlar\u0131,  ses efektleri gibi \u00f6zellikler oyununuzu daha zengin ve etkile\u015fimli hale getirecektir.<\/p>\n<h2>Oyun D\u00f6ng\u00fcs\u00fc (Game Loop) Nas\u0131l Y\u00f6netilir?<\/h2>\n<p>Her oyunun kalbi, oyun d\u00f6ng\u00fcs\u00fcd\u00fcr. Bu d\u00f6ng\u00fc, s\u00fcrekli olarak oyun d\u00fcnyas\u0131n\u0131 g\u00fcnceller ve g\u00f6r\u00fcnt\u00fcler. PixiJS'te, <code>app.ticker.add()<\/code> metoduyla kendi oyun d\u00f6ng\u00fcn\u00fcz\u00fc olu\u015fturabilirsiniz. Bu metot, her karede \u00e7a\u011fr\u0131lan bir fonksiyon al\u0131r. Bu fonksiyon i\u00e7inde, oyun d\u00fcnyas\u0131ndaki nesnelerin konumlar\u0131n\u0131, h\u0131zlar\u0131n\u0131 ve di\u011fer \u00f6zelliklerini g\u00fcncelleyebilirsiniz. Ayr\u0131ca, oyun d\u00fcnyas\u0131n\u0131 yeniden \u00e7izmek i\u00e7in de bu fonksiyonu kullanabilirsiniz.<\/p>\n<pre><code class=\"language-javascript\">app.ticker.add((delta) => {\n    \/\/ delta: ge\u00e7en s\u00fcre (saniye cinsinden)\n    player.x += speed * delta; \/\/ Oyuncu konumunu g\u00fcncelle\n    renderer.render(stage); \/\/ Sahneleri yeniden \u00e7iz\n});<\/pre>\n<p><\/code><\/p>\n<p>Bu kod, oyuncunun her karede <code>speed<\/code> kadar hareket etmesini sa\u011flar.  <code>delta<\/code> de\u011fi\u015fkeni, ge\u00e7en s\u00fcreyi g\u00f6sterir ve kare h\u0131z\u0131ndaki de\u011fi\u015fikliklere uyum sa\u011flar, b\u00f6ylece oyunun kare h\u0131z\u0131 farkl\u0131 cihazlarda tutarl\u0131 kal\u0131r.  Oyun d\u00f6ng\u00fcs\u00fcn\u00fc do\u011fru bir \u015fekilde y\u00f6netmek, oyununuzun performans\u0131n\u0131 ve ak\u0131c\u0131l\u0131\u011f\u0131n\u0131 do\u011frudan etkiler.  Oyun d\u00f6ng\u00fcs\u00fc i\u00e7erisinde yapaca\u011f\u0131n\u0131z i\u015flemlerin verimlili\u011fi, oyununuzun genel performans\u0131n\u0131 belirler.   Gereksiz hesaplamalardan ka\u00e7\u0131nmak ve optimizasyon tekniklerini kullanmak \u00f6nemlidir.<\/p>\n<h2>\u00c7arp\u0131\u015fma Alg\u0131lama (Collision Detection) Nas\u0131l Uygulan\u0131r?<\/h2>\n<p>Oyunlarda \u00e7arp\u0131\u015fma alg\u0131lamas\u0131, oyun nesneleri aras\u0131ndaki etkile\u015fimleri belirlemek i\u00e7in kritik bir bile\u015fendir. PixiJS, do\u011frudan \u00e7arp\u0131\u015fma alg\u0131lama mekanizmas\u0131 sunmaz, ancak geometrik hesaplamalar kullanarak bunu kendimiz ger\u00e7ekle\u015ftirebiliriz.  En basit yakla\u015f\u0131m, iki dikd\u00f6rtgenin \u00e7arp\u0131\u015fmas\u0131n\u0131 kontrol etmektir.  \u0130ki dikd\u00f6rtgenin x ve y koordinatlar\u0131 ve geni\u015flikleri ile y\u00fckseklikleri biliniyorsa, \u00e7arp\u0131\u015fma a\u015fa\u011f\u0131daki gibi kontrol edilebilir:<\/p>\n<pre><code class=\"language-javascript\">function checkCollision(rect1, rect2) {\n    return (rect1.x < rect2.x + rect2.width &&\n            rect1.x + rect1.width > rect2.x &&\n            rect1.y < rect2.y + rect2.height &&\n            rect1.y + rect1.height > rect2.y);\n}<\/pre>\n<p><\/code><\/p>\n<p>Bu fonksiyon, iki dikd\u00f6rtgenin kenarlar\u0131n\u0131n \u00fcst \u00fcste binip binmedi\u011fini kontrol eder.  Daha karma\u015f\u0131k \u015fekiller i\u00e7in (\u00f6rne\u011fin, daireler, \u00e7okgenler), daha geli\u015fmi\u015f algoritmalar kullan\u0131lmal\u0131d\u0131r.  \u00d6rne\u011fin, Seprate Axis Theorem (SAT)  karma\u015f\u0131k \u015fekiller i\u00e7in verimli \u00e7arp\u0131\u015fma alg\u0131lama sa\u011flar.   Karma\u015f\u0131k oyunlarda, performans kritik oldu\u011fundan, \u00e7arp\u0131\u015fma alg\u0131lamas\u0131n\u0131 optimize etmek i\u00e7in \u00e7e\u015fitli teknikler kullanmak \u00f6nemlidir.  \u00d6rne\u011fin,  b\u00f6lme (spatial partitioning) teknikleri, \u00e7arp\u0131\u015fmay\u0131 sadece olas\u0131 adaylar aras\u0131nda kontrol ederek hesaplama maliyetini d\u00fc\u015f\u00fcr\u00fcr.<\/p>\n<h2>Animasyonlar Nas\u0131l Olu\u015fturulur?<\/h2>\n<p>PixiJS, animasyonlar olu\u015fturmak i\u00e7in \u00e7e\u015fitli y\u00f6ntemler sunar.  En basit y\u00f6ntem,  <code>ticker<\/code>'\u0131 kullanarak sprite'lar\u0131n konumunu her karede g\u00fcncellemektir.  Ancak, daha geli\u015fmi\u015f animasyonlar i\u00e7in,  <code>PIXI.animate<\/code> s\u0131n\u0131f\u0131n\u0131 veya d\u0131\u015f k\u00fct\u00fcphaneleri kullanabilirsiniz. <code>PIXI.animate<\/code>  s\u0131n\u0131f\u0131, sprite sheet'lerden (sprite'lar\u0131n bir arada bulundu\u011fu tek bir resim dosyas\u0131) animasyonlar olu\u015fturmay\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n<pre><code class=\"language-javascript\">\/\/ Sprite Sheet'ten animasyon\nconst textureArray = [];\nfor (let i = 0; i < 10; i++) {\n    const texture = PIXI.Texture.from(<code>frame${i + 1}.png<\/code>);\n    textureArray.push(texture);\n}\nconst anim = new PIXI.animate.MovieClip(textureArray);\napp.stage.addChild(anim);\nanim.play();<\/pre>\n<p><\/code><\/p>\n<p>Bu kod, \"frame1.png\" den \"frame10.png\" ye kadar olan resimleri bir animasyon olarak oynat\u0131r.  D\u0131\u015f k\u00fct\u00fcphaneler (\u00f6rne\u011fin, Tween.js)  daha karma\u015f\u0131k ve ak\u0131c\u0131 animasyonlar olu\u015fturmak i\u00e7in kullan\u0131labilir.  Animasyonlar oyununuzun g\u00f6rsel \u00e7ekicili\u011fini art\u0131r\u0131r ve oyun deneyimini zenginle\u015ftirir. Ancak, a\u015f\u0131r\u0131 animasyon kullan\u0131m\u0131 performans sorunlar\u0131na yol a\u00e7abilir.  Bu nedenle, performans ve g\u00f6rsel \u00e7ekicilik aras\u0131nda denge kurmak \u00f6nemlidir.<\/p>\n<h2>Kamera Kontrol\u00fc Nas\u0131l Yap\u0131l\u0131r?<\/h2>\n<p>Karma\u015f\u0131k oyunlarda,  oyunun t\u00fcm alan\u0131n\u0131 g\u00f6stermek yerine, oyuncunun konumuna g\u00f6re hareket eden bir kamera kullanmak daha mant\u0131kl\u0131d\u0131r.  PixiJS'te, bunu <code>Container<\/code>'\u0131 kullanarak sa\u011flayabilirsiniz.  Oyun d\u00fcnyas\u0131 \u00f6\u011felerini i\u00e7eren bir <code>Container<\/code> olu\u015fturur ve bu <code>Container<\/code>'\u0131n konumunu oyuncunun konumuna g\u00f6re g\u00fcncellersiniz.<\/p>\n<pre><code class=\"language-javascript\">const worldContainer = new PIXI.Container();\napp.stage.addChild(worldContainer);\n\n\/\/ Oyuncu ve di\u011fer nesneler worldContainer'a eklenir\n\napp.ticker.add(() => {\n    worldContainer.x = -player.x + app.screen.width \/ 2; \/\/ Kamera konumunu g\u00fcncelle\n    worldContainer.y = -player.y + app.screen.height \/ 2;\n});<\/pre>\n<p><\/code><\/p>\n<p>Bu kod, kameran\u0131n oyuncunun merkezde kalmas\u0131n\u0131 sa\u011flar.   Kameran\u0131n hareketini \u00e7e\u015fitli \u015fekillerde kontrol edebilirsiniz.  \u00d6rne\u011fin, s\u0131n\u0131rlar ekleyerek kameran\u0131n oyun alan\u0131n\u0131n d\u0131\u015f\u0131na \u00e7\u0131kmas\u0131n\u0131 engelleyebilirsiniz veya farkl\u0131 kamera t\u00fcrleri (\u00f6rne\u011fin, takip kameras\u0131, \u00f6zg\u00fcr kamera)  implemente edebilirsiniz.  Kamera kontrol\u00fc, oyun deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde etkiler ve  oyunun oynanabilirli\u011fini art\u0131r\u0131r.<\/p>\n<h2>Ses Efektleri ve M\u00fczik Nas\u0131l Eklenir?<\/h2>\n<p>Ses efektleri ve m\u00fczik, oyun deneyimini zenginle\u015ftirir ve daha s\u00fcr\u00fckleyici hale getirir.  PixiJS'in kendisi ses i\u015fleme i\u00e7in bir API sa\u011flamaz,  bu nedenle  Web Audio API veya Howler.js gibi bir d\u0131\u015f k\u00fct\u00fcphane kullanman\u0131z gerekir.  Howler.js,  ses dosyalar\u0131n\u0131 kolayca y\u00fckleyip \u00e7alman\u0131z\u0131 sa\u011flar.<\/p>\n<pre><code class=\"language-javascript\">const sound = new Howl({\n  src: ['sound.mp3'],\n  loop: true\n});\nsound.play();<\/pre>\n<p><\/code><\/p>\n<p>Bu kod, \"sound.mp3\" dosyas\u0131n\u0131 d\u00f6ng\u00fcde \u00e7alar.  Ses efektleri ve m\u00fczikleri do\u011fru kullanmak, oyununuzun atmosferini \u00f6nemli \u00f6l\u00e7\u00fcde etkiler.  Ancak,  fazla ses efekti kullan\u0131m\u0131 performans\u0131 olumsuz etkileyebilir ve oyun deneyimini rahats\u0131z edici hale getirebilir.  Bu nedenle, ses efektlerinin kullan\u0131m\u0131nda denge kurmak \u00f6nemlidir.<\/p>\n<h2>Performans Optimizasyonu Teknikleri<\/h2>\n<p>PixiJS ile y\u00fcksek performansl\u0131 oyunlar geli\u015ftirmek i\u00e7in \u00e7e\u015fitli optimizasyon teknikleri kullanman\u0131z \u00f6nemlidir.  Bunlardan baz\u0131lar\u0131:<\/p>\n<p>* <strong>Sprite Sheet'ler kullanma:<\/strong> Birden fazla sprite'\u0131 tek bir dosyaya paketlemek, y\u00fckleme s\u00fcrelerini ve i\u015flem y\u00fck\u00fcn\u00fc azalt\u0131r.<br \/>\n* <strong>Texture atlaslar\u0131:<\/strong>  Texture atlaslar\u0131, birden \u00e7ok g\u00f6r\u00fcnt\u00fcy\u00fc tek bir texture i\u00e7ine birle\u015ftirir, b\u00f6ylece daha az grafik \u00e7a\u011fr\u0131s\u0131 yap\u0131lm\u0131\u015f olur.<br \/>\n* <strong>Render optimizasyonu:<\/strong>  Gerekmedik\u00e7e nesneleri yeniden \u00e7izmekten ka\u00e7\u0131n\u0131n.  \u00d6rne\u011fin,  g\u00f6r\u00fcnmeyen nesneleri render etmekten ka\u00e7\u0131nabilirsiniz.<br \/>\n* <strong>\u00c7arp\u0131\u015fma alg\u0131lamas\u0131n\u0131 optimize etme:<\/strong>  B\u00f6lme (spatial partitioning) gibi teknikler kullanarak \u00e7arp\u0131\u015fma kontrol\u00fcn\u00fc h\u0131zland\u0131r\u0131n.<br \/>\n* <strong>Kare h\u0131z\u0131n\u0131 izleme:<\/strong> Oyununuzun kare h\u0131z\u0131n\u0131 izleyin ve performans sorunlar\u0131n\u0131 tespit edin.<\/p>\n<h2>\u00d6\u011frenme Yol Haritas\u0131<\/h2>\n<p><strong>Yeni Ba\u015flayan:<\/strong> PixiJS'in temel kavramlar\u0131n\u0131 \u00f6\u011frenin. Basit bir sahne olu\u015fturun ve sprite'lar\u0131 ekleyin.  Oyun d\u00f6ng\u00fcs\u00fc olu\u015fturmay\u0131 ve basit animasyonlar yapmay\u0131 \u00f6\u011frenin.<\/p>\n<p><strong>Orta Seviye:<\/strong> \u00c7arp\u0131\u015fma alg\u0131lamas\u0131, kamera kontrol\u00fc ve basit oyun mekaniklerini uygulay\u0131n.  Ses efektleri ve m\u00fczik eklemeyi \u00f6\u011frenin.<\/p>\n<p><strong>\u0130leri Seviye:<\/strong> Geli\u015fmi\u015f animasyon teknikleri, performans optimizasyonu,  karma\u015f\u0131k oyun mekanikleri ve  farkl\u0131 oyun t\u00fcrlerinde PixiJS'i kullanmay\u0131 \u00f6\u011frenin.  Farkl\u0131 fizik motorlar\u0131n\u0131 PixiJS ile entegre etmeyi deneyin.<\/p>\n<h2>Vaka Analizi: Bir Platform Oyunu<\/h2>\n<p>PixiJS kullanarak bir platform oyunu geli\u015ftirirken,  \u00e7arp\u0131\u015fma alg\u0131lamas\u0131,  karakter animasyonlar\u0131,  d\u00fczey tasar\u0131m\u0131,  kamera kontrol\u00fc ve performans optimizasyonu gibi konular \u00f6nemli hale gelir.  Karakterin hareketini oyun d\u00f6ng\u00fcs\u00fc i\u00e7inde g\u00fcncellemeli,  \u00e7arp\u0131\u015fmalar\u0131 kontrol etmeli ve  karakterin animasyonlar\u0131n\u0131 do\u011fru zamanda oynatmal\u0131s\u0131n\u0131z.  D\u00fczey tasar\u0131m\u0131,  oyun d\u00fcnyas\u0131n\u0131n karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 etkiler ve dolay\u0131s\u0131yla performans\u0131 etkiler.  Verimli bir d\u00fczey tasar\u0131m\u0131 ile performans\u0131 optimize edebilirsiniz.<\/p>\n<h2>Sonu\u00e7<\/h2>\n<p>PixiJS,  g\u00fc\u00e7l\u00fc \u00f6zellikleri ve  kolay kullan\u0131m\u0131 ile 2B oyun geli\u015ftirme i\u00e7in ideal bir ara\u00e7t\u0131r. Bu makalede,  PixiJS ile temel oyun konseptlerini uygulamaya y\u00f6nelik kapsaml\u0131 bir rehber sunmay\u0131 hedefledik.  Ancak,  PixiJS'in t\u00fcm \u00f6zelliklerini ve potansiyelini ke\u015ffetmek i\u00e7in s\u00fcrekli \u00f6\u011frenme ve uygulama gereklidir.  Daha fazla bilgi i\u00e7in  [https:\/\/fatihsoysal.com](https:\/\/fatihsoysal.com)  inceleyebilirsiniz.<\/p>\n<p><strong>S\u0131k\u00e7a Sorulan Sorular:<\/strong><\/p>\n<p>1. <strong>PixiJS'i hangi taray\u0131c\u0131lar destekliyor?<\/strong>  Modern taray\u0131c\u0131lar\u0131n b\u00fcy\u00fck \u00e7o\u011funlu\u011fu PixiJS'i destekler.<br \/>\n2. <strong>PixiJS'in performans\u0131 nas\u0131l?<\/strong> PixiJS,  canvas'\u0131 kullanarak y\u00fcksek performans sa\u011flar. Ancak,  optimizasyon teknikleri kullanmak \u00f6nemlidir.<br \/>\n3. <strong>PixiJS'i \u00f6\u011frenmek ne kadar zaman al\u0131r?<\/strong>  Bu,  \u00f6nceki programlama deneyiminize ve \u00f6\u011frenme h\u0131z\u0131n\u0131za ba\u011fl\u0131d\u0131r.<br \/>\n4. <strong>PixiJS'in alternatifleri neler?<\/strong> Phaser,  Babylon.js ve Three.js gibi alternatif k\u00fct\u00fcphaneler mevcuttur.<br \/>\n5. <strong>PixiJS'i ticari projelerde kullanabilir miyim?<\/strong> Evet,  PixiJS a\u00e7\u0131k kaynakl\u0131 bir k\u00fct\u00fcphanedir ve ticari projelerde kullan\u0131labilir.<\/p>\n<p>Yazar: Fatih Soysal<\/p>\n","protected":false},"excerpt":{"rendered":"PixiJS ile Oyun Geli\u015ftirmenin Temelleri PixiJS, HTML5 canvas’\u0131 kullanarak performansl\u0131 2B oyunlar ve uygulamalar olu\u015fturman\u0131za olanak sa\u011flayan g\u00fc\u00e7l\u00fc…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-27728","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>PixiJS ile Oyun Geli\u015ftirmenin Temelleri<\/title>\n<meta name=\"description\" content=\"PixiJS, HTML5 canvas'\u0131 kullanarak performansl\u0131 2B oyunlar ve uygulamalar olu\u015fturman\u0131za olanak sa\u011flayan g\u00fc\u00e7l\u00fc bir JavaScript k\u00fct\u00fcphanesidir. Ancak, basit bir animasyon olu\u015fturman\u0131n \u00f6tesinde, karma\u015f\u0131k oyun mekaniklerini uygulamak ve performansl\u0131 bir oyun geli\u015ftirmek i\u00e7in sa\u011flam bir anlay\u0131\u015f gerektirir. Bu makalede, PixiJS'i kullanarak temel oyun konseptlerini nas\u0131l uygulayaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131z, ger\u00e7ek d\u00fcnya \u00f6rnekleriyle destekleyece\u011fiz ve performans optimizasyonlar\u0131na de\u011finece\u011fiz. PixiJS ile oyun geli\u015ftirme yolculu\u011funuza ba\u015flaman\u0131z i\u00e7in kapsaml\u0131 bir rehber sunmay\u0131 hedefliyoruz.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"PixiJS ile Oyun Geli\u015ftirmenin Temelleri\" \/>\n<meta property=\"og:description\" content=\"PixiJS, HTML5 canvas'\u0131 kullanarak performansl\u0131 2B oyunlar ve uygulamalar olu\u015fturman\u0131za olanak sa\u011flayan g\u00fc\u00e7l\u00fc bir JavaScript k\u00fct\u00fcphanesidir. Ancak, basit bir animasyon olu\u015fturman\u0131n \u00f6tesinde, karma\u015f\u0131k oyun mekaniklerini uygulamak ve performansl\u0131 bir oyun geli\u015ftirmek i\u00e7in sa\u011flam bir anlay\u0131\u015f gerektirir. Bu makalede, PixiJS'i kullanarak temel oyun konseptlerini nas\u0131l uygulayaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131z, ger\u00e7ek d\u00fcnya \u00f6rnekleriyle destekleyece\u011fiz ve performans optimizasyonlar\u0131na de\u011finece\u011fiz. PixiJS ile oyun geli\u015ftirme yolculu\u011funuza ba\u015flaman\u0131z i\u00e7in kapsaml\u0131 bir rehber sunmay\u0131 hedefliyoruz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-08-18T01:30:26+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"PixiJS ile Oyun Geli\u015ftirmenin Temelleri\",\"datePublished\":\"2025-08-18T01:30:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/\"},\"wordCount\":1510,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/\",\"name\":\"PixiJS ile Oyun Geli\u015ftirmenin Temelleri\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-08-18T01:30:26+00:00\",\"description\":\"PixiJS, HTML5 canvas'\u0131 kullanarak performansl\u0131 2B oyunlar ve uygulamalar olu\u015fturman\u0131za olanak sa\u011flayan g\u00fc\u00e7l\u00fc bir JavaScript k\u00fct\u00fcphanesidir. Ancak, basit bir animasyon olu\u015fturman\u0131n \u00f6tesinde, karma\u015f\u0131k oyun mekaniklerini uygulamak ve performansl\u0131 bir oyun geli\u015ftirmek i\u00e7in sa\u011flam bir anlay\u0131\u015f gerektirir. Bu makalede, PixiJS'i kullanarak temel oyun konseptlerini nas\u0131l uygulayaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131z, ger\u00e7ek d\u00fcnya \u00f6rnekleriyle destekleyece\u011fiz ve performans optimizasyonlar\u0131na de\u011finece\u011fiz. PixiJS ile oyun geli\u015ftirme yolculu\u011funuza ba\u015flaman\u0131z i\u00e7in kapsaml\u0131 bir rehber sunmay\u0131 hedefliyoruz.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"PixiJS ile Oyun Geli\u015ftirmenin Temelleri\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"PixiJS ile Oyun Geli\u015ftirmenin Temelleri","description":"PixiJS, HTML5 canvas'\u0131 kullanarak performansl\u0131 2B oyunlar ve uygulamalar olu\u015fturman\u0131za olanak sa\u011flayan g\u00fc\u00e7l\u00fc bir JavaScript k\u00fct\u00fcphanesidir. Ancak, basit bir animasyon olu\u015fturman\u0131n \u00f6tesinde, karma\u015f\u0131k oyun mekaniklerini uygulamak ve performansl\u0131 bir oyun geli\u015ftirmek i\u00e7in sa\u011flam bir anlay\u0131\u015f gerektirir. Bu makalede, PixiJS'i kullanarak temel oyun konseptlerini nas\u0131l uygulayaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131z, ger\u00e7ek d\u00fcnya \u00f6rnekleriyle destekleyece\u011fiz ve performans optimizasyonlar\u0131na de\u011finece\u011fiz. PixiJS ile oyun geli\u015ftirme yolculu\u011funuza ba\u015flaman\u0131z i\u00e7in kapsaml\u0131 bir rehber sunmay\u0131 hedefliyoruz.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/","og_locale":"tr_TR","og_type":"article","og_title":"PixiJS ile Oyun Geli\u015ftirmenin Temelleri","og_description":"PixiJS, HTML5 canvas'\u0131 kullanarak performansl\u0131 2B oyunlar ve uygulamalar olu\u015fturman\u0131za olanak sa\u011flayan g\u00fc\u00e7l\u00fc bir JavaScript k\u00fct\u00fcphanesidir. Ancak, basit bir animasyon olu\u015fturman\u0131n \u00f6tesinde, karma\u015f\u0131k oyun mekaniklerini uygulamak ve performansl\u0131 bir oyun geli\u015ftirmek i\u00e7in sa\u011flam bir anlay\u0131\u015f gerektirir. Bu makalede, PixiJS'i kullanarak temel oyun konseptlerini nas\u0131l uygulayaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131z, ger\u00e7ek d\u00fcnya \u00f6rnekleriyle destekleyece\u011fiz ve performans optimizasyonlar\u0131na de\u011finece\u011fiz. PixiJS ile oyun geli\u015ftirme yolculu\u011funuza ba\u015flaman\u0131z i\u00e7in kapsaml\u0131 bir rehber sunmay\u0131 hedefliyoruz.","og_url":"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-08-18T01:30:26+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"8 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"PixiJS ile Oyun Geli\u015ftirmenin Temelleri","datePublished":"2025-08-18T01:30:26+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/"},"wordCount":1510,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/","url":"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/","name":"PixiJS ile Oyun Geli\u015ftirmenin Temelleri","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-08-18T01:30:26+00:00","description":"PixiJS, HTML5 canvas'\u0131 kullanarak performansl\u0131 2B oyunlar ve uygulamalar olu\u015fturman\u0131za olanak sa\u011flayan g\u00fc\u00e7l\u00fc bir JavaScript k\u00fct\u00fcphanesidir. Ancak, basit bir animasyon olu\u015fturman\u0131n \u00f6tesinde, karma\u015f\u0131k oyun mekaniklerini uygulamak ve performansl\u0131 bir oyun geli\u015ftirmek i\u00e7in sa\u011flam bir anlay\u0131\u015f gerektirir. Bu makalede, PixiJS'i kullanarak temel oyun konseptlerini nas\u0131l uygulayaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131z, ger\u00e7ek d\u00fcnya \u00f6rnekleriyle destekleyece\u011fiz ve performans optimizasyonlar\u0131na de\u011finece\u011fiz. PixiJS ile oyun geli\u015ftirme yolculu\u011funuza ba\u015flaman\u0131z i\u00e7in kapsaml\u0131 bir rehber sunmay\u0131 hedefliyoruz.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/pixijs-ile-oyun-gelistirmenin-temelleri\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"PixiJS ile Oyun Geli\u015ftirmenin Temelleri"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/27728","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=27728"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/27728\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=27728"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=27728"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=27728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}