{"record":{"id":"f2a6af00ad4511a0","repo":"BabylonJS/Babylon.js","slug":"invalid-json-format-check-the-frame-values-and-m","errorCode":null,"errorMessage":"Invalid JSON Format.  Check the frame values and make sure the name is the first parameter.","messagePattern":"Invalid JSON Format\\.  Check the frame values and make sure the name is the first parameter\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/dev/core/src/Sprites/spriteManager.ts","lineNumber":404,"sourceCode":"    }\r\n\r\n    private _makePacked(imgUrl: string, spriteJSON: any) {\r\n        if (spriteJSON !== null) {\r\n            try {\r\n                //Get the JSON and Check its structure.  If its an array parse it if its a JSON string etc...\r\n                let celldata: any;\r\n                if (typeof spriteJSON === \"string\") {\r\n                    celldata = JSON.parse(spriteJSON);\r\n                } else {\r\n                    celldata = spriteJSON;\r\n                }\r\n\r\n                if (celldata.frames.length) {\r\n                    const frametemp: any = {};\r\n                    for (let i = 0; i < celldata.frames.length; i++) {\r\n                        const _f = celldata.frames[i];\r\n                        if (typeof Object.keys(_f)[0] !== \"string\") {\r\n                            throw new Error(\"Invalid JSON Format.  Check the frame values and make sure the name is the first parameter.\");\r\n                        }\r\n\r\n                        const name: string = _f[Object.keys(_f)[0]];\r\n                        frametemp[name] = _f;\r\n                    }\r\n                    celldata.frames = frametemp;\r\n                }\r\n\r\n                const spritemap = <string[]>Reflect.ownKeys(celldata.frames);\r\n\r\n                this._spriteMap = spritemap;\r\n                this._packedAndReady = true;\r\n                this._cellData = celldata.frames;\r\n            } catch (e) {\r\n                this._fromPacked = false;\r\n                this._packedAndReady = false;\r\n                throw new Error(\"Invalid JSON from string. Spritesheet managed with constant cell size.\", { cause: e });\r\n            }\r","sourceCodeStart":386,"sourceCodeEnd":422,"githubUrl":"https://github.com/BabylonJS/Babylon.js/blob/0592b347b8a4ee0236089ea86a749cacfdb266d8/packages/dev/core/src/Sprites/spriteManager.ts#L386-L422","documentation":"SpriteManager._makePacked parses packed-sprite atlas JSON where each frame entry is expected to be an object whose FIRST key is the frame name (a string). The code takes Object.keys(_f)[0] and treats it as the name; if the first key is not a string (e.g. a numeric index, meaning the frame was an array), it throws this error because the atlas JSON does not match the expected packed format.","triggerScenarios":"Constructing a SpriteManager (constructor -> _makePacked) with atlas JSON where celldata.frames is an array whose elements are not name-keyed objects — e.g. frames entries are arrays, or the frames object/array structure was produced by a different exporter format so Object.keys(_f)[0] is a numeric index (\"0\", or a non-string key).","commonSituations":"Using an atlas exported by a third-party packer (TexturePacker variants, custom scripts) whose frame layout differs from the expected {\"frameName\": {...}} per entry; passing sprite-sheet JSON instead of packed-atlas JSON; a version change in the export tool that wrapped frames differently; forgetting to run the tool's own converter step.","solutions":["Check the atlas JSON: each entry in celldata.frames must be an object whose first key is the frame name string; re-export with the correct packer preset/format.","If your frames are arrays or use a different schema, transform them before constructing SpriteManager (map to {name: frameData} objects).","Verify you are feeding packed-atlas JSON to _makePacked, not plain sprite-sheet data — use the appropriate manager/path for that format.","Validate the JSON against a known-good working atlas file from the same tool version to spot structural drift."],"exampleFix":"// before (array entries -> numeric first key)\n\"frames\": [ [\"walk_0\", {x:0,y:0}], [\"walk_1\", {x:32,y:0}] ]\n\n// after (name-keyed objects)\n\"frames\": [\n  { \"walk_0\": { x: 0, y: 0, w: 32, h: 32 } },\n  { \"walk_1\": { x: 32, y: 0, w: 32, h: 32 } }\n]","handlingStrategy":"validation","validationCode":"function isValidPackedFrames(json) {\n  const frames = json?.celldata?.frames;\n  if (!Array.isArray(frames)) return false;\n  return frames.every(f =>\n    f && typeof f === \"object\" && !Array.isArray(f) &&\n    typeof Object.keys(f)[0] === \"string\"\n  );\n}\nif (!isValidPackedFrames(atlasJson)) throw new Error(\"Atlas JSON is not in expected packed format\");","typeGuard":"function isNamedFrame(f: unknown): f is Record<string, object> & { firstKeyName: string } {\n  if (typeof f !== \"object\" || f === null || Array.isArray(f)) return false;\n  const first = Object.keys(f)[0];\n  return typeof first === \"string\" && typeof (f as Record<string, unknown>)[first] === \"object\";\n}","tryCatchPattern":"let spriteManager;\ntry {\n  spriteManager = new SpriteManager(atlasJson, ...);\n} catch (e) {\n  if (e.message.startsWith(\"Invalid JSON Format\")) {\n    console.error(\"Atlas frames are not name-keyed objects; re-export with the correct packer preset.\", atlasJson.frames?.[0]);\n  } else throw e;\n}","preventionTips":["Pin your atlas packer tool/version and commit a known-good sample atlas as a fixture test.","Always use the exporter preset that emits {\"frameName\": {...}} entries; never feed raw sprite-sheet JSON to _makePacked.","Validate atlas JSON structure at load time before constructing SpriteManager.","Re-run the packer's converter step whenever the export tool upgrades."],"tags":["sprites","atlas","json","parsing","format"],"backgroundTag":"invalid-json-format","analyzedSha":"0592b347b8a4ee0236089ea86a749cacfdb266d8","analyzedAt":"2026-08-30T15:11:20.442Z","schemaVersion":2},"datasetVersion":"2026-08-30T18:17:15.746Z"}