Pixel Editor

ஸ்பிரைட்டுகளும் டைல்மேப்புகளும், பிக்சல் வாரியாக: ஃபிரேம்கள், ஆனியன் ஸ்கின்னிங், பேலட்டுகள், டைல் வாரியான மோதல்கள், நார்மல் மேப்புகள், 9-ஸ்லைஸ், மற்றும் GIF அல்லது Aseprite ஏற்றுமதி.

ஒரே வரியில்#

32×32-இல் எவ்வளவு வசதியாக வேலை செய்ய முடியுமோ அதே வசதியில் 1024×1024-இலும் வேலை செய்யும் ஒரு ஸ்பிரைட், டைல்மேப் எடிட்டர், பேலட்டுகளைப் புரிந்துகொள்ளும் அனிமேஷன் ஃபிரேம்களுடனும் வண்ணக் கருவிகளுடனும்.

தளவமைப்பு#

The Pixel Editor: tool rail, canvas, layers, frame timeline and palette bar

Menu barFile · Edit · View · Plugins
Mode tabsSprite மற்றும் Tilemap
ToolbarNew, undo/redo, canvas அளவு, crop, layer flatten, flip horizontal மற்றும் vertical, grid, import, export, Save
Options rowbrush அளவு, brush shape, opacity, split view, மற்றும் ப்ரீசெட்கள்
இடது ரெயில்pencil, shapes, fill, gradient, text, selection, eyedropper, colour pair, palette
மையம்தற்போதைய கருவி மற்றும் வண்ணங்களின் ஒரு சிறிய read-out உடன் கேன்வாஸ், மற்றும் 1:1-இல் ஒரு Preview
வலதுLayers, பின்னர் Effects, Normal map, Reference மற்றும் Modes
கீழ்frame timeline, பின்னர் palette bar
Status barcanvas அளவு, செயலில் உள்ள layer, zoom

இங்கு நீங்கள் செய்வது#

வரையுங்கள்#

The pixel canvas at working zoom, with the grid

Space + drag pan செய்கிறது, scroll wheel zoom செய்கிறது, 0 பார்வையை மீட்டமைக்கிறது. Brush-க்கு ஒரு அளவும் ஒரு shape-உம் (இயல்பாக square) ஒரு opacity-உம் உள்ளன. Preview பேனல் நீங்கள் zoom செய்திருக்கும்போதே ஸ்பிரைட்டை 1:1-இல் காட்டுகிறது, ஒரு பிக்சல் ஸ்பிரைட்டின் ஒரே நேர்மையான காட்சி இதுதான்.

Layers#

பெயரிடப்பட்ட, மறு-வரிசைப்படுத்தக்கூடிய, ஒவ்வொன்றுக்கும் ஒரு blend mode மற்றும் ஒரு opacity-உடன், மேலும் ஒரு வண்ணக் குறியீடும், அவை நிறைய இருக்கும்போது ஒரு filter box-உம். Effects அழிவற்ற முறையில் பயன்படுத்தப்படுகிறது.

அனிமேட் செய்யுங்கள்#

கீழே உள்ள timeline ஃபிரேம்களின் ஒரு ஸ்ட்ரிப். சேர், நகல் எடு, நீக்கு, மறு-வரிசைப்படுத்து; ஒவ்வொரு ஃபிரேமுக்கும் ஒரு மில்லிசெகண்டுகளில் கால அளவை அமை; முன்னோக்கியோ, பின்னோக்கியோ அல்லது ping-pong ஆகவோ இயக்கு. அது எவ்வளவாகக் கூடுகிறது என்பதை read-out சொல்கிறது, 1 frame • 100 ms • ~10 fps.

Onion தற்போதைய ஃபிரேமுக்குக் கீழே அருகிலுள்ள ஃபிரேம்களை மங்கலாகக் காட்டுகிறது, ஒரு நடை சுழற்சி வழுவாமல் வைத்திருப்பது இப்படித்தான்.

வண்ணம்#

The Pixel toolbar: the drawing tools and the current colour

The palette bar: the working palette, recents, shades, harmony and a ramp

Palette bar தான் கற்றுக்கொள்வதற்குப் பலன் தரும் பகுதி:

