10 Aralık 2013, Salı

Bootcamp 20 - Parçacık Etkisi Sistem Öğretici Animasyon Düşen Kar Tuval

Programda öğrenebilirsiniz bu egzersiz merhaba bayanlar ve baylar füze etkileyen kar yağışı nedeniyle parçacık sistemleri nasıl size fikir vermek Biz küçücük grafik randomize olan sprite vardır kullanın Hareket Eğer parçacık sistemleri yaratabilirsiniz büyük etkisi çeşit oluşturmak için için Duman yangın yağmur animasyonlu yıldız alanları Kar ve diğer şeyler bir ton öğrendik önce iş yerinde kod bitiş ürünü bir göz atalım kar yağışı etkisi ve sizin sisteminizde bu çalıştırdığınızda çok bakacağız pürüzsüz kare hızı benim kaydedildi çünkü ben biraz dalgalı bakmak duyuyorum öğretici bir video size yapıyor ne yapıyoruz gör

ebilirsiniz Diğer küçük küçük şekiller ve böyle bir şekilde programlanmış bir parçacık etkisi aşınma olan çevreler hepimiz bakmak daha yakın biraz daha büyük bize daha yakın gibi görünen ve onların aşağı akan Daha hızlı tamam ben

dahilinde başlıyorum görebilirsiniz Boş siyah kampüs şey henüz üzerinde oluyor ve sadece var hangi animasyon işlevi daha önce derslerde tartışılan Sinema için dışarı yapmak benim karlı sahneden bir arka plan res

“Ders Kodu: http://www.developphp.com/video/JavaScript/Particle-Effect-System-Tutorial-Snow-Falling-Animation JavaScript kullanarak tuval elemanı üzerinde bir parç...”
Adam Khoury

mi ekleyin böylece BG yeni eşittir kaydetmek Görüntü nesne örneği ve sonra BG nokta kaynağı yapacağız Ben kullanmak istediğiniz resmin eşit ve boyutlara sahip 3:50 tamamen aynı boyutlar ile 700 Benim kampüs yüzden şimdi tüm kampüs arka doldukça benim değil çizmek CTX yazarken işlevi animasyon Resim adı veya ihtiyacımız parametreleri yerleştirmek o BG muhtaç denir mind görüntü kaynağı X & Y Stoppard 0 ve sıfır beri Benim görüntüleri aynı tam boyutunu kamp

Bootcamp 20 - Parçacık Etkisi Sistem Öğretici Animasyon Düşen Kar Tuval Resim 1 Bootcamp 20 - Parçacık Etkisi Sistem Öğretici Animasyon Düşen Kar Tuval Resim 2 Bootcamp 20 - Parçacık Etkisi Sistem Öğretici Animasyon Düşen Kar Tuval Resim 3 Bootcamp 20 - Parçacık Etkisi Sistem Öğretici Animasyon Düşen Kar Tuval Resim 4

üsü sol üst başlayan koyacağız olduğunu köşe Bizim iyilik tarayıcıda bu çalıştırırsanız şimdi arka plan görüntüsünü almak bizim karlı sahne ve bu arada sen istersen sadece bu gibi karlı bir sahneyi yapmak için biliyorum Ben Shire gerçekten harika yapmak neden havai fişek öğreticiler var Yıldız ile böyle Noel sahneleri ve malzeme ve sabah aurora ışıkları Santa tüm tür güzel şeyler uçan nasıl öğrenmek istiyorsanız bazı havai fişek öğreticiler kontrol etmek arka plan için bu grafiği oluşturmak veya programlı bir oluşturabilirsiniz b

