Frame Trimming - HTML5 Game DevelopmentYouTube↗  IA↗(long shot)
Education  6.4K views 9 likes 0 dislikes   23 Feb 2015
Udacity 651K subscribers United States YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
Now it's worth putting out that this magical program, Texture Packer, provides a
Texture Packerという便利なソフトを紹介します
nice little output option that you can see right here, called trim. What this
Trimと呼ばれる出力オプションが表示されていますね
option will do, is that for each image, it'll find out the true boundaries for
これは画像をトリミングできる機能です
it. So let's say an artist gives you a texture but only puts pixels in the
グラフィック担当者がテクスチャの[br]中央部分しか使っていない場合
center part of it. The needed pixels of this image only occupy a sub-portion of
この画像に必要なピクセルは提供された画像の
the physical space that's been provided. As such we get a lot of wasted pixels.
ほんの一部なので[br]ピクセルをムダにしてしまいます
Texture packer provides this trim option that will go through and remove
Texture packerのTrimを使うと[br]透明で余分なピクセルを
unneeded and unused pixels, mostly transparent, from all of the sprites that are
スプライトから取り除いてアトラス画像を調整します
given to an atlas. The results are actually pretty significant. You can see that
この効果は見て分かるとおり絶大です
the size of the atlas that contains the blank unused pixels is significantly
アトラス画像内の未使用のピクセルが
larger than the one that trims properly. Now it's worth pointing out however,
Trimによって大幅に減りました　注意点があります
that when you use this option the format of the data in your output JSON, from
Texture Packerが出力したJSONデータは
Texture Packer is going to change a little bit. So previously the frame
trimmedの値が追加されています
parameters width and height values matched the same as the sort size. So if your
前にframeの幅や高さは[br]sourceSizeと同じだと説明しました
input image was 128 by 128, the size in your texture atlas was going to be 128,
幅と高さが128×128は[br]アトラス画像内のサイズと同じなので
128. And of course the trimmed value is false. Once you start with trimmed equal
この場合trimmedの値はfalseです[br]Trimオプションを有効にすると
to true, you'll notice that the frame width and height represents the true
入力したテクスチャの真の境界線として[br]frameの幅と高さが
boundaries of the used pixels in the input texture. It no longer matches the size of the input texture exactly.
認識されるので[br]アトラス画像内の正確なサイズとは合わなくなります
Similar videos:

Parsing Tiled Output - HTML5 Game Development
Udacity
3.5K views 2 likes 0 dislikes 23 Feb 2015100% match

ViewRect - HTML5 Game Development
Udacity
3.2K views 3 likes 0 dislikes 23 Feb 2015100% match

Your first canvas - HTML5 Game Development
Udacity
39K views 64 likes 6 dislikes 23 Feb 2015100% match

Loading images - HTML5 Game Development
Udacity
25.1K views 26 likes 2 dislikes 23 Feb 2015100% match

Loading images - HTML5 Game Development
Udacity
30.7K views 69 likes 1 dislikes 23 Feb 2015100% match

Tiled - HTML5 Game Development
Udacity
7.5K views 12 likes 0 dislikes 23 Feb 2015100% match

Parsing Texturepacker Output - HTML5 Game Development
Udacity
11.9K views 10 likes 4 dislikes 23 Feb 2015100% match

Loading Map Data - HTML5 Game Development
Udacity
6.2K views 5 likes 0 dislikes 23 Feb 2015100% match

Tileset Array - HTML5 Game Development
Udacity
3.4K views 1 likes 2 dislikes 23 Feb 2015100% match

Rendering Texturepacker Output - HTML5 Game Development
Udacity
6.7K views 11 likes 0 dislikes 23 Feb 2015100% match

Course Introduction - HTML5 Game Development
Udacity
95.5K views 413 likes 14 dislikes 23 Feb 2015100% match

Rendering Texturepacker Output - HTML5 Game Development
Udacity
8.3K views 14 likes 2 dislikes 23 Feb 2015100% match

Inspecting JSON - HTML5 Game Development
Udacity
3K views 8 likes 4 dislikes 23 Feb 2015100% match

Storytime - Web Developers and Tools - HTML5 Game Development
Udacity
5.6K views 13 likes 0 dislikes 23 Feb 2015100% match

Animation - HTML5 Game Development
Udacity
17.6K views 43 likes 3 dislikes 23 Feb 2015100% match

Drawing the Map - HTML5 Game Development
Udacity
8.7K views 13 likes 2 dislikes 23 Feb 2015100% match

Tileset Array - HTML5 Game Development
Udacity
3.1K views 3 likes 1 dislikes 23 Feb 2015100% match

Drawing images - HTML5 Game Development
Udacity
25.2K views 35 likes 2 dislikes 23 Feb 2015100% match

Introduction - HTML5 Game Development
Udacity
42.2K views 76 likes 4 dislikes 23 Feb 2015100% match

Image formats - HTML5 Game Development
Udacity
17.8K views 43 likes 1 dislikes 23 Feb 2015100% match

Specifying the Contact Listener - HTML5 Game Development
Udacity
660 views 2 likes 0 dislikes 23 Feb 2015100% match

Texturepacker - HTML5 Game Development
Udacity
16K views 39 likes 0 dislikes 23 Feb 2015100% match

Introduction - HTML5 Game Development
Udacity
12.3K views 15 likes 1 dislikes 23 Feb 2015100% match

Loading Tileset Data - HTML5 Game Development
Udacity
3.4K views 5 likes 0 dislikes 23 Feb 2015100% match

Animation - HTML5 Game Development
Udacity
18.3K views 33 likes 3 dislikes 23 Feb 2015100% match

DrawImage From Atlas - HTML5 Game Development
Udacity
9.1K views 15 likes 4 dislikes 23 Feb 2015100% match

Coordinate systems - HTML5 Game Development
Udacity
20K views 27 likes 1 dislikes 23 Feb 2015100% match

Deep Dive Into Map Data - HTML5 Game Development
Udacity
4.6K views 6 likes 0 dislikes 23 Feb 2015100% match

Atlases vs Spritesheets - HTML5 Game Development
Udacity
11.3K views 21 likes 2 dislikes 23 Feb 201562% match

Drawing Images - HTML5 Game Development
Udacity
24.3K views 30 likes 0 dislikes 23 Feb 201562% match


Settings Privacy About Contact Donate