หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

http://zk-phi.github.io/megamoji

สำหรับนักพัฒนา

โปรดโปรโมตถ้าคุณใช้แนวคิดใหม่หรืออนิเมะอึใหม่!

สภาพแวดล้อมการพัฒนา

เซิร์ฟเวอร์ Dev

 การติดตั้ง NPM
NPM Run Start

เซิร์ฟเวอร์จะเริ่มต้นขึ้น คุณสามารถตรวจสอบได้ที่ https: // localhost: 8080

มันจะสะท้อนทันทีเมื่อคุณจรจัดกับซอส

หากคุณกำลังจะติดตั้ง NPM บน M1 Mac ของคุณ

อาจเป็นเพราะแพ็คเกจ node-canvas ไม่รองรับ ARM64

ลองแทรกโหนดเช่น x86_64

ตัวอย่างการติดตั้งด้วย asdf :

 Arch -x86_64 ASDF ติดตั้ง nodejs <Sersion>

สร้าง

 NPM Run Build

./dist จะถูกสร้างขึ้นเมื่อคุณสร้างมันขึ้นมา คุณสามารถปรับใช้เป็นไซต์คงที่ตามที่เป็นอยู่

ผ้าสำลี

 NPM Run Lint

ตรวจจับการสั่นสะเทือนโดยอัตโนมัติและการเปลี่ยนแปลงอื่น ๆ ในรูปแบบการเข้ารหัส

 NPM Run Fix

ส่วนใหญ่สามารถแก้ไขได้โดยอัตโนมัติ

ขอแนะนำให้ทำงานก่อนที่จะส่งแบบดึง

เวิร์กโฟลว์

มันถูกออกแบบมาเพื่อสร้างและผ้าสำลีโดยอัตโนมัติโดยใช้การกระทำของ GitHub

  • ผ้าสำลี… NPM Run Lint เมื่อกด Master
  • LINT-PR …เมื่อสร้างคำขอดึงให้เปลี่ยน ESLINT และ Stylelint ผ่านรีวิวด็อก
  • สร้าง ... เมื่อฉันกด Master, NPM Run Lint และ Push ไปยัง GH-PAGES

เมื่อสร้างให้ตั้งค่า ROLLBAR_TOKEN หรือ GA4_TOKEN ในความลับของ GitHub เพื่ออนุญาตการรวบรวมข้อผิดพลาดและการวิเคราะห์ผู้ใช้

การกำหนดค่าไดเรกทอรี

  • src/
    • animations/ …มีการใช้งานแอนิเมชั่นรายบุคคล
    • components/ ... มีชิ้นส่วน UI
    • constants/ …มีค่าคงที่
    • effects/ ... มีการใช้งานเอฟเฟกต์
    • filters/ ... มีการใช้งานตัวกรอง
    • fonts/ …รวมตัวอักษรเว็บ
    • parts/ ... มีรูปภาพของชิ้นส่วนที่ใช้ใน "เลือกจากชิ้นส่วน"
    • samples/ ... มีตัวอย่างที่ใช้ในการสอน
    • shaders/ …มี shaders ชิ้นส่วนที่จะใช้ในเอฟเฟกต์ WebGL
    • utils/ …มีฟังก์ชั่นที่เป็นประโยชน์
    • webgleffects/ …มีการใช้งานเอฟเฟกต์ WebGL
    • megamoji.js …จุดเข้า
    • types.js ... มีคำจำกัดความประเภทเช่นเอฟเฟกต์
  • static/ … html ฯลฯ มีสิ่งที่สามารถส่งมอบได้ตามที่เป็นอยู่โดยไม่มีการสร้างใด ๆ
  • resources/ ... มีรายการเบ็ดเตล็ดที่ไม่เกี่ยวข้องกับแอพเช่นรูปภาพที่ใช้ในเอกสาร

การเพิ่มตัวกรอง

คุณสามารถค้นหารายการใน src/constants/filters.js

เอนทิตีตัวกรองเป็นฟังก์ชั่นการโต้แย้งแบบเดียว

HTMLImageElement จะถูกส่งผ่านดังนั้นการประมวลผลภาพจะดำเนินการตามความเหมาะสมและภาพที่เสร็จแล้วจะถูกส่งกลับเป็น bloburl

การเพิ่มเอฟเฟกต์

คุณสามารถค้นหารายการใน src/constants/effects.js

เอนทิตีของเอฟเฟกต์เป็นฟังก์ชั่น 5 ข้อต่อ:

keyframe
ภาพเคลื่อนไหวดำเนินไปอย่างไร (หมายเลขลอยตัวระหว่าง 0.0 ถึง 1.0)
ctx
วัตถุใน CanvasrenderingContext2d
cellWidth
ความกว้างของผ้าใบ
cellHeight
ความสูงของผ้าใบ

หลังจากเต็มพื้นหลัง ctx ก่อนที่จะผ่าน drawImage มาดังนั้นตั้งค่าการเปลี่ยนแปลงที่คุณเลือกเช่น transform filter และ clip เนื่องจากมีการใช้เอฟเฟกต์หลายอย่างร่วมกันหลีกเลี่ยงวิธีการโทรที่แทนที่เอฟเฟกต์ที่เพิ่มขึ้นโดยเอฟเฟกต์อื่น ๆ เช่น setTransform