iraz daha zor kampüsünde grafik Daha hızlı iş akışı kamu sadece bir arka plan yapmak bir grafik editörü gitmek şimdi altında yasal hakkı biz ve kampüs yüksekliği değişkenleri ile bizim kampüs alıyoruz Ben başka bir değişken olarak adlandırılan gevreği koyuyorum Bu ne temsil ve ilk boş bir dizi olduğunu Bir biraz bir yağlama eylemini kullanarak o dizi olacak paket sensin bütün bir demet küçük bir kar tanesi bu temel örneğin yüzden nesneleri sıska kullanım iki fonksiyonları üzerine ben pul eklemek işlev ediyorum ve ben de işlev kar istiyorum Şimdi benim animasyon işlevi doğru iç çamaşırı içine aşağı gitmek ve görüntü çekme Seni yürütmek için kar işlevini çağırın böylece saniyede birçok birçok birçok kez çalıştırmak için gidiyor ve kar fonksiyonu aslında reklam pul işlevini arayacak olan yani ne yapacağım içeriden kar fonksiyonu bunu yürütür her zaman eklenti pul olduğunu reklam tıklama işlevi içinde şimdi işlev Biz ihtiyacımız olacak üç değişken konum ve sonra biz gidiyoruz gevreği diziye yeni bir küçük kar tanesi nesne itme Bizim X çubuğu y olacak ve bar s ve s a aklınıza gelebilecek ya hız ya da boyut olarak söyle bana Her küçük için fuar için çok bakmak istiyorum nasıl bağlıdır Düşecek var tanesi biz kampüs üzerinde başlar emin olmak istiyorum ya da çok top kampüs ve diğer rasgele pozisyonunda geliyor yatay düzlemi boyunca hepimiz düşen onları istemiyorum Onları rastgele fuarlarda düşen istediğiniz aynı maruziyetten yani X matematik nokta eşit olacak rasgele kez kampüs ile ne yapabiliriz biliyor matematik nokta katında o şal olduğunu aşağı yuvarlanır dizüstü kusur yönlü aşağı hiçbir ondalık var ondalık sayı sonuçlanan yuvarlak sayı ve sonra bir artı oldu dışında olmak bir ve ben bize arasında rasgele bir sayı verir Şarap ve bu içinde bizim kampüs kampüs olgular kar tanesi bir de düşecek 700 yani çok az partikül rasgele bir ve kampüs ile arasındaki fuar bir ila yedi yüz ve o olacak y konumu için 0'a eşit veya -10 eşit yapabilirsiniz sen istersen kampüsünde üst sınırına üzerinde biraz başlatmak Ben sadece kameralar üst sınırında tam onları başlayacaklar ediyorum ama bunu -15 -10 gibi istediğiniz ne olursa olsun ayarlayabilirsiniz şimdi eşek için bir rasgele sayı burada bu değeri alabilir Bu durumda, bir ve 700 arasında Ben 1 & 3 arasında rastgele bir sayı yapmak için gidiyorum Bu bana beş kat gibi istediği üç katmanları verir ya da benim parçacık efektleri sisteme daha fazla Benim kar yağışı sistemde bu sayı biraz yükseltebilirsiniz a2 bu koymak tarafından var gibi sadece görünür katmanlara partikül sistemine derinliğe sahip Birisi bu yüzden benim parçacık sistemi vardır üç üzerine koydu derinlik üç katmanları gerçekten orada bir noktalı virgül ihtiyaç Sonunda yapacağız küçük kar tanesi nesnesi itmek ediyoruz gevreği diziye böylece bastırın gevreği olduğunu itme yöntemi için değer biraz olacak Veriler üzerinde Jas nesne ya da bazı çocuklar olarak tanıyabilir aşk İlk özellik, böylece bir ilişkisel dizi X olacak o zaman kolon ve X değeri koymak bir rasgele değişken ex bir ve yedi yüz arasında sayı daha sonra yapacağız Y koymak konum Daha sonra bu küçük nesne kolon ve özellik değeri istediğiniz son özellik Y değişkeni Hadi şimdi hız veya boyutu bakmak istiyorum nasıl bağlı olarak temsil edilir ve tamam şimdi ben sadece bir an bu konuda ne anlama geldiğini her zaman size göstereceğim senin kar fonksiyonu çalıştırmak için çağrılır Eklenti pul fonksiyonu da iterek çalıştırmak için gidiyor yeni bir küçük pul nesne yeni küçük kar tanesi gevreği olduğu bir ve olacak rastgele değerlerin çok üzerinde gidiş içine bu yüzden hepsi şimdi yapmamız gereken tek bir yerde damping değil Bizim kar fonksiyonu içinde biz ayarlamak için gidiyoruz bu yüzden gevreği dizinin üzerinde döngü Bir döngü kadar Bu uzunluk boyunca bu tüm yapacak gevreği dizi çalıştırmak için gidiyor Küçük kar taneleri aslında biz olacağız iyi ekran aşağı animasyon y değerini ayarlayarak onları bu içinde ekran aşağı animasyon yapmak için loop edeceğim ilk şey döngü eğlenceli RGBA bu şekilde stilini doldurmak için ayarlanmış ben olabilir Bunun için bazı donukluk var, beyaz şekil Bazen sen isteyebilirsiniz gibi değil, çünkü ben onları biraz opak yapılan biraz donukluk var senin kar taneleri de yapabilirsiniz bir saydamlık söyledi 1 & 0 arası Yarım şeffaflık var bir .5 koymak Bir sonraki satırda ben TX nokta geçmiş başlamak görmek için gidiyorum biz başlatmak için gidiyoruz çünkü kim başlamak yol yöntemi çalıştırabilirsiniz her küçük için yeni bir ark şekli yolunu başlamak altında böylece kar tanesi, biz CTX nokta yazın yay ve yay oluşturmak için biz X parametresi ihtiyacımız Geniş pozisyon parametresi burada sadece küçük bir not konur Doğru o kadar ark yukarıdaki parametreleri gösterir XY yarıçapı açısı başlangıç ​​olsun o dökülen geliyor ve saat yönünün tersine açı yüzden her tabak erişebilirsiniz döngü II değişken indeksi Böylece biz sadece söylemek fuar bana SA tot gelen parantez içinde I koymak pul söz konusu pul için fuar Belirli bir virgül olacak y pozisyonu için aynı şeyi yapmak Bir pul kaynak nokta neden ve ben de bunun için eklemek değilim artı gevreği hızı s var eşittir Bunu sen orada düşünüyorum hız olduğunu düşünüyorum edebilir hangi katman o kadar ya da bunu gerçekten tüm kadar yol beklemek bu kadar büyüklükte düşünebilirsiniz istiyorum etrafında başınızı sarın Biz randomize eklemek için gidiyoruz nedeni s değeri artı Y pozisyonuna eşit bu yüzden ben de yapacağım şimdi aşağıya doğru animasyonlu hareketi olsun bir kez eklemek olduğunu 0,5 gevreği bu değer ne olursa olsun s nokta almak bkz yarısında bu sayı kesmek için Eğer yarım kesilmiş olacak ve o size neden değer tamamlar Şimdi biz arc kadar yarıçapı ihtiyaç Diğer boyut yüzden bu almaya gidiyoruz olan Burada aynı değer büyüklük kar tanesi sonra menüleri ve S o randomize biridir hatırlıyorum bir ve üç arasında değerler virgül koymak Eğer açı ve açı ve saat yönünün tersine başlattığınızda Başlangıç ​​açısı bitiş açısı olacak 0 olacak merhaba zamanlarda nokta matematik bize verir hangi saat yönünün tersine parametresi için mükemmel bir küçük daire ve Ben şimdi biz bu küçük hayır kaldırabilirsiniz olacak yanlış koymak kulüpler Biz yay kurduktan sonra yani CTX nokta Phil yöntemi yoktur Aslında kampüs doldurmak ark yerleştirmek için Bu noktada raporu bir daha biraz mantığı düşen kar taneleri var hangi bir koşul ifadesi onlar almak için ne varsa kar taneleri kaldırmak için gidiyor Alt% uh dışarı kampüs yeni bir görünür alanı geçmiş bu yüzden yönetilen ve daha sonra onları artık bellek hogging hale yok emin olun biz gevreği tots üzerinde yer çalışmasını sağlamak Herhangi gevreği borç y konumu kampüs yüksekliğinden daha büyük olur böylece pozisyon kampüs yüksekliğinden daha fazla pul dışarı neden olduğunu Bu veba gevreği dizisinde de dışarı dilinmesiyle kaldırılacak gidiyor ve geliştirme amacıyla bu doğru altında sadece gidiyorum Sağ sayfada kar tanesi sayımı bu durum unsuru haline olacak benim gevreği veya içinde kaç kar taneleri takip Ben değeri böyle bir çizgi şey çalıştırabilirsiniz görüyoruz bunu bu değeri görmek istiyorum ve sadece sayfanızda bir durum öğesi aşağı olduğundan emin olmak gerekir kampüs altında bu yüzden durumu fikri ile bir h1 var ben anladım ve tüm bu çalışan ne kadar bir arada var bize bu verir ve ve biz Doğu'da almıyorum konum hiçbir mazeret X Bu Göl dışarı bu pul söylemek zorunda Sadece gevreği dizisi için emin tüm başvuruları yapmak bu konuda üzgünüm diyor orada koymak gibi sevdim pul değil gevreği şimdi biz r şimdi bizim iyilik tarayıcıda bu çalıştırırsanız bu yüzden burada aşağı çalışan küçük bir kar tanesi sayımı var kampüsü terk görebilirsiniz bunlar kaldırılacak alıyoruz ve yeni kar taneleri üstten yağıyor devam ve sadece bu şekilde çalışmasını sağlar Eğer çok daha fazla kar istiyorsanız şimdi gerçekten basit bir şekilde bu kalın yapmak düşüyor Sadece buradan gidebilirsiniz sen diyordun pul eklemek, sadece söyle zaman oynamak için ekleyin ve sonra kar tanelerinin çok daha yüksek bir yoğunluğa sahip görürsünüz Resim dört kez Biz con konuşabildin Bir parçacık sisteminin kar taneleri kadar Ben şimdi Kodama daraltmak tüm Hepimiz kod vurgulamak alayım gürlemesi bu eklenti pul ve kar fonksiyonları çene yukarı biraz içine gitmek bir saat dakika bu animate getirmek Sağ beraberlik görüntüsünün ve kar arasındaki Ben benim kar en geliyor gibi görünmesi için olacak roti kampüs ben bir açıda belki bir kar fırtınası taraftan esiyor var yani Şehir TX nokta döndürme döndürmek için gidiyor kampüs enerji de tüm perspektif 0 o koydu hiçbir rotasyon Ben kazanan kurtarmak benim CTX açmak olsun Ben kullanıyorum beri ve CTX geri perspektif işlemek için gidiyor o yöntemi kampüsünde ben kaydetmek ve geri yüklemek emin olmak istiyorum böylece animasyon yığını ile bu vadede son kat Onlar geliyorlar önce 0 rotasyon bu yaşadığınız aynı etkiyi görmek için düz aşağı şimdi değiştirirseniz olumsuz nokta 4 gibi bir şey ve bunu çalıştırmak sonra ben şimdi var olduğunu göreceksiniz Bir yan hareket köşegen aşağı geliyordu Eğer telafi yapmanız orada olurdu çarpık bir bakış açısı kar o bir top için yaparak bir düşüş daha yapım kampüs içine derin düşmek Onlar kaybolur önce belki başka 200 piksel ve onlar çıkıp emin olmak istiyorum ayrıca kapalı burada çok boş bir nokta var çünkü buraya sola o temelde orada yapabilirsiniz bir dikdörtgen var görebiliyordu gözle görülür kar ben kampüs a döndürülmüş, çünkü bu düşüyor nerede görmek biraz Şimdi Teksas Todd kaydetmek ve geri görmedim eğer sadece etrafında ve çevresinde her şeyi dönüyor gibi bu benzediğini görebilirsiniz ve yaklaşık Bu küçük animasyon işlevi çalışan her zaman çünkü Geçen geri sonra tasarruf değil Kaydetmek emin olun CTX bkz animasyon yığını katman ve koyun bu kadar böyle rotasyon sevgi şeyler yapmak istersen geri nokta 8 o gerçekten dramatik yan etkisi olacak böylece ne geliyor onu kullanmak gibi hiçbir avukat ray görünmesi nasıl biliyor bulunuyor bir açıda sen sadece nerede kar hakkında numaralarını çimdik emin olmak gerekir düşüyor ve sınırları ileri bunu döndürmek için gidiyoruz eğer ve ben sadece bu hızlı Örneğin benim olmayan sıfır bırakacağım Ben değilim, çünkü birazdan burada çok fazla zaman harcamak düz düşen inanıyorum aşağı tamam böylece nasıl bir parçacık efektleri sistemi oluşturmak için gösterir kar yağışı etkisi kampüs elemanı üzerinde javascript kullanarak.