Paletteவேலை செய்யும் தொகுப்பு, ஒரு எண்ணிக்கையுடனும் + Add-உடனும்
Recentநீங்கள் அண்மையில் தேர்ந்தெடுத்தவை
Shadesதற்போதைய வண்ணத்திலிருந்து உருவாக்கப்பட்ட ஒரு light-to-dark ramp
Harmonycomplementary, triadic மற்றும் analogous பரிந்துரைகள்
Rampநீங்கள் கட்டி வைத்திருக்கும் ஒரு ramp

தற்போதைய வண்ணம் ஹெக்ஸ் ஆக திருத்தக்கூடியது.

Tilemaps#

Tilemap தாவல் ஒரு ஸ்பிரைட்டை வரைவதிலிருந்து அதை டைல்களாக அமைப்பதற்கு மாறுகிறது. முடிவு Engine-க்குச் செல்கிறது, அதற்கு லெவலுக்கே சொந்தமான ஒரு தனி டைல்மேப் எடிட்டர் உள்ளது.

Normal maps#

Normal map பிரிவு ஸ்பிரைட்டிலிருந்து ஒரு normal map-ஐ பெறுகிறது, அதனால் ஒரு தட்டையாக இருப்பதற்குப் பதிலாக 2D ஸ்பிரைட்டை Engine-இல் ஒளியூட்ட முடியும்.

Reference#

Reference பிரிவில் ஒரு படத்தைப் போடுங்கள், நீங்கள் வரையும்போது அது கேன்வாஸுக்குப் பின்னால் அமர்ந்திருக்கும்.

பேனல்கள்#

ஒன்பது, மேலும் கடைசி நான்கு ஒரு ஸ்பிரைட்டை ஒரு விளையாட்டு அசெட்டாக மாற்றுபவை:

Tool Paletteகருவிகள்
Layersஸ்டேக்
Timelineஅனிமேஷன் ஃபிரேம்கள்
Referenceகேன்வாஸுக்குப் பின்னால் ஒரு படம்
Effectsஒரு layer மீது அழிவற்ற இஃபெக்ட்கள்
Tilesetதேர்ந்தெடுக்கப்பட்ட டைல் அளவில் கேன்வாஸிலிருந்து ஒரு tileset உருவாக்கு
Tilemapஅந்த டைல்களை ஒரு மேப்பாக அமை
Collisionsடைல் வாரியான collision வடிவங்கள்
Normal Mapஒரு normal map-ஐ பெற்று திருத்து

Tilesets மற்றும் tilemaps#

Tileset பேனல் கேன்வாஸை டைல்களாக வெட்டுகிறது (இயல்பாக 16 px); Tilemap பேனல் அவற்றை layer-களுடன் ஒரு மேப்பாக அமைத்து, அதை மறுஅளவிடவும் முடியும்.

Tilemap-கள் .tilemap ஆக சேமிக்கின்றன, இரு வழிகளில் ஏற்றுமதி ஆகின்றன: ஒரே கோப்பாக, அல்லது தனித்தனியாக: மேப் JSON ஆகவும் ஒவ்வொரு tileset-உம் அதன் சொந்த படமாகவும், ஒரு வெளி இன்ஜின் பொதுவாக விரும்புவது இதுதான்.

Collisions#

ஒவ்வொரு டைலும் ஒரு collision வடிவத்தை சுமக்கிறது, குறியீட்டில் அறிவிக்கப்படுவதற்குப் பதிலாக tileset-இன் மேல் வரையப்பட்டது:

Fullமுழு டைலும் மோதுகிறது
Noneகடந்து செல்லக்கூடியது
Top / Bottom / Left / Right halfபகுதி மோதல்
Slope up / Slope downசாய்ந்த மோதல்

Show Collisions அவற்றை மேலெழுதுகிறது, மேலும் முழு தொகுப்பும் JSON ஆக ஏற்றுமதியாகிறது. இதை இங்கே செய்வது, வீரர் எதன் மேல் நடக்க முடியும் என்பதை ஏற்கனவே அறிந்த ஒரு டைல்மேப்பை Engine பெறுகிறது என்று பொருள்.

Normal maps#

