Git Product home page Git Product logo

atlaspack's Introduction

shama

Things for helping me build other things.

Have an opinion on my things? Great! Fork and publish your own thing.

quick start

npm init
npm i shama --save-dev
./node_modules/.bin/shama
npm run watch

require('shama')

Create something like this or use ./node_modules/.bin/shama:

./
├── app
│   ├── css
│   │   └── index.styl
│   └── index.js
├── bin
│   └── build.js
└── package.json

bin/build.js

var path = require('path')
require('shama')(path.resolve(__dirname, '..'))

package.json

{
  "name": "thing",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "node bin/build.js",
    "watch": "node bin/build.js watch"
  }
}

require('shama/build')

// Compile a index.html, index.js and index.css file
// using browserify and stylus
var build = require('shama/build')()
build.css().js().html()

// or more simply
build.all()

// or more complexly
build.all({
  js: { src: 'app/index.js', dest: 'dist/index.js' },
  css: { src: 'app/index.styl', dest: 'dist/index.css' },
  html: { dest: 'dist/index.html', title: 'My website' },
}, function(err) {
  console.log('done!')
})

require('shama/server')

// Starts a server using jaws on port 8080
var server = require('shama/server')({
  // Default is index.html
  '/': 'index.html',
  // Serve up static files from cwd
  '/*': './',
  // Write your own req/res handlers
  '/api/:endpoint': function(req, res) {
    var params = req.extras.params
    res.json({ params.endpoint: true })
  }
})
server.start(8080)

require('shama/watch')

require('shama/watch')({
  'app/**/*': build.all.bind(build),
})

license

Copyright (c) 2015 Kyle Robinson Young
Licensed under the MIT license.

atlaspack's People

Contributors

deathcap avatar rymohr avatar shama avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

atlaspack's Issues

Introduce TypeScript version

Hi @shama. Thank you for sharing this great library.

I've rewritten atlaspack in TypeScript link because of my opinionated passion for type safety :) Just wanted to let you know how your code looks like in TypeScript.

By the way, I've learned a lot from your code around voxel.js world. Thank you for your contribution again!

this._uvcache is an array but used as an object?

Noticed this while debugging.. atlas.uv() appeared to return an empty array [], even though it had properties set for each of the textures (as expected). pack() sets _uvcache to an empty array:

this._uvcache = [];

although earlier in the Atlas constructor it is set to a new object:

this._uvcache = Object.create(null);

uv() uses the .length property, presumably intending an array:

if (self._uvcache.length > 0) {
  return self._uvcache;
}

but the same function sets self._uvcache[atlas.rect.name].

Should _uvcache really be an array? This could potentially cause problems with texture names clashing with Array properties:

screen shot 2014-06-08 at 3 54 00 pm

Move umd build to dist/atlaspack.js

With ES6 adoption growing fast it's nice to have the original source. The current approach results in errors like the following in webpack:

WARNING in ~/atlaspack/index.js
Critical dependencies:
1:440-447 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
@ ~/atlaspack/index.js 1:440-447

May I suggest moving the umd build to dist/atlaspack.js instead?

Related to #8

Invalid packing for long rectangles

I tried to pack every 3 words from lorem ipsum and run into weird layout issue:

screen shot 2017-11-21 at 17 30 52

Despite lots of white space on the left i failed to pack 2 short sentences:
screen shot 2017-11-21 at 17 32 34

Tried same rects with the original binpack with the same result

screen shot 2017-11-21 at 17 38 41

Data i'm using

[{"width":175.625,"height":30},{"width":194.521484375,"height":30},{"width":201.19140625,"height":30},{"width":202.333984375,"height":30},{"width":187.8515625,"height":30},{"width":166.7578125,"height":30},{"width":152.275390625,"height":30},{"width":127.841796875,"height":30},{"width":182.32421875,"height":30},{"width":114.4921875,"height":30},{"width":201.181640625,"height":30},{"width":120.048828125,"height":30},{"width":253.4375,"height":30},{"width":166.71875,"height":30},{"width":143.3984375,"height":30},{"width":153.388671875,"height":30},{"width":210.1171875,"height":30},{"width":282.3828125,"height":30},{"width":170.078125,"height":30},{"width":177.861328125,"height":30},{"width":106.708984375,"height":30},{"width":196.77734375,"height":30},{"width":163.41796875,"height":30},{"width":197.87109375,"height":30},{"width":173.427734375,"height":30},{"width":170.087890625,"height":30},{"width":177.861328125,"height":30},{"width":154.53125,"height":30},{"width":253.4375,"height":30},{"width":214.53125,"height":30},{"width":132.28515625,"height":30},{"width":146.728515625,"height":30}]

Have you ever encountered any issues like that?

improve uv docs

currently the docs for atlas.uv() state:

var uvmap = atlas.uv();
/* {
              TOP   RIGHT  BOTTOM  LEFT
  'name':  [ [0,0], [1,0], [1,1], [0,1] ],
} */

When I think of a quad, I think of four pairs of points, so instead of TOP, RIGHT, BOTTOM, and LEFT, I would expect something more like TOP-LEFT, TOP-RIGHT, BOTTOM-LEFT, BOTTOM-RIGHT.

index() does not work with rects or literals

If I pack a rect or a literal, I can't find it again using index.

var atlaspack = require('atlaspack');
var Rect = atlaspack.Rect;

var atlas = atlaspack(100, 100);

var rect = new Rect(0, 0, 10, 10);
rect.name = "from a rect";
atlas.pack(rect);

atlas.pack({x:0, y:0, w:10, h:10, name:"literal"});

console.log(atlas.index()); // []
console.log(atlas.uv()); // {}

When I use pack() I can fix it manually by doing packed = pack(...); packed.rect.name = "somename" but I can't do that if I use expand().

Add index method

Returns a flat array of rect positions for an index. Also add name to Rect and read id || name from images to set.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.