นอกจากนี้ตรวจสอบให้แน่ใจว่าได้ปรับภาพที่มีภาพที่มีความหมายอย่างน้อยในเฟรมแรกเพื่อให้อิโมจิที่สร้างขึ้นนั้นสะดวกสบายที่จะใช้แม้ในสภาพแวดล้อมที่แอนิเมชั่นปิดใช้งาน หากคุณต้องการตรวจสอบว่าการแสดงผลจะแสดงในสภาพแวดล้อมที่มีการปิดใช้งานแอนิเมชั่นให้เลือก "แก้ไขเฟรมแรก" ภายใต้ "เพิ่มเอฟเฟกต์" ภายใต้ "โหมด crafter> ผ่อนคลาย"

canvas ที่ข้ามมีขนาดใหญ่กว่าสี่เท่า (สองเท่าของความยาวและความกว้าง) ของสิ่งที่จะกลายเป็นอีโมจิในที่สุด

 -
- - <- มาร์จิ้นสำหรับ Cellheight / 4 | -
- - - - <- พื้นที่วาดภาพสำหรับ cellheight / 2 | - - - - ส่วนที่จะถูกใช้ในอิโมจิ | -
- - <-มาร์จิ้นใน Cellheight / 4+------------+

ตัวอย่างเช่นหากคุณต้องการเลื่อนอิโมจิขึ้นมาเพียง translate cellHeight / 2 (ไม่ใช่ cellHeight ) ก็เพียงพอแล้ว

หากคุณต้องการดูว่าผืนผ้าใบมีลักษณะอย่างไรก่อนที่จะตัดขอบระยะขอบให้เปิดใช้งาน "อย่าตัดขอบ" ใน "โหมดช่างฝีมือ> โหมดนักพัฒนา" ภายใต้ "เพิ่มเอฟเฟกต์"

-

ข้อมูลจำเพาะพื้นหลัง:

เมื่อผลกระทบเช่นびよんびよん(โดยเฉพาะการหดตัว) และการหมุนอาจรวมกันคุณอาจจะเห็นระยะขอบใด ๆ ที่อยู่นอกช่วงที่ใช้เป็นอิโมจิเดิม แม้ในกรณีเช่นนี้เพื่อให้แอนิเมชั่นดูสวยงามอนิเมชั่นจะแสดงผลนอกช่วงที่จะถูกใช้สำหรับอิโมจิในที่สุดและจากนั้นระยะขอบจะถูกตัดในภายหลัง

มันยากที่จะเข้าใจดังนั้นฉันหวังว่าจะทำอะไรบางอย่างเกี่ยวกับเรื่องนี้ แต่ฉันไม่ได้คิดถึงวิธีที่ดี

การเพิ่มภาพเคลื่อนไหว

คุณสามารถค้นหารายการใน src/constants/animations.js

เอนทิตีแอนิเมชันคือ 5 ฟังก์ชั่นอาร์กิวเมนต์:

keyframe
(คล้ายกับ effect_ )
ctx
(คล้ายกับ effect_ )
image
ภาพต้นฉบับที่คุณต้องการเคลื่อนไหว
offsetH
พื้นที่ที่คุณต้องการวาดภาพต้นฉบับ (ขอบซ้าย)
offsetV
พื้นที่ของภาพต้นฉบับที่คุณต้องการวาด (ขอบด้านบน)
width
ช่วง (ความกว้าง) ของภาพต้นฉบับที่คุณต้องการวาด
height
ช่วง (ความสูง) ของภาพต้นฉบับที่คุณต้องการวาด
cellWidth
(คล้ายกับ effect_ )
cellHeight
(คล้ายกับ effect_ )

แอนิเมชั่นแสดง image ภาพสำหรับผืนผ้าใบที่ผ่านการใช้ ctx.drawImage หรือคล้ายกัน เนื่องจากช่วงการเพาะปลูกผู้ใช้ผ่านไปเป็น offsetH, offsetV, width, height , และดังนั้นการแสดงผลของผ้าใบจึงมักจะเป็นดังต่อไปนี้ (เป็นไปได้ที่จะไม่กล้าทำเช่นนั้นเป็นส่วนหนึ่งของเอฟเฟกต์): 

 ctx . drawImage ( image , offsetH , offsetV , width , height , ... ) ;

ผืนผ้าใบที่ส่งผ่านไปยังแอนิเมชั่นเช่นเดียวกับเอฟเฟกต์นั้นมีขนาดใหญ่กว่าแผ่นที่มีการส่งออกเป็นอีโมจิสี่เท่า

 -
- - <- มาร์จิ้นสำหรับ Cellheight / 4 | -
- - - - <- พื้นที่วาดภาพสำหรับ cellheight / 2 | - - - - ส่วนที่จะถูกใช้ในอิโมจิ | -
- - <-มาร์จิ้นใน Cellheight / 4+------------+