Generate Normal Map ஸ்பிரைட்டிலிருந்து ஒரு strength-உடன் ஒன்றைப் பெறுகிறது; பின்னர் Normal Map Editor நார்மல் திசையை கையால் வரைய அனுமதிக்கிறது (P), தானியங்கி பாஸ் தவறாகச் செய்யும் இடங்களை சரிசெய்வதற்கான ஒரே வழி இது.

9-slice மற்றும் pivot#

9-Slice guides ஒரு UI ஸ்பிரைட்டின் நீட்டக்கூடிய பகுதிகளைக் குறிக்கின்றன, மேலும் Pivot / Origin ஸ்பிரைட் சுழலும், நங்கூரமிடும் புள்ளியை அமைக்கிறது. இரண்டும் ஸ்பிரைட்டுடன் Engine-க்குள் பயணிக்கின்றன.

சமச்சீர்மை#

Mirror X மற்றும் Mirror Y ஒரே நேரத்தில் இரு பக்கங்களையும் வரைகின்றன: horizontal, vertical, இரண்டும், அல்லது radial.

வண்ண ramp-களும் palette-களும்#

Color Ramp modal ஒரு ramp-ஐ கண்ணளவில் அல்லாமல் சரியாக உருவாக்குகிறது, மேலும் palette-கள் .gpl (பெரும்பாலான pixel-art palette-கள் வரும் GIMP palette வடிவம்) இலிருந்து இறக்குமதியாகின்றன.

ஏற்றுமதி செய்தல்#

வடிவம்எதற்கு
PNGஒரு ஃபிரேம்
GIFஒரு அனிமேஷன், எல்லா இடங்களிலும்
APNGஉண்மையான ஆல்ஃபாவுடன் ஒரு அனிமேஷன்
Asepriteபின்னால் Aseprite-க்கு, layer-கள் அப்படியே
Atlas / sprite sheetஒரு கேம் இன்ஜின்
.tilemapமேப், ஒன்றாக அல்லது JSON + படங்களாகப் பிரிக்கப்பட்டு

அது படிக்கும் மற்றும் எழுதும் கோப்புகள்#

நேட்டிவ் வடிவம்.editor
இறக்குமதிகள்.png, .jpg, .aseprite, .tilemap, .gpl (palettes)
ஏற்றுமதிகள்.png, .gif, APNG, .aseprite, sprite atlas, .tilemap (ஒன்றாக அல்லது பிரிக்கப்பட்டு), collision JSON

மற்ற ஸ்டுடியோக்களுக்கு வேலையை அனுப்புதல்#

உருவாக்குகிறது பிக்சல் ஆர்ட். ஏற்கிறது பிக்சல் ஆர்ட்டையும் படங்களையும்.

பிக்சல் ஆர்ட் Inkwell, Composer, Animator, Matter மற்றும் Engine ஆல் ஏற்கப்படுகிறது: ஒரு sprite sheet ஒரு கோப்பு வழியாகச் சுற்றிச் செல்லாமலேயே நேரடியாக ஒரு விளையாட்டுக்குள் செல்ல முடியும்.

வேறொருவருடன் வேலை செய்தல்#

Pixel Editor செயல்பாடு வாரியாக ஒத்திசைக்கிறது: scene தரவு, அசெட்டுகள், அனிமேஷன்கள் மற்றும் ஸ்கிரிப்ட்கள்.

வரம்புகள் மற்றும் பொதுவான பிரச்சினைகள்#

  • Zoom என்பது தெளிவுத்திறன் அல்ல. Status bar உண்மையான canvas அளவைக் காட்டுகிறது; Preview அதை 1:1-இல் காட்டுகிறது.
  • ஒரு மென்மையான brush ஒரு பிக்சல் brush அல்ல. 100%-க்குக் கீழே உள்ள opacity உங்கள் விளிம்புகளை anti-alias செய்யும், ஒரு ஸ்பிரைட்டில் பொதுவாக நீங்கள் விரும்புவது அதுவல்ல.
  • Frame கால அளவு ஒரு ஃபிரேமுக்கு, ஒரு அனிமேஷனுக்கு அல்ல. 100 ms வீதம் ஒரு 12-ஃபிரேம் சுழற்சி மற்றவை என்ன செய்தாலும் ~10 fps-இல் இயங்கும்.