Açıklama

Ders Kodu: http://www.developphp.com/video/JavaScript/Particle-Effect-System-Tutorial-Snow-Falling-Animation JavaScript kullanarak tuval elemanı üzerinde bir parçacık etkisi sistemini Öğrenmek için program. Biz randomize değerler verilmiştir birçok minik sprite kullanarak bir kar yağışı parçacık etkisi göstermektedir. Herhangi bir kar tanesi tuval altındaki geçmiş seyahatler biz gevreği nesne diziden çıkarın ve tuvalin üst daha kar taneleri dökme devam ediyor. Biz de kar animasyona rüzgar şişmiş efekti eklemek için kar yağışı bir rotasyon nasıl ayarlanacağını göstermektedir.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

Adam Khoury

Adam Khoury

Profesyonel bir online bedava gibi kod ve tasarım öğrenin. JavaScript, PHP, SQL, HTML, CSS, ActionScript ve daha fazlası gibi usta geliştirme teknolojileri. Tüm videoları http://www.developphp.com daha iyi organize olan

YORUMLAR



9.7/10

  • 111
    Olumlu
  • 3
    Olumsuz
  • 23
    Yorum
  • 14530
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • Jesse Pimenta

    Jesse Piment

    5 EKİM 2011
  • Joseph Hayhoe

    Joseph Hayho

    20 Mayıs 2010
  • kimberly p

    kimberly p

    23 Ocak 2010

ANKET



Bu sayfa işinize yaradı mı?