ตัวอย่างเช่นการใช้แอนิเมชั่น NO-NO (เพียงแค่วาดอีโมจิที่ขนาดปกติตรงกลางของหน้าจอ) จะมีลักษณะเช่นนี้: 

 ctx . drawImage ( ... , cellWidth / 4 , cellHeight / 4 , cellWidth / 2 , cellHeight / 2 ) ;

เมื่อเปรียบเทียบกับเอฟเฟกต์วิธีการเรนเดอร์มีความยืดหยุ่นมากขึ้นในการที่จะช่วยให้คุณใช้วิธีการเรนเดอร์ได้อย่างอิสระ (เช่นการแสดงผลสองชั้นสามารถนำไปใช้เพื่อใช้ผลกระทบที่ไม่สามารถทำได้ด้วยการแปลงอย่างง่าย) อย่างไรก็ตามมันจะไม่สามารถรวมเข้ากับภาพเคลื่อนไหวอื่น ๆ ได้อีกต่อไปดังนั้นโปรดพิจารณาอย่างน้อยหนึ่งครั้งว่าคุณไม่สามารถใช้เอฟเฟกต์เดียวกันกับเอฟเฟกต์ได้หรือไม่

เช่นเดียวกับเอฟเฟกต์ให้แน่ใจว่าคุณสามารถใช้อิโมจิที่คุณสร้างได้อย่างสะดวกสบายแม้ในสภาพแวดล้อมที่มีการปิดใช้งานภาพเคลื่อนไหว

การเพิ่มเอฟเฟกต์ WebGL

คุณสามารถค้นหารายการใน src/constants/webgleffects.js

เอฟเฟกต์ที่ไม่สามารถนำไปใช้งานได้โดยใช้ฟังก์ชั่นการแปลงพื้นฐานของผืนผ้าใบเท่านั้นที่สามารถนำไปใช้ใน WebGL

เอนทิตีเอฟเฟกต์ WebGL เป็นฟังก์ชั่นสี่ข้อโต้แย้ง:

  • keyframe
  • cellWidth
  • cellHeight

โหลด shader และส่งคืนด้วยพารามิเตอร์ที่เหมาะสม 

 // 例
import { webglLoadEffectShader , webglSetVec2 } from '../utils/webgl' ;
import fooShader from '../shaders/foo' ;
function webglZoom ( keyframe , _w , _h , args ) {
  const program = webglLoadEffectShader ( fooShader ) ;
  webglSetVec2 ( program , 'center' , keyframe , 0.5 ) ;
  return program ;
}

shaders สามารถพบได้ใน src/shaders (คุณสามารถเพิ่มได้)

หากคุณต้องการเพิ่มมันมีฟังก์ชั่น wrapper ที่เรียกว่า webglEffectShader ดังนั้นโปรดโยนรหัส GLSL ดิบลงไป 

 const myShader = webglEffectShader ( `
  <GLSL code>
` ) ;

ฟังก์ชั่นที่ใช้กันทั่วไป (เช่นหมายเลขหลอกแบบสุ่ม) สามารถพบได้ใน src/shaders/utils

ตามปกติรูปภาพจะแสดงผลในขนาด 4x

นอกจากนี้ตามปกติโปรดระวังเพื่อให้แน่ใจว่าอิโมจิที่สร้างขึ้นนั้นสะดวกสบายที่จะใช้แม้ในสภาพแวดล้อมที่มีการปิดใช้งานภาพเคลื่อนไหว

การเพิ่มแบบอักษร

ระวังเพราะมันจะโหลดช้า

ไม่รวมฟอนต์ต่อไปนี้:

  • ไม่สามารถอ่านได้เมื่อลดขนาดไอคอน
  • มีการบันทึกคันจิเพียงไม่กี่ตัว
  • สถานการณ์ที่คุณต้องการใช้การทับซ้อนกับแบบอักษรอื่น ๆ

โปรดตรวจสอบใบอนุญาตแบบอักษรอย่างระมัดระวัง (สามารถแจกจ่ายซ้ำได้หรือไม่สามารถแก้ไขได้ (woff)?) จากนั้นวางแบบอักษรที่กลายเป็น woff ใน src/fonts

โดยหลักการแล้วฟอนต์ที่ได้รับอนุญาตภายใต้ใบอนุญาต Font SIL Open ไม่ได้ใช้ใบอนุญาตใด ๆ ที่มี "ด้วยชื่อตัวอักษรที่สงวนไว้ ... " (เนื่องจากเป็นความยุ่งยากในการเปลี่ยนชื่อตัวอักษรเมื่อทำ woff)

ในการสร้าง WOFF ฉันใช้สิ่งนี้: https://github.com/zk-phi/woff2sfnt-sfnt2woff

 โหนด sfnt2woff.js hoge.ttf hoge.woff

เมื่อคุณเพิ่มแบบอักษรให้อัปเดตไฟล์สองไฟล์

  • src/constants/fonts.ts
  • LICENSE.markdown

แทนที่จะนำชื่อผู้แต่งเมื่อเขียนใบอนุญาตโปรดค้นหาชื่ออย่างเป็นทางการและคัดลอกให้มากที่สุด

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด