Merge pull request #249 from swingingtom/bugfix/161-vertical-align

Bugfix/161 vertical align

config/webpack.prodConfig.js

@@ -8,6 +8,7 @@ const ESLintPlugin = require('eslint-webpack-plugin');
 // data in format [ JS file name => demo title in examples page ]
 const pages = [
 	[ 'basic_setup', 'basic setup' ],
+	// [ 'vertical_alignment', 'vertical_alignment' ],
 	[ 'preloaded_font', 'preloaded font' ],
 	[ 'nested_blocks', 'nested blocks' ],
 	[ 'border', 'block borders' ],
@@ -66,6 +67,7 @@ const webpackConfig = env => {
 		entry: {
 			'../dist/three-mesh-ui': './src/three-mesh-ui.js',
 			basic_setup: './examples/basic_setup.js',
+			// vertical_alignment: './examples/vertical_alignment.js',
 			preloaded_font: './examples/preloaded_font.js',
 			nested_blocks: './examples/nested_blocks.js',
 			border: './examples/border.js',

examples/assets/Rye.json

@@ -0,0 +1 @@
+{"pages":["Rye-Regular.png"],"chars":[{"id":87,"index":77,"char":"W","width":51,"height":37,"xoffset":-3,"yoffset":11,"xadvance":44,"chnl":15,"x":0,"y":0,"page":0},{"id":64,"index":54,"char":"@","width":51,"height":44,"xoffset":-1,"yoffset":11,"xadvance":50,"chnl":15,"x":52,"y":0,"page":0},{"id":106,"index":96,"char":"j","width":23,"height":49,"xoffset":-8,"yoffset":8,"xadvance":15,"chnl":15,"x":0,"y":38,"page":0},{"id":37,"index":27,"char":"%","width":47,"height":37,"xoffset":0,"yoffset":11,"xadvance":47,"chnl":15,"x":104,"y":0,"page":0},{"id":103,"index":93,"char":"g","width":31,"height":45,"xoffset":-1,"yoffset":13,"xadvance":25,"chnl":15,"x":152,"y":0,"page":0},{"id":109,"index":99,"char":"m","width":45,"height":29,"xoffset":-1,"yoffset":19,"xadvance":42,"chnl":15,"x":104,"y":38,"page":0},{"id":77,"index":67,"char":"M","width":44,"height":36,"xoffset":-1,"yoffset":11,"xadvance":43,"chnl":15,"x":24,"y":45,"page":0},{"id":119,"index":109,"char":"w","width":44,"height":29,"xoffset":-3,"yoffset":19,"xadvance":38,"chnl":15,"x":184,"y":0,"page":0},{"id":81,"index":71,"char":"Q","width":38,"height":43,"xoffset":-1,"yoffset":11,"xadvance":32,"chnl":15,"x":229,"y":0,"page":0},{"id":47,"index":37,"char":"/","width":18,"height":42,"xoffset":-1,"yoffset":10,"xadvance":17,"chnl":15,"x":69,"y":45,"page":0},{"id":123,"index":113,"char":"{","width":15,"height":42,"xoffset":0,"yoffset":10,"xadvance":14,"chnl":15,"x":88,"y":45,"page":0},{"id":125,"index":115,"char":"}","width":15,"height":42,"xoffset":0,"yoffset":10,"xadvance":14,"chnl":15,"x":184,"y":30,"page":0},{"id":91,"index":81,"char":"[","width":18,"height":42,"xoffset":0,"yoffset":10,"xadvance":16,"chnl":15,"x":200,"y":30,"page":0},{"id":93,"index":83,"char":"]","width":18,"height":42,"xoffset":-2,"yoffset":10,"xadvance":16,"chnl":15,"x":150,"y":46,"page":0},{"id":40,"index":30,"char":"(","width":18,"height":42,"xoffset":0,"yoffset":10,"xadvance":16,"chnl":15,"x":24,"y":82,"page":0},{"id":41,"index":31,"char":")","width":18,"height":42,"xoffset":-1,"yoffset":10,"xadvance":16,"chnl":15,"x":0,"y":88,"page":0},{"id":92,"index":82,"char":"\\","width":18,"height":42,"xoffset":-1,"yoffset":10,"xadvance":17,"chnl":15,"x":43,"y":82,"page":0},{"id":102,"index":92,"char":"f","width":25,"height":40,"xoffset":-1,"yoffset":7,"xadvance":18,"chnl":15,"x":104,"y":68,"page":0},{"id":105,"index":95,"char":"i","width":17,"height":39,"xoffset":-1,"yoffset":8,"xadvance":15,"chnl":15,"x":130,"y":68,"page":0},{"id":112,"index":102,"char":"p","width":31,"height":39,"xoffset":-1,"yoffset":19,"xadvance":28,"chnl":15,"x":62,"y":88,"page":0},{"id":113,"index":103,"char":"q","width":30,"height":39,"xoffset":-1,"yoffset":19,"xadvance":27,"chnl":15,"x":19,"y":125,"page":0},{"id":33,"index":23,"char":"!","width":18,"height":39,"xoffset":0,"yoffset":8,"xadvance":17,"chnl":15,"x":0,"y":131,"page":0},{"id":63,"index":53,"char":"?","width":28,"height":39,"xoffset":-3,"yoffset":9,"xadvance":24,"chnl":15,"x":268,"y":0,"page":0},{"id":55,"index":45,"char":"7","width":27,"height":38,"xoffset":0,"yoffset":9,"xadvance":26,"chnl":15,"x":297,"y":0,"page":0},{"id":65,"index":55,"char":"A","width":37,"height":36,"xoffset":-3,"yoffset":11,"xadvance":30,"chnl":15,"x":325,"y":0,"page":0},{"id":66,"index":56,"char":"B","width":34,"height":37,"xoffset":0,"yoffset":11,"xadvance":31,"chnl":15,"x":363,"y":0,"page":0},{"id":67,"index":57,"char":"C","width":31,"height":37,"xoffset":-1,"yoffset":11,"xadvance":27,"chnl":15,"x":325,"y":37,"page":0},{"id":68,"index":58,"char":"D","width":35,"height":37,"xoffset":0,"yoffset":11,"xadvance":33,"chnl":15,"x":268,"y":40,"page":0},{"id":69,"index":59,"char":"E","width":31,"height":37,"xoffset":0,"yoffset":11,"xadvance":30,"chnl":15,"x":219,"y":44,"page":0},{"id":70,"index":60,"char":"F","width":30,"height":37,"xoffset":0,"yoffset":11,"xadvance":28,"chnl":15,"x":169,"y":73,"page":0},{"id":71,"index":61,"char":"G","width":33,"height":37,"xoffset":-1,"yoffset":11,"xadvance":30,"chnl":15,"x":130,"y":108,"page":0},{"id":76,"index":66,"char":"L","width":30,"height":37,"xoffset":0,"yoffset":11,"xadvance":28,"chnl":15,"x":94,"y":109,"page":0},{"id":79,"index":69,"char":"O","width":34,"height":37,"xoffset":-1,"yoffset":11,"xadvance":32,"chnl":15,"x":50,"y":128,"page":0},{"id":83,"index":73,"char":"S","width":26,"height":37,"xoffset":0,"yoffset":10,"xadvance":26,"chnl":15,"x":19,"y":165,"page":0},{"id":84,"index":74,"char":"T","width":34,"height":37,"xoffset":-1,"yoffset":10,"xadvance":31,"chnl":15,"x":398,"y":0,"page":0},{"id":86,"index":76,"char":"V","width":36,"height":37,"xoffset":-3,"yoffset":11,"xadvance":29,"chnl":15,"x":433,"y":0,"page":0},{"id":90,"index":80,"char":"Z","width":32,"height":37,"xoffset":-1,"yoffset":11,"xadvance":29,"chnl":15,"x":470,"y":0,"page":0},{"id":98,"index":88,"char":"b","width":31,"height":37,"xoffset":-1,"yoffset":10,"xadvance":28,"chnl":15,"x":357,"y":38,"page":0},{"id":100,"index":90,"char":"d","width":30,"height":37,"xoffset":-1,"yoffset":10,"xadvance":28,"chnl":15,"x":304,"y":75,"page":0},{"id":104,"index":94,"char":"h","width":31,"height":37,"xoffset":-1,"yoffset":10,"xadvance":29,"chnl":15,"x":251,"y":78,"page":0},{"id":107,"index":97,"char":"k","width":32,"height":37,"xoffset":-1,"yoffset":10,"xadvance":28,"chnl":15,"x":200,"y":82,"page":0},{"id":108,"index":98,"char":"l","width":17,"height":37,"xoffset":-1,"yoffset":10,"xadvance":15,"chnl":15,"x":233,"y":82,"page":0},{"id":121,"index":111,"char":"y","width":31,"height":37,"xoffset":-3,"yoffset":19,"xadvance":25,"chnl":15,"x":164,"y":111,"page":0},{"id":50,"index":40,"char":"2","width":27,"height":37,"xoffset":1,"yoffset":11,"xadvance":27,"chnl":15,"x":125,"y":146,"page":0},{"id":51,"index":41,"char":"3","width":28,"height":37,"xoffset":0,"yoffset":11,"xadvance":26,"chnl":15,"x":85,"y":147,"page":0},{"id":53,"index":43,"char":"5","width":28,"height":37,"xoffset":0,"yoffset":11,"xadvance":26,"chnl":15,"x":46,"y":166,"page":0},{"id":54,"index":44,"char":"6","width":33,"height":37,"xoffset":-1,"yoffset":10,"xadvance":30,"chnl":15,"x":0,"y":203,"page":0},{"id":57,"index":47,"char":"9","width":32,"height":37,"xoffset":-1,"yoffset":11,"xadvance":30,"chnl":15,"x":389,"y":38,"page":0},{"id":72,"index":62,"char":"H","width":36,"height":36,"xoffset":0,"yoffset":11,"xadvance":35,"chnl":15,"x":422,"y":38,"page":0},{"id":73,"index":63,"char":"I","width":19,"height":36,"xoffset":0,"yoffset":11,"xadvance":18,"chnl":15,"x":283,"y":78,"page":0},{"id":74,"index":64,"char":"J","width":28,"height":36,"xoffset":-2,"yoffset":11,"xadvance":25,"chnl":15,"x":459,"y":38,"page":0},{"id":75,"index":65,"char":"K","width":35,"height":36,"xoffset":0,"yoffset":11,"xadvance":32,"chnl":15,"x":422,"y":75,"page":0},{"id":78,"index":68,"char":"N","width":35,"height":36,"xoffset":-1,"yoffset":11,"xadvance":34,"chnl":15,"x":458,"y":75,"page":0},{"id":80,"index":70,"char":"P","width":32,"height":36,"xoffset":0,"yoffset":11,"xadvance":29,"chnl":15,"x":335,"y":76,"page":0},{"id":82,"index":72,"char":"R","width":35,"height":36,"xoffset":0,"yoffset":11,"xadvance":32,"chnl":15,"x":368,"y":76,"page":0},{"id":85,"index":75,"char":"U","width":34,"height":36,"xoffset":-1,"yoffset":11,"xadvance":32,"chnl":15,"x":404,"y":112,"page":0},{"id":88,"index":78,"char":"X","width":35,"height":36,"xoffset":-3,"yoffset":11,"xadvance":28,"chnl":15,"x":439,"y":112,"page":0},{"id":89,"index":79,"char":"Y","width":35,"height":36,"xoffset":-3,"yoffset":11,"xadvance":28,"chnl":15,"x":475,"y":112,"page":0},{"id":116,"index":106,"char":"t","width":23,"height":36,"xoffset":-2,"yoffset":11,"xadvance":18,"chnl":15,"x":488,"y":38,"page":0},{"id":48,"index":38,"char":"0","width":32,"height":36,"xoffset":-1,"yoffset":11,"xadvance":30,"chnl":15,"x":303,"y":113,"page":0},{"id":49,"index":39,"char":"1","width":19,"height":36,"xoffset":1,"yoffset":11,"xadvance":19,"chnl":15,"x":283,"y":115,"page":0},{"id":52,"index":42,"char":"4","width":32,"height":36,"xoffset":-2,"yoffset":11,"xadvance":29,"chnl":15,"x":336,"y":113,"page":0},{"id":56,"index":46,"char":"8","width":32,"height":36,"xoffset":-2,"yoffset":11,"xadvance":29,"chnl":15,"x":369,"y":113,"page":0},{"id":38,"index":28,"char":"&","width":33,"height":36,"xoffset":1,"yoffset":11,"xadvance":35,"chnl":15,"x":196,"y":120,"page":0},{"id":35,"index":25,"char":"#","width":28,"height":36,"xoffset":0,"yoffset":11,"xadvance":29,"chnl":15,"x":251,"y":116,"page":0},{"id":59,"index":49,"char":";","width":15,"height":32,"xoffset":0,"yoffset":23,"xadvance":14,"chnl":15,"x":251,"y":44,"page":0},{"id":110,"index":100,"char":"n","width":31,"height":29,"xoffset":-1,"yoffset":19,"xadvance":28,"chnl":15,"x":153,"y":149,"page":0},{"id":117,"index":107,"char":"u","width":31,"height":29,"xoffset":-1,"yoffset":19,"xadvance":28,"chnl":15,"x":402,"y":149,"page":0},{"id":111,"index":101,"char":"o","width":30,"height":29,"xoffset":-1,"yoffset":19,"xadvance":28,"chnl":15,"x":434,"y":149,"page":0},{"id":115,"index":105,"char":"s","width":23,"height":30,"xoffset":0,"yoffset":18,"xadvance":22,"chnl":15,"x":465,"y":149,"page":0},{"id":118,"index":108,"char":"v","width":30,"height":29,"xoffset":-3,"yoffset":19,"xadvance":25,"chnl":15,"x":303,"y":150,"page":0},{"id":120,"index":110,"char":"x","width":30,"height":28,"xoffset":-2,"yoffset":19,"xadvance":25,"chnl":15,"x":334,"y":150,"page":0},{"id":97,"index":87,"char":"a","width":29,"height":29,"xoffset":-2,"yoffset":19,"xadvance":26,"chnl":15,"x":365,"y":150,"page":0},{"id":99,"index":89,"char":"c","width":26,"height":29,"xoffset":-1,"yoffset":19,"xadvance":23,"chnl":15,"x":334,"y":179,"page":0},{"id":101,"index":91,"char":"e","width":27,"height":29,"xoffset":-1,"yoffset":19,"xadvance":25,"chnl":15,"x":395,"y":179,"page":0},{"id":114,"index":104,"char":"r","width":26,"height":29,"xoffset":-1,"yoffset":19,"xadvance":23,"chnl":15,"x":361,"y":180,"page":0},{"id":122,"index":112,"char":"z","width":27,"height":29,"xoffset":-1,"yoffset":19,"xadvance":25,"chnl":15,"x":423,"y":179,"page":0},{"id":58,"index":48,"char":":","width":15,"height":25,"xoffset":0,"yoffset":23,"xadvance":14,"chnl":15,"x":404,"y":76,"page":0},{"id":34,"index":24,"char":"\"","width":24,"height":19,"xoffset":-1,"yoffset":11,"xadvance":22,"chnl":15,"x":451,"y":180,"page":0},{"id":43,"index":33,"char":"+","width":21,"height":22,"xoffset":0,"yoffset":22,"xadvance":22,"chnl":15,"x":280,"y":152,"page":0},{"id":42,"index":32,"char":"*","width":21,"height":20,"xoffset":0,"yoffset":10,"xadvance":20,"chnl":15,"x":489,"y":149,"page":0},{"id":39,"index":29,"char":"'","width":14,"height":19,"xoffset":-1,"yoffset":11,"xadvance":12,"chnl":15,"x":169,"y":46,"page":0},{"id":45,"index":35,"char":"-","width":16,"height":7,"xoffset":1,"yoffset":29,"xadvance":18,"chnl":15,"x":200,"y":73,"page":0},{"id":46,"index":36,"char":".","width":15,"height":12,"xoffset":0,"yoffset":36,"xadvance":14,"chnl":15,"x":0,"y":171,"page":0},{"id":32,"index":22,"char":" ","width":0,"height":0,"xoffset":-2,"yoffset":43,"xadvance":10,"chnl":15,"x":297,"y":39,"page":0}],"info":{"face":"Rye-Regular","size":42,"bold":0,"italic":0,"charset":["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"," ","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","0","1","2","3","4","5","6","7","8","9","!","?",":",";",".","/","*","-","+","'","\"","{","}","[","]","(",")","\\","&","%","#","@"],"unicode":1,"stretchH":100,"smooth":1,"aa":1,"padding":[2,2,2,2],"spacing":[0,0]},"common":{"lineHeight":53,"base":43,"scaleW":512,"scaleH":512,"pages":1,"packed":0,"alphaChnl":0,"redChnl":0,"greenChnl":0,"blueChnl":0},"distanceField":{"fieldType":"msdf","distanceRange":4},"kernings":[]}