• Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
2
Question by Superdsgross · Apr 18, 2019 at 08:09 PM · 2d sprites

How to interpret image data

Hi all! Essentially what I'm trying to do is take an image file, import it into Unity and have unity scan the image for shapes (or black lines that make up shapes) and convert each shape into verticies. I've found tutorials on creating 2d mesh's from vertices but I'd like to be able to pull that information from an image like the one I've attached. If anyone can point me in the right direction I'd really appreciate it. I'm not quite sure how to phrase the question, so I'm sorry if this has been answered somewhere else.

[1]: /storage/temp/136645-yn8ux.png

yn8ux.png (67.1 kB)
Comment
Add comment
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

4 Replies

· Add your reply
  • Sort: 
avatar image
1
Best Answer

Answer by Bunny83 · Apr 19, 2019 at 12:27 AM

This sounds quite similar to what was asked over here. I've created this WebGL example. The code is on pastebin.

Comment
Add comment · Show 1 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image Superdsgross · Apr 19, 2019 at 12:35 AM 0
Share

Perfect. Thanks, this is exactly what I was looking for

avatar image
0

Answer by Superdsgross · May 14, 2019 at 02:07 AM

For anyone else looking for another way to do it, here's another way I figured out. The image can't have an alpha layer though.

 void CountBlackPixels()
     {
         for (int y = 0; y < texture.height; y++)
         {
             for (int x = 0; x < texture.width; x++)
             {
                 float Scale = texture.GetPixel(x, y).grayscale;
                 if (Scale<GrayscaleDefinition)
                 {
                     //Pixel is considered black
                     Vector2 V2 = new Vector2(x,y);
                     BlackDots.Add(V2);
                 }
             }
         }
     }
 
     void IdentifyShapes()
     {
         while (BlackDots.Count > 0)
         {
             ShapeObj NewShape = new ShapeObj();
             List<Vector2> NshapePoints = new List<Vector2>();
             Vector2 startingP = BlackDots[0];
             NshapePoints.Add(startingP);
             BlackDots.Remove(startingP);
             Node N = new Node(startingP, true);
             
             List<Node> AvailableNodes = new List<Node>(); 
             AvailableNodes.Add(N);
             while (AvailableNodes.Count > 0)
             {
                 AvailableNodes[0].FindNeighbors();
                 foreach (Vector2 V in AvailableNodes[0].Neighbors)
                 {
                     if (BlackDots.Contains(V))
                     {
                         NshapePoints.Add(V);
                         Node Nd = new Node(V, true);
                         AvailableNodes.Add(Nd);
                         BlackDots.Remove(V);
                     }
                 }
                 AvailableNodes.RemoveAt(0);
             }
             NewShape.DataPoints = NshapePoints;
             AllShapes.Add(NewShape);
         }
     }
Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image
0

Answer by sjhalayka · Apr 19, 2019 at 08:36 AM

You can fill the shapes and use Marching Squares to generate the outline.

Another way, which was brought up, was the Canny edge detection. You'll have to fill the shapes, or you'll get back two contours, when you only want one. OpenCV has all of this for you. Then you can use the contour points as your vertices.

Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image
2

Answer by EnigmaticCrow · Apr 18, 2019 at 08:47 PM

As i've understood it, you want to

  1. detect lines in an image

  2. create a mesh that closely represents these lines

You might try to do it yourself with something like Canny Edge Detection. Another possibility would be to convert your images to .svg's externally and then extract the vertices from that vector image. This seems to cover svg parsing pretty well.

Comment
Add comment · Show 1 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image Superdsgross · Apr 19, 2019 at 12:17 AM 0
Share

Thanks! You understood my question correctly. As far as Canny Edge Detection goes ( and Sobel Edge detection) they might work but they seem like they might be overly complicated for my application. I plan to be using images with well defined lines already. And neither help me identify individual shapes within an image. And with the .SVG files, I'd prefer to make the tool within Unity if possible and Unity still doesn't support .SVG files unless I'm mistaken. Thanks for the advice and your quick response though. If you have an example of an edge detection implementation that'd be great.

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Welcome to Unity Answers

If you’re new to Unity Answers, please check our User Guide to help you navigate through our website and refer to our FAQ for more information.

Before posting, make sure to check out our Knowledge Base for commonly asked Unity questions.

Check our Moderator Guidelines if you’re a new moderator and want to work together in an effort to improve Unity Answers and support our users.

Follow this Question

Answers Answers and Comments

111 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

2D Sprite blocks onPointerClick? 0 Answers

Gaps in sprites 0 Answers

2D Undertale like Cutscenes / Animations,2D Undertale type cutscenes / animations. 0 Answers

Is tilemap renderer sorting done by camera y position? 0 Answers

Best approach for 2d animation to interact with the environment? 0 Answers


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges